Lazy-loading 40 images cut load weight by 2.6 MB

Lazy-loading 40 images cut load weight by 2.6 MB

Lazy loading means an image only downloads when you scroll near it. Think of it like a buffet that refills a tray only when you reach for it, instead of cooking everything at once.

A long product listing loaded all 50 images at startup, even the 40 below the fold nobody saw yet. That's 2.6 MB downloaded before the page was usable, dragging LCP to 3.8s.

The fix was one attribute per image:

— Added loading="lazy" to every image below the fold.
— Left the top hero image alone (lazy-loading it would hurt LCP).

Result: initial load dropped 2.6 MB and LCP fell to 2.2s.

Try this: check your image tags. If off-screen images lack loading="lazy", you're making visitors download things they may never see.