Lazy Loading
Deferring the loading of below-fold images and content until the user scrolls to them.
Lazy loading defers fetching an image or iframe until it is close to being scrolled into view, so the initial page load carries only what is visible. In modern browsers it is the loading="lazy" attribute. Never lazy-load the largest image above the fold: it delays the very element Largest Contentful Paint measures.
Definition
Lazy loading is a technique that defers loading of non-critical resources (images, iframes, scripts) until they are needed — typically when they enter the viewport as the user scrolls. Native lazy loading uses the loading="lazy" attribute on images and iframes.
Why It Matters
Lazy loading reduces initial page load time and data consumption. A page with 50 images that lazy loads only shows the first 3-5 initially, cutting initial payload by 80-90%. This directly improves LCP and overall page speed.
Example
<img src="product.webp" loading="lazy" alt="Red Nike Air Max" width="600" height="400" />Important: never lazy load above-the-fold images — the hero/LCP image should load immediately with fetchpriority="high".
Related Terms
Related Tools
Know the term.
Check your own site.
A free audit tells you whether this is currently costing you score points — and exactly what to change.
Run a free audit