Lazy Loading

Lazy loading defers a non-critical resource or code path until the browser expects it to be needed. Common candidates include off-screen images and iframes, media data, or application features that many visitors never reach. It can reduce requests, transferred bytes, and work during the initial load, but it does not reduce total transfer when the visitor eventually loads every deferred item.

Why it matters: Classify resources by whether they are needed for the initial view or task. Do not lazy-load the likely LCP image or other immediately visible, critical content; delaying discovery can worsen perceived speed and LCP. For suitable images and iframes, prefer the browser's `loading="lazy"` hint and include intrinsic dimensions so space is reserved. Use appropriate media preload controls or Intersection Observer when native behaviour does not cover the use case, with a practical early-loading margin and a fallback. Preserve real source and alternative-text semantics, useful placeholders, and error recovery. Test fast scrolling, in-page links, carousels, slow connections, cached and uncached visits, script failure, and browser support. Measure initial bytes and requests, LCP, layout shift, late-load failures, and whether deferred content is actually used; lazy loading every asset can simply move delay into the visitor's path.