Lazy Loading

Lazy loading defers fetching of below-the-fold resources, mostly images and iframes, until the user scrolls near them, instead of downloading everything up front. Done right, it cuts initial page weight dramatically on image-heavy pages. Done wrong, it delays your LCP image or hides content from crawlers entirely, and both failure modes are epidemic because lazy loading is now a default in themes, plugins, and frameworks that apply it indiscriminately.

Native lazy loading and the LCP trap

Since every major browser now supports it, the baseline is one attribute:

<img src="/img/review-photo-3.jpg" alt="Sole wear after 400km"
     width="800" height="533" loading="lazy">

With loading="lazy", the browser postpones the fetch until the image approaches the viewport (each browser uses its own distance threshold, typically over a thousand pixels on fast connections, so it fires earlier than people assume). loading="eager" is the default behavior stated explicitly.

Here is the trap: lazy-loaded images are deprioritized in the loading queue and skipped by the preload scanner's early pass. Put loading="lazy" on your hero image, the thing that IS your Largest Contentful Paint, and you have volunteered to slow down your most important metric. This is one of the most common findings in Lighthouse audits, because plugins blanket-apply the attribute to every <img> on the page. The correct pattern is the opposite for the hero:

<img src="/img/hero.jpg" alt="..." width="1600" height="900"
     loading="eager" fetchpriority="high">

Rule of thumb: first image likely to be in the viewport loads eager (with fetchpriority="high" if it's the LCP candidate); everything below the fold loads lazy. Always with width and height so late-loading images don't shove the layout around and bill you in CLS.

Implementation approaches compared

If you're on native lazy loading in 2026 you've probably already won; the residual risk lives in old themes and JS-framework image components with custom loaders. The related check on deferring offscreen images covers the Lighthouse side of the same coin.

Lazy loading content, not just images

A nastier variant: lazy loading actual content, product grids, comments, article bodies, via scroll-triggered fetches. Googlebot renders pages but does not scroll or click, so content that only exists after a scroll event never enters the index. If a content block matters for ranking, it must be present in the rendered HTML without user interaction. Deferred images inside indexed HTML are fine; deferred HTML is a visibility hole.

How to check it on your own site

1. Find the LCP element first. DevTools → Performance panel → run a trace → click the LCP marker. Now check that specific element's markup: if it carries loading="lazy" or a data-src placeholder, you've found the finding.
2. Audit attribute usage at scale. Screaming Frog custom extraction (XPath //img[@loading='lazy']/@src) across templates, you're looking for lazy attributes on first-viewport images and for <img> tags with data-src but empty/placeholder src.
3. Watch the Network panel while scrolling. Filter to Img, load the page, then scroll: images should stream in ahead of the viewport. Images loading only after they're visible (visible pop-in) means the trigger margin is too tight.
4. Check what Google renders. URL Inspection → Test Live URL → View Rendered HTML: search for a below-the-fold image's real filename. If only a placeholder pixel is in the rendered source, that image is not getting indexed.
5. Confirm images are indexed. Spot-check image search for site:yoursite.com plus a distinctive image topic; systematic absence of below-fold images points at a broken swap mechanism.

Common mistakes

• Lazy-loading the LCP image. The classic. A plugin adds loading="lazy" to everything, LCP degrades several hundred ms, nobody connects the two. Fix: exempt the first viewport image; add fetchpriority="high" to the true LCP candidate.
• Placeholder src with no fallback. A 1×1 gray pixel in src, the real URL in data-src, and no <noscript>. When the swap script fails, or a crawler doesn't run it, the page's images are gray pixels. Fix: native attribute, or noscript fallbacks on every swapped image.
• Missing width/height on lazy images. Every late image reflows the page, a self-inflicted CLS generator. Fix: explicit dimensions or CSS aspect-ratio on all of them.
• Scroll-event triggers. Content or images gated on scroll listeners that Googlebot never fires. Fix: IntersectionObserver with a generous rootMargin, or better, the native attribute.
• Lazy-loading a handful of tiny icons. Deferring 2KB SVGs adds orchestration for zero benefit. Fix: lazy loading pays off on heavy media; leave trivial assets alone.

FAQ