Lazy Loading

Lazy loading delays images, iframes, or media until they approach the viewport. The initial page becomes lighter, and below-the-fold elements do not consume connections from users who may never scroll.

Native attributes

<img src="/img/card.jpg" alt="Hosting card" loading="lazy" decoding="async" width="640" height="360" />
<iframe src="https://www.youtube.com/embed/..." loading="lazy" title="Tutorial video" width="560" height="315"></iframe>

loading="lazy" is supported by modern browsers and needs no JavaScript. Still include width and height or CSS aspect-ratio to prevent layout shift when the image appears.

Do not apply it everywhere

The LCP image, main logo, or first above-the-fold image should not use lazy loading. Set fetchpriority="high" so the browser loads it earlier. If important elements depend on lazy loading, users on slow connections may see an empty area.

Visible carousel images also need testing. The browser may treat them as off-screen, so they load only after a slide change. For users without JavaScript, script-based lazy loading does not run. Use native attributes when possible.

JavaScript implementation

When an element has no native support, use IntersectionObserver.

const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (!entry.isIntersecting) continue;
    const img = entry.target;
    img.src = img.dataset.src;
    observer.unobserve(img);
  }
}, { rootMargin: "200px" });

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

rootMargin starts loading before the image is visible. Do not make it too large, or the bandwidth saving disappears.

WordPress and cache

WordPress 5.5 and newer add loading="lazy" automatically. You can exclude the hero image with the wp_lazy_loading_enabled filter or mark specific images. Optimization plugins often have a “skip first image” option. Inspect the generated HTML instead of trusting the label.

Lazy loading reduces initial requests, but images that have loaded still need caching. A CDN and browser cache still matter.

What people miss

Without dimensions, the page shifts and CLS gets worse. A heavy blur placeholder removes the savings. Primary content that appears only through JavaScript may also be invisible to crawlers.

Lazy loading is most effective with image optimization and a CDN. Measure the impact on Core Web Vitals, not just the request count.

FAQ