LCP lazily loaded high
Largest Contentful Paint image was lazily loaded
loading="lazy" on the hero image de-prioritizes its fetch, so the browser downloads it late and LCP suffers.
What you see
Largest Contentful Paint image was lazily loaded LCP element: <img loading="lazy" src="/hero.jpg">
What’s actually happening
Lighthouse passes most metrics but flags 'Largest Contentful Paint image was lazily loaded' and your LCP sits above 2.5s. The hero image is the LCP element, yet it has `loading="lazy"` on it — usually because a blanket lazy-load rule or a CMS/plugin default got applied to every image, including the one above the fold. The browser holds the fetch until layout proves the image is near the viewport, which costs you exactly the time you can't afford on the most important pixel.
Common causes
- A site-wide `loading="lazy"` applied to all <img> tags, including the hero
- A CMS, theme, or image plugin (WordPress, etc.) that lazy-loads by default with no above-the-fold exception
- A lazy-load JS library (lozad, lazysizes) intercepting the hero image
- React/JS component that mounts the hero after first render, deferring its fetch
- The LCP element being a CSS `background-image` that the browser can't discover early
How to fix it
- Remove lazy-loading from the LCP elementTake `loading="lazy"` off the hero <img> (set it to `eager` or omit it). The LCP image must be discoverable and fetchable in the first pass — lazy-loading is for below-the-fold images only.
- Add fetchpriority="high"Put `fetchpriority="high"` on the hero <img> so the browser bumps it ahead of other images and non-critical resources. This is the single most effective attribute for pulling LCP forward.
- Preload the LCP imageAdd `<link rel="preload" as="image" href="/hero.jpg" fetchpriority="high">` in the <head> (use `imagesrcset`/`imagesizes` for responsive images) so the fetch starts before the parser even reaches the <img> tag.
- Fix the source of the blanket ruleIn WordPress, exclude the first/hero image from lazy-loading (many themes and plugins have a 'skip first N images' setting, or use the `wp_omit_loading_attr_threshold` filter). For JS lazy-loaders, exclude the hero by class so the library leaves it alone.
- Avoid CSS background-images for the LCP elementIf the hero is a `background-image`, the preload scanner can't find it early. Switch to a real <img> (or add an explicit preload) so it's discoverable in the initial HTML.
Stop it recurring
Lazy-load only below-the-fold images; keep the above-the-fold hero eager with fetchpriority="high" and a preload hint.
Related errors