Lazy-loaded LCP image: why it delays Core Web Vitals

What it means

The first significant <img> in the page body — the image most likely to be the Largest Contentful Paint candidate — carries loading="lazy". Lazy loading defers the fetch until the image is near the viewport, which on an above-fold image adds delay that pushes back LCP.

Why it matters

LCP is one of the three Core Web Vitals in Google's page-experience signals, and Google's image documentation states explicitly that the LCP image should never be lazy-loaded. loading="lazy" hides the image from the browser's preload scanner, so its fetch is held until layout completes — a gap of hundreds of milliseconds on typical connections. The correct pattern for an LCP image is the opposite: fetchpriority="high".

How to fix it

1. Identify the hero / above-fold image flagged here.
2. Remove the loading="lazy" attribute from that element.
3. Add fetchpriority="high" to signal render priority instead.
4. Apply loading="lazy" only to images genuinely below the fold (typically the third content image and beyond).

When it's not a problem

Crawlinx uses a positional heuristic: the first <img> outside <nav>, <footer> and <aside>. On pages where that image is decorative and the true LCP is a CSS background, a video poster, or text, this is a false positive — review the flagged element against your layout. If a CMS injects loading="lazy" globally, the fix is a targeted exclusion for the first content image, not disabling lazy loading site-wide.

How common is it?

2422 audited sites in our corpus currently show this issue. The breakdowns below show which platforms, gatekeepers, verticals and countries are most exposed.