Skip to main content

Lazy Load

Lazy loading delays offscreen images until the user scrolls near them. It can reduce initial page weight and improve performance, but the most common mistake is lazy-loading the LCP image or failing to reserve space (causing CLS).

Rules​

  • Do not lazy-load the LCP image.
  • Reserve space for images (width/height or aspect-ratio).
  • Prefer native lazy loading (loading="lazy") when possible.

Native Lazy Loading​

native-lazy-load.html
<img
  src="/uploads/example.webp"
  width="800"
  height="600"
  alt="Example"
  loading="lazy"
  decoding="async"
/>

Excluding the LCP Image​

If your optimization plugin applies lazy loading globally, ensure the hero/LCP image is excluded.

Signals that the LCP image was lazy-loaded:

  • PSI/Lighthouse flags "Largest Contentful Paint image was lazily loaded".
  • The hero image request starts late in the waterfall.

Placeholders and CLS​

Placeholders are not a replacement for dimensions. Use placeholders only for perceived smoothness.

  • Dimensions prevent layout shift.
  • Placeholders make loading feel less jarring.

What's Next​