Skip to content

How to lazy-load offscreen images

Speed1 min readFixes check lazy-loading

Images below the fold do not need to load before the page is usable. One attribute defers them — but never lazy-load the hero.

Step by step, with screenshots: Image optimisation plugins compared honestly →

Check your own site

Runs this check and the other 186, free, in about 45 seconds.

What a passing site looks like

  • Offscreen images are lazy-loadedwarning · −4 ptseffort S

Offscreen image loading

Why it matters. Images far below the fold compete for bandwidth with the ones visitors see first. Lazy loading defers them until they scroll into view.

How to fix it.
  1. Add loading="lazy" to images below the fold — but never to the hero/LCP image.
  2. WordPress adds it by default since 5.5; check your theme or slider has not removed it.

Filed under Speed & Core Web Vitals. Copy is generated from the same catalogue that scores every report, so what you read here is what the report says.