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 87% of sites (1.3s median), against 83% for CSS discovery (1.5s) and 77% for JavaScript discovery (1.7s). Preloading cuts median resource load delay to 209 ms, the lowest of any discovery path.
LCP pass rate
Sites with HTML discovery have a good LCP on 87% of sites, <link rel="preload"> at 85%, CSS discovery at 83%, and JavaScript discovery at 77%. Why does <link rel="preload"> (85%) trail plain HTML discovery (87%) 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 83% to 85%.
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 209 ms, HTML discovery after 260 ms, CSS discovery after 316 ms, JavaScript discovery after 434 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 56 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 316 ms to 201 ms. That lifts LCP from 83% to 84%. Among standard <img> LCP elements, HTML discovery covers 80,044 sites (88% good, 263 ms load delay), <link rel="preload"> covers 1,737 sites (84% good, 210 ms delay), and JavaScript injection covers 1,410 sites (76% good, 426 ms delay).
| Discovery path | <img> element | CSS background-image | Text block | <video> element |
|---|---|---|---|---|
| HTML document | 88% 80,044 sites | few sites | 86% 51,385 sites | 87% 4,566 sites |
| CSS background-image | few sites | 83% 53,883 sites | few sites | few sites |
| <link rel="preload"> | 84% 1,737 sites | 84% 2,677 sites | 91% 70 sites | 96% 83 sites |
| JavaScript injection | 76% 1,410 sites | few sites | few sites | 87% 107 sites |
| HTTP Link header | 71% 48 sites | 98% 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 260 ms median load delay. When the image sits in an external stylesheet as a background-image, load delay jumps to 316 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 316 ms to 201 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 56 ms of resource load delay and drops good LCP from 87% to 83%. 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 4 percentage points more often than sites with CSS background heroes.
Across WordPress sites, 55.3% reference the hero image in initial HTML (77% good LCP, 1.7s median), 39.7% use section background-image styles (73% good LCP, 1.8s median), and sites with <link rel="preload"> pass at 79% good LCP.
React & Next.js 9,390 sites React sites with an HTML <img> hero pass LCP 17 percentage points more often than sites with CSS background heroes.
Across React sites, 84.0% include the LCP image in initial HTML (82% good LCP, 1.5s median) compared with 13.7% that reference the hero image in CSS (65% good LCP, 1.9s median).
By Arjen Karel · 210,902 crawled sites (69,745 with desktop Chrome field data, 196,430 sites with LCP resource discovery, October 2026). How we measured.