Lazy Loading Explained: How, When, and When Not to Use It

Just lazy-load everything is popular advice that's actively wrong. Lazy-loading the right things is a performance superpower. Lazy-loading the wrong ones — especially the LCP image — tanks the metrics you're trying to improve.

This is the practical guide to lazy loading in 2026. What it is, how modern browsers implement it natively, when to use it, when to explicitly avoid it, and how to think about it beyond just images.

1. What lazy loading actually is

Lazy loading defers the loading of an asset (image, iframe, script) until it's about to enter the viewport. The browser doesn't fetch it during initial page load, which means less initial page weight, faster first render, and lower data usage on mobile.

The technique existed for years using JavaScript (IntersectionObserver). Since 2020, browsers support it natively via a single HTML attribute:

<img src="image.jpg" alt="…" loading="lazy" />
<iframe src="video.html" loading="lazy"></iframe>

2. When to use lazy loading

• Below-the-fold images — the ones that only appear after scrolling.
• Embedded iframes — especially YouTube/Vimeo players, maps, third-party widgets.
• Off-screen sections — heavy components in tabs or accordions users may never open.
• Non-critical scripts — chat widgets, analytics beacons, review widgets.

3. When NOT to lazy-load

The single most important rule: never lazy-load your LCP image. The Largest Contentful Paint element is what Google measures for page speed. Lazy-loading it adds delay to the exact metric you want to minimise.

For the hero image: use loading="eager" (default) plus fetchpriority="high" to signal the browser to prioritise it. In Next.js, add priority to the <Image> component.

4. Native vs IntersectionObserver

5. Lazy-loading iframes (YouTube, maps)

Embedded YouTube and Google Maps iframes are massive — each adds 500 KB to 2 MB of JS just to sit there. Native loading="lazy" handles them well:

<iframe
  src="https://www.youtube.com/embed/…"
  loading="lazy"
  title="Video demo"
></iframe>

For heavier savings, use a facade pattern: show a lightweight thumbnail with a play button, only load the full iframe when clicked. Libraries like lite-youtube-embed do this in under 2 KB.

6. Lazy-loading scripts

Third-party scripts (chat, analytics, review widgets) rarely need to load immediately. Delaying them until after main content renders is a huge INP and TBT win.

• Next.js `next/script` with strategy="lazyOnload" — waits until after page load.
• Load on user interaction — most chat widgets support delayed init: only boot when the user shows intent (scrolls near the widget, or after N seconds).
• Partytown — moves heavy third-party scripts to a Web Worker, off the main thread entirely.

7. Testing your lazy loading

Chrome DevTools → Network tab → filter Images. Reload the page. You should see only above-the-fold images load initially. Scroll — below-the-fold ones should start loading as they approach the viewport.

Also run Lighthouse — it explicitly flags images that should be lazy-loaded, and images that were lazy-loaded but shouldn't have been (LCP).

The bottom line

Lazy loading is a scalpel, not a hammer. Native loading="lazy" on below-the-fold images and iframes gets you 90% of the wins with zero JS. Don't lazy-load the hero. Don't lazy-load anything critical to first paint. Read website speed optimisation for the wider performance picture.