Lazy loading delays the download of off-screen resources until the user scrolls near them. The native HTML approach uses the loading="lazy" attribute on <img> and <iframe> elements and is supported in all modern browsers. JavaScript code can be lazy-loaded with dynamic import() and route-level code splitting, and observers built on IntersectionObserver can defer almost any other resource the page does not need on first paint.
Why it matters
Images and embedded media are usually the heaviest assets on a page. Loading them all up front wastes bandwidth on content the user may never see and competes with the network requests that actually drive LCP. On mobile and slow connections this directly translates into higher bounce rates and worse Core Web Vitals scores.
How to use it
- Add
loading="lazy"to all images and iframes that sit below the fold. - Never lazy-load the hero or LCP image — that delay shows up directly in LCP. Use
fetchpriority="high"on the hero instead. - Set explicit
widthandheightattributes on every image to reserve layout space and prevent CLS. - For single-page apps, split route bundles so non-visited routes do not ship on first load.
- Verify the change in Lighthouse under the "Defer offscreen images" audit, then check real-user lab data over time.