<b>The lazy-loading mistake that hurts LCP</b>

<b>The lazy-loading mistake that hurts LCP</b>

Lazy loading — telling images to load only when scrolled near — is great for performance. But there's a classic trap: people add <code>loading="lazy"</code> to <i>every</i> image, including the big one at the top. That one is your LCP — Largest Contentful Paint — and lazy-loading it means the browser deliberately delays your most important pixel.

Think of it like telling the guest of honor to wait outside until the party's already started.

The rule of thumb:
— Images <b>below</b> the fold: <code>loading="lazy"</code> — saves bandwidth, great
— Images visible <b>on first screen</b> (especially the hero): never lazy-load — let it load eagerly
— Bonus: add <code>fetchpriority="high"</code> to the hero so it jumps the queue

<b>Try this:</b> Open your page source and check your hero image. If it says <code>lazy</code>, remove it. That single deletion often shaves real time off LCP.