LCP resource discovery and the Core Web Vitals
HTML markup, CSS background-image, <link rel="preload">, JavaScript, or HTTP Link header: how the browser finds the LCP element and how much load delay each path adds.
On 69.2% of sites, the browser finds the LCP element straight in the HTML. 27.4% hide it in a CSS stylesheet, 2.3% declare it with <link rel="preload">, and 0.8% inject it with JavaScript. Sites with the LCP element in HTML have a good LCP on 84% of sites (1.5s median), against 77% for CSS discovery (1.7s) and 69% for JavaScript discovery (2.0s). Preloading cuts median resource load delay to 219 ms, the lowest of any discovery path.
LCP pass rate
Sites that send a Link: rel=preload HTTP header have a good LCP most often at 96% (almost all of them on Shopify), followed by HTML discovery at 84%, <link rel="preload"> at 80%, CSS discovery at 77%, and JavaScript discovery at 69%. Why does <link rel="preload"> (80%) trail plain HTML discovery (84%) when preload is meant to speed up loading? Because six in ten preload sites use it on a CSS background-image on slower sites. On those background images, preload lifts good LCP from 77% to 80%.
LCP resource discovery usage
Nearly seven in ten sites (69.2%) put their LCP element in the initial HTML markup. More than one in four (27.4%, 53,883 sites) put the LCP image inside a CSS background-image rule. Explicit <link rel="preload"> tags appear on 2.3% of sites (4,567 sites), JavaScript injection on 0.8% (1,521 sites), and HTTP Link headers on 0.2% (438 sites).
LCP phase breakdown by discovery path
How the browser discovers the LCP asset directly sets its resource load delay: <link rel="preload"> starts the download after a median 219 ms, HTML discovery after 297 ms, CSS discovery after 409 ms, JavaScript discovery after 581 ms. When a hero image lives in CSS, Chrome must download and parse the stylesheet and match the selector against the DOM before it sees the image URL. That adds 112 ms of load delay over HTML discovery.
LCP discovery path by element type
More than half of all <link rel="preload"> sites (2,677 of 4,567) preload a CSS background-image rather than an <img> tag. Preloading cuts the background image's field load delay from 409 ms to 219 ms. That lifts LCP from 77% to 79%. Among standard <img> LCP elements, HTML discovery covers 80,044 sites (85% good, 297 ms load delay), <link rel="preload"> covers 1,737 sites (81% good, 213 ms delay), and JavaScript injection covers 1,410 sites (69% good, 579 ms delay).
| Discovery path | <img> element | CSS background-image | Text block | <video> element |
|---|---|---|---|---|
| HTML document | 85% 80,044 sites | few sites | 82% 51,385 sites | 79% 4,566 sites |
| CSS background-image | few sites | 77% 53,883 sites | few sites | few sites |
| <link rel="preload"> | 81% 1,737 sites | 79% 2,677 sites | 89% 70 sites | 93% 83 sites |
| JavaScript injection | 69% 1,410 sites | few sites | few sites | 74% 107 sites |
| HTTP Link header | 84% 48 sites | 99% 382 sites | few sites | few sites |
Understanding LCP resource discovery
How much time early discovery saves
Resource load delay is the gap between Time to First Byte (when the HTML arrives) and the moment the browser starts downloading the LCP resource. When the LCP image is a standard <img> in the HTML, Chrome's preload scanner finds it at a 297 ms median load delay. When the image sits in an external stylesheet as a background-image, load delay jumps to 409 ms. The browser has to download the CSS, build the CSSOM, and match selectors to the DOM before it sees the image URL. A <link rel="preload" as="image"> tag in the <head> lets the preload scanner start the image download alongside the stylesheet. That cuts the CSS background image's load delay from 409 ms to 219 ms.
Put the LCP image in the initial HTML as an <img> (or <picture>) element with fetchpriority="high". Do not hide hero images in CSS background-image rules or render them from client-side JavaScript. Across this dataset, 27.4% of sites put their LCP image in CSS, which adds 112 ms of resource load delay and drops good LCP from 84% to 77%. If a theme or page builder locks the hero into a CSS background-image, add <link rel="preload" as="image" fetchpriority="high"> in the <head> or send a Link: rel=preload HTTP header. The browser can then start downloading the image before the stylesheet arrives.
How LCP resource discovery plays out per platform
What the field data shows when you isolate a single CMS or framework.
WordPress 62,223 sites WordPress sites with an HTML <img> hero pass LCP 7 percentage points more often than sites with CSS background heroes.
Across WordPress sites, 55.3% reference the hero image in initial HTML (72% good LCP, 1.9s median), 39.7% use section background-image styles (65% good LCP, 2.1s median), and sites with <link rel="preload"> pass at 77% good LCP.
Shopify 8,177 stores 89.6% of Shopify stores render their hero banner as a direct HTML image.
Shopify's Liquid image_tag filter outputs standard <img> markup by default. Across Shopify, 89.6% of stores discover the hero image in HTML (96% good LCP, 1.3s median) compared with 9.3% in CSS background images (92% good LCP, 1.5s median).
React & Next.js 9,390 sites React sites with an HTML <img> hero pass LCP 21 percentage points more often than sites with CSS background heroes.
Across React sites, 84.0% include the LCP image in initial HTML (88% good LCP, 1.3s median) compared with 13.7% that reference the hero image in CSS (67% good LCP, 2.0s median).
By Arjen Karel · 210,902 crawled sites (126,761 with phone Chrome field data, 196,430 sites with LCP resource discovery, October 2026). How we measured.