Website performance has become a critical ranking factor for search engines and a key driver of user experience. When a site loads slowly, visitors are more likely to leave before engaging with the content. One of the biggest culprits behind sluggish websites is heavy media - especially images and videos. Fortunately, lazy loading provides an efficient way to improve page speed without sacrificing visual quality. In this article, we’ll explore what lazy loading is, why it matters, and how you can implement it for images and videos using JavaScript. What Is Lazy Loading? What Is Lazy Loading? Lazy loading is a web optimization technique that delays the loading of non-critical resources until they are actually needed. Instead of loading all images and videos at once during the initial page load, lazy loading only fetches them when they appear in (or near) the user’s viewport. For example, if your page has 20 images but only 3 are visible when the visitor first lands on the page, lazy loading ensures that only those 3 images are loaded initially. The rest are downloaded only when the user scrolls down. The result? Faster load times, reduced bandwidth usage, and a smoother browsing experience. Native Lazy Loading With HTML Native Lazy Loading With HTML Before diving into JavaScript, it’s worth mentioning that modern browsers support a native lazy loading attribute for images and iframes. native lazy loading attribute <img src="image.jpg" alt="Example" loading="lazy">
<iframe src="video.html" loading="lazy"></iframe> <img src="image.jpg" alt="Example" loading="lazy">
<iframe src="video.html" loading="lazy"></iframe> This is the easiest solution because it requires no extra code. However, not all browsers fully support it, and it may lack customization options. That’s where JavaScript comes in. Lazy Loading Images With JavaScript One of the most reliable ways to implement lazy loading is with the Intersection Observer API. This API lets you detect when elements enter or exit the viewport, making it ideal for conditional loading of resources. Step 1: Update Your HTML Instead of placing the image URL in the src attribute, you store it in a data-src attribute. src data-src <img data-src="image.jpg" alt="Lazy loaded example" class="lazy-image"> <img data-src="image.jpg" alt="Lazy loaded example" class="lazy-image"> Step 2: Add JavaScript Code document.addEventListener("DOMContentLoaded", function () {
  const lazyImages = document.querySelectorAll("img.lazy-image");
  const imageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.classList.remove("lazy-image");
        observer.unobserve(img);
      }
    });
  });
  lazyImages.forEach(img => {
    imageObserver.observe(img);
  });
}); document.addEventListener("DOMContentLoaded", function () {
  const lazyImages = document.querySelectorAll("img.lazy-image");
  const imageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.classList.remove("lazy-image");
        observer.unobserve(img);
      }
    });
  });
  lazyImages.forEach(img => {
    imageObserver.observe(img);
  });
}); Here’s what happens: Here’s what happens: The script looks for all images with the class lazy-image.
When an image scrolls into view, its data-src is transferred into src.
The observer then stops tracking that image. The script looks for all images with the class lazy-image. When an image scrolls into view, its data-src is transferred into src. data-src src The observer then stops tracking that image. Lazy Loading Videos With JavaScript Videos and embedded iframes (like YouTube) are even heavier than images, making them prime candidates for lazy loading. Step 1: Update Your HTML <iframe data-src="https://www.youtube.com/embed/VIDEO_ID" 
        class="lazy-video" 
        width="560" height="315" 
        frameborder="0" allowfullscreen></iframe> <iframe data-src="https://www.youtube.com/embed/VIDEO_ID" 
        class="lazy-video" 
        width="560" height="315" 
        frameborder="0" allowfullscreen></iframe> Notice that the src attribute has been replaced by data-src. src data-src Step 2: Add JavaScript Code document.addEventListener("DOMContentLoaded", function () {
  const lazyVideos = document.querySelectorAll("iframe.lazy-video");
  const videoObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const video = entry.target;
        video.src = video.dataset.src;
        video.classList.remove("lazy-video");
        observer.unobserve(video);
      }
    });
  });
  lazyVideos.forEach(video => {
    videoObserver.observe(video);
  });
}); document.addEventListener("DOMContentLoaded", function () {
  const lazyVideos = document.querySelectorAll("iframe.lazy-video");
  const videoObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const video = entry.target;
        video.src = video.dataset.src;
        video.classList.remove("lazy-video");
        observer.unobserve(video);
      }
    });
  });
  lazyVideos.forEach(video => {
    videoObserver.observe(video);
  });
}); When the user scrolls near the video, the actual YouTube (or Vimeo) URL is loaded, saving precious loading time. Fallback for Older Browsers If you need to support older browsers that don’t have the Intersection Observer API, you can fall back to using the scroll event: function lazyLoad() {
  const lazyElements = document.querySelectorAll("[data-src]");
  lazyElements.forEach(el => {
    if (el.getBoundingClientRect().top < window.innerHeight + 200) {
      el.src = el.dataset.src;
      el.removeAttribute("data-src");
    }
  });
}
window.addEventListener("scroll", lazyLoad);
window.addEventListener("resize", lazyLoad);
window.addEventListener("orientationchange", lazyLoad); function lazyLoad() {
  const lazyElements = document.querySelectorAll("[data-src]");
  lazyElements.forEach(el => {
    if (el.getBoundingClientRect().top < window.innerHeight + 200) {
      el.src = el.dataset.src;
      el.removeAttribute("data-src");
    }
  });
}
window.addEventListener("scroll", lazyLoad);
window.addEventListener("resize", lazyLoad);
window.addEventListener("orientationchange", lazyLoad); This checks the element’s position relative to the viewport and loads it when it’s close to being visible. Best Practices for Lazy Loading Do not lazy load above-the-fold images: These should load instantly to avoid delays in the initial render.
Combine with modern image formats: Use WebP or AVIF for smaller file sizes.
Test with performance tools: Google PageSpeed Insights and Lighthouse can help you measure improvements.
Provide placeholders: Use a small blurred image or a loading animation to prevent layout shifts. Do not lazy load above-the-fold images: These should load instantly to avoid delays in the initial render. Do not lazy load above-the-fold images: Combine with modern image formats: Use WebP or AVIF for smaller file sizes. Combine with modern image formats: Test with performance tools: Google PageSpeed Insights and Lighthouse can help you measure improvements. Test with performance tools: Provide placeholders: Use a small blurred image or a loading animation to prevent layout shifts. Provide placeholders: Tip: Optimizing user experience doesn’t stop with media. Even small enhancements, like interactive maps, can make a difference. For a more detailed guide on image loading techniques, you can check out this resource. Tip: Optimizing user experience doesn’t stop with media. Even small enhancements, like interactive maps, can make a difference. For a more detailed guide on image loading techniques, you can check out this resource. this resource SEO and User Experience Benefits Beyond performance, lazy loading can also improve your site’s SEO and engagement metrics. Since Google now considers page speed and Core Web Vitals as ranking factors, reducing unnecessary resource loading gives your site a better chance at ranking higher in search results. SEO and engagement metrics At the same time, users benefit from a faster, smoother browsing experience, which reduces bounce rates and encourages them to stay longer on your site. In short, lazy loading is not just a technical improvement—it’s a competitive advantage. Conclusion Lazy loading is one of the simplest yet most effective techniques for improving website speed and user experience. By implementing lazy loading for images and videos using JavaScript, you reduce initial page load time, save bandwidth, and create a smoother browsing experience for your visitors. Whether you rely on native HTML attributes or a JavaScript-based approach, this optimization is a must-have for modern web development.

This story contains new, firsthand information uncovered by the writer.

How to Fix the ReferenceError “__dirname is Not Defined” in Node.js ES Modules

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

How to Implement Lazy Loading Images and Videos in JavaScript

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How to Fix the ReferenceError “__dirname is Not Defined” in Node.js ES Modules

10 security tips for frontend developers

10+ Ridiculously Cool Admin Themes And Templates

10 Best Practices for Every React Developer

12 JavaScript Concepts That Will Level Up Your Development Skills

How to Fix the ReferenceError “__dirname is Not Defined” in Node.js ES Modules

10 security tips for frontend developers

10+ Ridiculously Cool Admin Themes And Templates

10 Best Practices for Every React Developer

12 JavaScript Concepts That Will Level Up Your Development Skills

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps