Mobile · NinjaOps Guides

Lazy-Load Images Without Hurting LCP

Lazy-loading saves bandwidth below the fold, but lazy-loading your hero image wrecks Largest Contentful Paint. The rule: above the fold eager, below it lazy.

How to fix it

  1. Add loading="lazy" to below-the-fold images.
  2. Leave the hero/first image eager (or use fetchpriority="high").
  3. Give images explicit width/height so lazy swaps don't reflow.
<img src="chart.png" alt="Review count chart" loading="lazy" width="600" height="400">

Diagnose this exact issue on your site — free

The 100-Point Affiliate Site Grader runs this check (and 40+ more) on your live site in ~10 seconds. No signup.

Want it fixed for you?

The Zero-Overhead Affiliate Playbook walks through every gap in this guide in 14 days on a $0 stack. Join the launch list →

More Mobile fixes: