en
/login
Koval SEO

A likely main image is lazy-loaded

lcp_image_lazy_loaded · Review item

Short answer

This appears when the first image in the page's main region with no more than 200 visible words before it, skipping only images whose declared width and height show that they are narrower than 600 or shorter than 300, is lazy-loaded. An image that declares a width of at least 600, a height of at least 300, a source and loading="lazy" is a review item with medium confidence, even if it also carries a script-loader marker; it is a review item with low confidence when it has loading="lazy" but no declared size or no source, or when its source is missing, blank or a data: placeholder and the image or its <picture> carries a lazy-loading marker such as data-src or the class lazy, because the script that would load it is not run. If that image is the first large image people see, give it its real source in the HTML and remove the lazy loading. The check reads HTML declarations only and does not measure the page's real Largest Contentful Paint.

Severity: Medium. A static guess about which image loads first, not a measurement of how the page paints.

Why it matters

web.dev's guide to optimising Largest Contentful Paint advises against lazy-loading the image that becomes the largest element in the first view, because lazy loading delays the start of its download.

What to do

  1. Open the finding: it shows the image's position in the main HTML, its declared size, source and loading value, and how many visible words come before it. A review item with low confidence also cites the original opening tag of the image, and of its <picture> if it has one, when they could be read in full, and the lazy-loading markers found.
  2. Check in a browser whether this image is the first large image people see when the page opens.
  3. If it is, remove loading="lazy" or set loading="eager". If a script loads it, put the real image address in src in the HTML and remove the lazy-loading markers, such as data-src or the class lazy, so that the image does not wait for the script. fetchpriority="high" on its own does not cancel a lazy declaration.

When to leave it as it is: If the reported image is not in the first view of the page, for example because another large element appears first, you can leave it.

What we read

We read the original HTML of indexable pages that returned 200 and have one unique explicit main region (a main element, role="main" or an article). Nothing is fetched or rendered: image files and their real sizes are not read. A page that otherwise depends on client-side rendering is not checked. A page whose only script dependency is lazy-loaded images, with enough readable text in its original HTML, is checked from that static HTML, and a reported or passed result for it says so.

We consider <img> elements in source order and skip only those whose declared whole-number width and height show that they are narrower than 600 or shorter than 300. The first remaining image with no more than 200 known-visible words of the main region before it is the candidate; if its size or visibility cannot be read, a later image with a declared large size is not judged in its place. Content hidden with hidden, inert or an inline style does not count; external CSS is not measured. Navigation, aside, footer and form content is skipped; a header within the main region is read.

The candidate is reported with medium confidence when it declares a whole-number width of at least 600 and height of at least 300, a non-empty src and loading="lazy", even if it also carries a script-loader marker such as data-src. It is reported with low confidence when it declares loading="lazy" but its size is not declared or its src is missing or blank, or when its src is missing, blank or a data: URI and the <img> or its parent <picture> carries data-src, data-srcset, data-lazy-src, data-lazy-srcset, data-original, data-hi-res-src, data-url or the class token lazy. Both need a valid loading value, a visible image and a proven position: no more than 200 visible words before it, all of which can be split into words. Other class names such as lazyload, other data-* names and a data: source without one of those markers do not by themselves make an image a review item. An eager or missing loading value on a fully readable candidate without a script-loader marker passes; outside the two reporting cases above, a fully readable candidate with eager or missing loading and such a marker, for example a real src beside data-src or a data: source without a lazy-loading marker, is marked as not checked. When the candidate cannot be fully read and is not lazy in those ways, the page passes only if every image within the first 200 visible words that is not declared too small, the candidate included, is read in the original HTML with no lazy-loading signal: no loading value other than eager, no script-loader marker and no missing or placeholder source. Otherwise, or when text before that point cannot be split into words, the page is marked as not checked. <picture> sources and srcset are recorded as declarations; which file a browser would choose is not predicted.

Example & evidence

Illustrative example — schematic HTML, not a live audit.

<img src="/hero.jpg" width="1200" height="600" loading="lazy" alt="Fresh bread">

The first large image declares lazy loading, so the page is reported.

<img src="/hero.jpg" width="1200" height="600" alt="Fresh bread">

A possible correction: load that image without lazy loading.

Confirm & check again

Check for yourself: open the page in a browser and check whether the reported image is the first large image you see; the Performance panel in Chrome's developer tools shows which element was the Largest Contentful Paint.

Check again: Full audit — run a new full audit of the site. The finding closes when the same page is read completely again, still qualifies, and its first image near the top of the main content passes: a fully read candidate that is not lazy-loaded and has no script-loader marker, or a candidate that cannot be fully read while every image near the top of the main content is read in the original HTML with no lazy-loading signal; this need not be the same image file. For an image loaded by a script, that means a real src in the HTML and no lazy-loading marker. A page with no qualifying image near the top, an image that is still lazy-loaded or still carries a script-loader marker, or a page that can no longer be read completely does not prove a fix, and the earlier finding is kept.

Limits & sources

The 600 × 300 size and the 200-word position are fixed rules of this check, not browser viewport or LCP thresholds. Real Largest Contentful Paint, the viewport and painting are not measured, and changing the declaration does not by itself prove a faster page.

Only signals in the original HTML are read. Scripts are not run, so for a review item about a script-lazy placeholder, lazy loading is inferred from that placeholder source and its markers, and when or whether a browser loads the real image cannot be proved; scripts that insert or replace images in other ways, CSS background images and the image a browser actually paints first are not evaluated. A pass with a candidate that cannot be fully read means only that no lazy-loading signal was found near the top of the main content; it does not identify the main image.

Confidence: Medium because declared HTML sizes and word positions only suggest which image appears first, and a browser may paint a different element first; an image of unknown size or without a source, or one whose lazy loading is inferred from the markers of a script that is not run, is marked with low confidence.

Sources

  • web.dev, Optimize Largest Contentful Paint — advises that the LCP image should not be lazy-loaded, because lazy loading delays the start of its download. Checked 7 October 2026.

Editorial review: 2 November 2026