Lazy Loading Strategy

Last updated:

Defer below-the-fold images, media, and optional scripts — without delaying LCP or primary interaction.

01 — Purpose

Load what matters, when it matters

Lazy loading defers below-the-fold images, heavy media, and optional scripts — when applied to the right candidates, not the LCP hero.

Not every asset belongs in the first payload. Deferral speeds initial render — but lazy-loading the wrong target hurts Core Web Vitals and usability.

See image delivery and performance standard.

02 — Principles

Need-based loading

Lazy loading should improve experience — not delay important content.

  • below-the-fold images and gallery content — not the LCP image
  • videos, secondary blocks, and optional widgets
  • route-level or tab-level JavaScript via dynamic import

03 — Images

Native lazy loading done right

Native lazy loading, reserved dimensions, and fetchpriority for the hero.

  • set width and height — or aspect-ratio — before load completes
  • eager-load LCP image — fetchpriority="high", no lazy attribute
  • pair with srcset and sizes — see image delivery
<img
  src="hero.webp"
  alt="Product overview"
  width="1200"
  height="630"
  fetchpriority="high"
>

<img
  src="gallery-3.webp"
  alt="Detail view"
  width="800"
  height="600"
  loading="lazy"
>

04 — Avoid

Lazy loading mistakes

Deferring the wrong things hurts LCP, CLS, and primary interaction.

  • lazy loading critical content — hero, primary CTA, checkout script
  • layout instability — content pops in without reserved dimensions
  • waterfall of tiny lazy chunks — balance splitting with request overhead

05 — Close

Defer with intent

Map the critical path first — everything else is a candidate.

Verify with LCP and field data that you did not defer something users need immediately.

See JavaScript cost and Core Web Vitals.