Lazy Loading Images

Lazy loading reduces unnecessary image downloads — users should load imagery progressively without layout shifts.

01 — Purpose

Load images when they matter

Lazy loading reduces unnecessary image downloads — users should load imagery progressively.

Images dominate page weight. Loading every asset upfront slows LCP and wastes bandwidth on content users never scroll to. Native lazy loading makes deferral cheap — when applied to the right images.

See image delivery and lazy loading strategy for the broader deferral picture.

02 — Principles

Image loading should support perceived performance

Lazy load below the fold; prioritise what users see first.

  • lazy load below-the-fold imagery — defer until near the viewport
  • preserve layout dimensions — width and height to prevent CLS
  • prioritise important imagery — LCP candidate loads eagerly

03 — Practice

Good lazy loading for images

Native lazy loading, responsive sources, and reserved space.

  • use loading="lazy" on below-the-fold img elements
  • set width and height — or aspect-ratio CSS — before load completes
  • eager-load LCP image — often hero with fetchpriority="high" and no lazy attribute
  • pair with srcset and sizes — see image delivery
  • use modern formats — AVIF or WebP with fallbacks where needed 
<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

Wrong lazy targets hurt LCP and cause layout jumps.

  • lazy loading above-the-fold content — especially the LCP image
  • layout shifts — images without dimensions popping in
  • hidden loading behaviour — blank boxes with no placeholder or skeleton
  • lazy loading every image including icons and logos in header
  • lazy + low-quality placeholder that never upgrades visibly

05 — Close

Verify LCP after lazy changes

Lazy loading is a win when field LCP and CLS improve — not when lab scores alone green.

After enabling lazy load, check LCP element in DevTools and field data. The hero must still load fast; gallery images can wait.

See Core Web Vitals, image delivery, and performance review checklist.