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?
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
Before diving into JavaScript, it’s worth mentioning that modern browsers support a native lazy loading attribute for images and iframes.
<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.
<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);
});
});
Here’s what happens:
- The script looks for all images with the class lazy-image.
- When an image scrolls into view, its
data-srcis transferred intosrc. - 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>
Notice that the src attribute has been replaced by 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);
});
});
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);
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.
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.
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.
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.
