Lazy Loading Images & Videos: A Guide to Efficient Deferred Loading

What Is Lazy Loading and Why Does It Matter?

Lazy loading is a technique that defers the loading of non-critical resources — primarily images and videos — until the user actually needs them. Instead of downloading every media file the moment a page opens, the browser only fetches content as it enters (or approaches) the viewport.

The impact is significant. According to Google’s Web.dev data, lazy loading offscreen images on a typical e-commerce page can reduce initial page weight by 40–60% and shave 1–3 seconds off load time. For users on mobile networks, that difference determines whether they stay or bounce.

Lazy Loading Images: Two Core Approaches

Native Browser Lazy Loading

Since 2020, most modern browsers support the loading attribute natively. It’s the simplest and most efficient method available today:

<img src="product-photo.jpg" alt="Red running shoes" width="800" height="600" loading="lazy">

That single attribute tells the browser to defer fetching until the image is near the viewport. No JavaScript required. As of 2024, browser support exceeds 92% globally (caniuse.com), covering Chrome, Firefox, Edge, Safari, and Opera.

Key rules for native lazy loading:

• Always include width and height attributes to prevent layout shifts (CLS).
• Never lazy load above-the-fold images, especially your LCP element.
• Use loading="eager" explicitly for hero images to prioritize them.

JavaScript-Based Lazy Loading

For more control — custom thresholds, fade-in animations, or support for background images — the Intersection Observer API is the modern standard:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
}, { rootMargin: '200px' });

document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

The rootMargin: '200px' setting starts loading images 200 pixels before they enter the viewport, creating a seamless experience with no visible pop-in.

Popular libraries like lazysizes (17KB gzipped) or lozad.js (1KB) wrap this logic with fallbacks and extras if you prefer a plug-and-play solution.

Lazy Loading Videos: A Different Challenge

Videos are far heavier than images. A single embedded YouTube iframe loads 800KB+ of resources before a user even clicks play. Multiply that across a page with three or four embeds, and performance collapses.

The Facade Pattern

The most effective technique is the facade pattern: display a static thumbnail and only load the actual video player on click.

<div class="video-facade" data-video-id="dQw4w9WgXcQ">
  <img src="thumbnail.jpg" alt="Watch our product demo" loading="lazy">
  <button aria-label="Play video">▶</button>
</div>

On click, JavaScript replaces the facade with the real iframe. Tools like lite-youtube-embed automate this and can cut iframe-related load time by 90%.

Self-Hosted Videos

For <video> elements, use preload="none" to prevent the browser from downloading any data upfront:

<video preload="none" poster="preview.jpg" controls>
  <source src="demo.mp4" type="video/mp4">
</video>

Combined with a compelling poster image, this gives users a visual cue without any bandwidth cost.

Measuring the Results

After implementing lazy loading, validate your gains with real metrics:

Metric	Before	After
Page weight	4.2 MB	1.8 MB
LCP	3.8s	1.9s
Speed Index	5.1s	2.4s

Typical results from a 30-image product listing page optimized by Lueur Externe, a web performance agency based in the French Riviera.

Use Google PageSpeed Insights, Lighthouse, and WebPageTest to benchmark before and after. Focus on LCP, CLS, and total transfer size.

Common Pitfalls to Avoid

• Lazy loading your LCP image — this is the number one mistake and directly hurts Core Web Vitals.
• Missing dimensions on <img> tags, causing layout shifts as images load.
• No fallback for the rare browsers that don’t support loading="lazy" (use a lightweight JS polyfill).
• Over-relying on plugins in WordPress or PrestaShop without understanding what they change — at Lueur Externe, we audit plugin behavior to ensure they don’t conflict with critical rendering paths.

Conclusion: Speed Is a Feature

Lazy loading is one of the highest-impact, lowest-effort performance optimizations available today. A single HTML attribute can eliminate megabytes of wasted downloads and transform your Core Web Vitals scores.

But getting the details right — knowing which images to defer, how to handle video embeds, and avoiding LCP penalties — requires expertise. If you want a thorough performance audit and hands-on implementation tailored to your stack, reach out to Lueur Externe. With over 20 years of experience in web performance, PrestaShop, WordPress, and SEO, we’ll make sure every byte counts.