Lazy loading is genuinely good advice that gets applied genuinely badly. The idea: don’t load images the visitor can’t see yet. The common implementation: don’t load images the visitor is currently looking at either. That’s how a performance feature turns a site sluggish — and why your PageSpeed score dropped after you “optimized.”
Lazy loading below the fold is optimization. Lazy loading the hero image is telling the browser to procrastinate on the one thing that matters.
The hero image mistake
Largest Contentful Paint — the Core Web Vitals metric Google weighs heaviest — measures when your biggest visible element finishes rendering. On most sites that’s the hero image. Lazy loading works by telling the browser “this image isn’t urgent, fetch it when you get around to it.” Apply that to the hero and you’ve deprioritized the exact image LCP is timing. The browser dutifully waits, your LCP balloons past 2.5 seconds, and the page feels slower because the main thing visibly pops in late. Google’s own research on lazy-loaded LCP images found this pattern consistently degrading performance across the web.
How it happens without you choosing it
Three common paths. WordPress adds loading="lazy" to images by default — core tries to skip the first images, but themes and builders that render heroes in unusual ways defeat the detection. Optimization plugins often apply JavaScript-based lazy loading to everything, hero included, and JS-based lazy loading is worse than the native kind: the image can’t even start until the script loads and runs. And sliders are the worst case — many load slide one lazily and inject the rest with JavaScript, making your most important visual doubly delayed.
The fix: priority, not just exclusion
The hero image should be the opposite of lazy. Three steps:
1. Remove lazy loading from above-the-fold images
The hero, the logo, anything visible on arrival. In most optimization plugins that’s an exclusion field; in a proper theme it’s handled per-template.
2. Actively prioritize the hero
Add fetchpriority="high" to the hero image and preload it in the head. Now the browser fetches it first instead of merely not-last.
3. Keep lazy loading everywhere else
Gallery grids, footer content, long-page images — that’s where the technique belongs and where it genuinely helps.
Verify the result
Re-run PageSpeed Insights and check the LCP element it reports. If LCP was 4+ seconds with a lazy-loaded hero, this fix alone commonly claws back one to two full seconds. If the score’s still red afterward, the problem has more layers — image weight, render-blocking code, server response — which is the point where a full speed optimization pass earns its fee: it fixes the causes in the right order instead of stacking plugins on symptoms.