Lazy loading

`<img loading="lazy">` and `<iframe loading="lazy">` tell the browser to defer the fetch until the element is near the viewport.

The browser decides how near, using a margin that varies with connection speed — it begins fetching earlier on slow connections so the resource arrives in time.

`loading="eager"` is the default and forces an immediate fetch.

Because it is native, it needs no JavaScript, works with the browser's own priority logic, and continues to work when scripts fail.

An image visible on load is needed immediately. Marking it lazy delays its discovery and fetch until layout has determined it is in the viewport, which is later than the parser would have found it.

When that image is the Largest Contentful Paint element, the delay goes directly into the metric, and the result is a page that scores worse than before the optimisation.

Lighthouse reports this specifically, because applying `loading="lazy"` to every image with a global find and replace is such a common mistake.

The correct pattern is eager for what is visible on load, lazy for everything below, and `fetchpriority="high"` on the hero image.

Iframes, particularly video embeds, which are among the heaviest things a page can contain. A facade — a static thumbnail replaced by the real embed on click — is heavier engineering and a larger saving.

JavaScript modules, loaded dynamically when a feature is first used rather than in the initial bundle.

Long lists, through virtualisation, which is lazy loading applied to DOM elements rather than to files.

Web fonts, indirectly, through a display strategy that renders text in a fallback rather than waiting.

Background images set in CSS, which are not covered by the loading attribute and are deferred instead by the browser's own rule that a background is fetched only when an element using it is rendered.

Inspect the images and confirm the attribute is present below the fold and absent above it.

In the network panel, scrolling should trigger new image requests. If everything is fetched on load, the attribute is missing or being overridden.

Check that lazy images still have `width` and `height`, since a deferred image without reserved space is a guaranteed layout shift.

Verify the Largest Contentful Paint element is not lazy — this is the single check worth doing first.

Test on a slow connection profile. The browser widens its loading margin when the connection is slow, and a configuration that looks correct on a fast link may fetch everything at once on a throttled one.