The mistake: lazy-loading your biggest image

The mistake: lazy-loading your biggest image

A common slip is adding loading="lazy" to every image on the page. It feels tidy, but it backfires on your hero image. LCP — Largest Contentful Paint — measures when your biggest visible element finishes loading. If that hero is lazy-loaded, the browser waits before fetching it, and your LCP gets slower.

Think of it like telling your fastest runner to wait at the back of the line.

How to fix it:
— Find your LCP element in PageSpeed Insights (it names it for you).
— If it's an image above the fold, remove loading="lazy" from it.
— Add fetchpriority="high" instead, so it loads first.
— Keep lazy only on images below the fold.

Try this: open your page, look at the very first thing you see, and make sure that image is never lazy-loaded.