diff --git a/cms/templates/partials/course-carousel.html b/cms/templates/partials/course-carousel.html
index 41c0f0a862..f40bb259c4 100644
--- a/cms/templates/partials/course-carousel.html
+++ b/cms/templates/partials/course-carousel.html
@@ -1,5 +1,5 @@
 {% load static wagtailcore_tags wagtailimages_tags %}
-<div id="courseLineup" class="course-in-program">
+<div id="courseLineup" class="course-in-program lazy" >
   <div class="container">
     <div class="head">
       <h1>{{ page.heading }}</h1>
diff --git a/cms/templates/partials/courseware-carousel-base.html b/cms/templates/partials/courseware-carousel-base.html
index 35fa5d073d..c36a9b2010 100644
--- a/cms/templates/partials/courseware-carousel-base.html
+++ b/cms/templates/partials/courseware-carousel-base.html
@@ -5,7 +5,7 @@
       {% if courseware_page.thumbnail_image %}
         <img src="{% image_version_url courseware_page.thumbnail_image "fill-480x275" %}" alt="{{ courseware_page.title }}" />
       {% else %}
-        <img src="{% static 'images/mit-dome.png' %}" width="480" height="275" alt="{{ courseware_page.title }}" />
+        <img src="{% static 'images/mit-dome.png' %}" width="480" height="275" alt="{{ courseware_page.title }}" loading="lazy" />
       {% endif %}
       <a class="title" href="{% pageurl courseware_page %}">{{ courseware_page.title }}</a>
       <p>{{ courseware_page.subhead }}</p>
diff --git a/cms/templates/partials/faculty-carousel.html b/cms/templates/partials/faculty-carousel.html
index 85fa6c469d..352fd05a57 100644
--- a/cms/templates/partials/faculty-carousel.html
+++ b/cms/templates/partials/faculty-carousel.html
@@ -1,5 +1,6 @@
 {% load wagtailcore_tags image_version_url %}
-<div id="faculty" class="faculty-block">
+
+<div id="faculty" class="faculty-block lazy">
   <div class="container">
     <div class="head">
       <h1>{{ page.heading }}</h1>
@@ -11,7 +12,7 @@ <h3>{{ page.subhead }}</h3>
       {% for member in page.members %}
         <div class="slide">
           <div class="slide-holder">
-            <img src="{% image_version_url member.value.image "fill-300x300" %}" alt="{{ member.value.name }}">
+            <img src="{% image_version_url member.value.image "fill-300x300" %}" alt="{{ member.value.name }}" loading="lazy">
             <h2>{{ member.value.name }}</h2>
             <div class="text-holder">
               {{ member.value.description|richtext }}
diff --git a/cms/templates/partials/learning-techniques.html b/cms/templates/partials/learning-techniques.html
index 1cb0efd235..9b060ee242 100644
--- a/cms/templates/partials/learning-techniques.html
+++ b/cms/templates/partials/learning-techniques.html
@@ -5,7 +5,7 @@ <h1>{{ page.title }}</h1>
     {% for technique in page.technique_items %}
       <li>
         <div class="img-holder">
-          <img src="{% image_version_url technique.value.image "height-110|format-png" %}" alt="Learning technique" />
+          <img src="{% image_version_url technique.value.image "height-110|format-png" %}" alt="Learning technique" loading="lazy"/>
         </div>
         <h3>{{ technique.value.heading }}</h3>
         <h4>{{ technique.value.sub_heading }}</h4>
diff --git a/cms/templates/partials/testimonial-carousel.html b/cms/templates/partials/testimonial-carousel.html
index d2b7d75646..d16c8def79 100644
--- a/cms/templates/partials/testimonial-carousel.html
+++ b/cms/templates/partials/testimonial-carousel.html
@@ -1,5 +1,5 @@
 {% load image_version_url wagtailcore_tags %}
-<div id="testimonials" class="learners-block">
+<div id="testimonials" class="learners-block lazy">
   <div class="container">
     <div class="head">
       <h1>{{ page.heading }}</h1>
@@ -12,7 +12,7 @@ <h3>{{ page.subhead }}</h3>
       <div class="slide">
         <div class="slide-holder">
           {% if testimonial.value.image %}
-            <img src="{% image_version_url testimonial.value.image "fill-75x75" %}" alt="{{ testimonial.value.name }}" />
+            <img src="{% image_version_url testimonial.value.image "fill-75x75" %}" alt="{{ testimonial.value.name }}" height="75" width="75" loading="lazy"/>
           {% endif %}
           <h2>{{ testimonial.value.name }}, {{ testimonial.value.title }}</h2>
           <p>{{ testimonial.value.quote|truncatechars:150 }}</p>
@@ -36,7 +36,7 @@ <h2>{{ testimonial.value.name }}, {{ testimonial.value.title }}</h2>
             </div>
             <div class="container px-4">
               <div class="row py-2">
-                <img src="{% image_version_url testimonial.value.image "fill-100x100" %}" class="border rounded-circle headshot-image" alt="Testimonial image" />
+                <img src="{% image_version_url testimonial.value.image "fill-100x100" %}" class="border rounded-circle headshot-image" alt="Testimonial image" height="100" width="100" loading="lazy"/>
               </div>
               <div class="row mb-4">
                 <h2 class="modal-title text-uppercase">{{ testimonial.value.name }}, {{ testimonial.value.title }}</h2>
diff --git a/cms/templates/product_page.html b/cms/templates/product_page.html
index 5b29c63959..0d8f36f2af 100644
--- a/cms/templates/product_page.html
+++ b/cms/templates/product_page.html
@@ -110,4 +110,24 @@
   {% if faqs %} {% include "partials/faqs.html" with faqs=faqs %} {% endif %}
   {% if propel_career %} {% include "partials/text-section.html" with page=propel_career %} {% endif %}
 </div>
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy"));
+        if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype) {
+            let lazyBackgroundObserver = new IntersectionObserver(function (entries, observer) {
+                entries.forEach(function (entry) {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add("img");
+                        lazyBackgroundObserver.unobserve(entry.target);
+                    }
+                });
+            });
+
+            lazyBackgrounds.forEach(function (lazyBackground) {
+                lazyBackgroundObserver.observe(lazyBackground);
+            });
+        }
+    });
+</script>
+
 {% endblock %}
diff --git a/static/scss/detail/courses-in-program.scss b/static/scss/detail/courses-in-program.scss
index f2c20bf4c3..52f5d5db2c 100644
--- a/static/scss/detail/courses-in-program.scss
+++ b/static/scss/detail/courses-in-program.scss
@@ -2,7 +2,7 @@
 .course-in-program {
   width: 100%;
   padding: 100px 0 50px;
-  background: white url("#{$static-path}/images/course-carousel-bg.jpg") no-repeat 50% 50%;
+  background: white no-repeat 50% 50%;
   min-height: 400px;
   overflow: hidden;
   position: relative;
@@ -49,6 +49,10 @@
   }
 }
 
+.course-in-program.img {
+  background-image: url("#{$static-path}/images/course-carousel-bg.jpg");
+}
+
 .course-slider {
   position: relative;
   margin: 0 -15px 50px;
diff --git a/static/scss/detail/faculty.scss b/static/scss/detail/faculty.scss
index 97605f2fb9..008136e64b 100644
--- a/static/scss/detail/faculty.scss
+++ b/static/scss/detail/faculty.scss
@@ -2,7 +2,7 @@
 .faculty-block {
   width: 100%;
   padding: 100px 0 50px;
-  background: black url("#{$static-path}/images/faculty-bg.jpg") no-repeat 50% 0;
+  background: black no-repeat 50% 0;
   min-height: 400px;
   overflow: hidden;
   position: relative;
@@ -29,6 +29,11 @@
   }
 }
 
+.faculty-block.img{
+  background-image: url("#{$static-path}/images/faculty-bg.jpg");
+  }
+
+
 .faculty-slider {
   position: relative;
   margin: 0 -15px;
diff --git a/static/scss/detail/testimonial-carousel.scss b/static/scss/detail/testimonial-carousel.scss
index 1fc1c815f6..7b8a5e1bf9 100644
--- a/static/scss/detail/testimonial-carousel.scss
+++ b/static/scss/detail/testimonial-carousel.scss
@@ -1,7 +1,7 @@
 // sass-lint:disable mixins-before-declarations
 .learners-block {
   padding: 100px 0 50px;
-  background: white url("#{$static-path}/images/testimonial-carousel-bg.jpg") no-repeat 50% 0;
+  background: white no-repeat 50% 0;
   min-height: 400px;
   overflow: hidden;
   position: relative;
@@ -41,6 +41,10 @@
   }
 }
 
+.learners-block.img{
+  background-image: url("#{$static-path}/images/testimonial-carousel-bg.jpg");
+}
+
 .learners-slider {
   position: relative;
   margin: 0 -15px;