LCP resource discovery on React sites
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 84.0% of React sites, the browser finds the LCP element straight in the HTML. 13.7% hide it in a CSS stylesheet, 1.8% declare it with <link rel="preload">, and 0.4% inject it with JavaScript. Sites with the LCP element in HTML have a good LCP on 88% of sites (1.3s median), against 66% for CSS discovery (2.0s) and 74% for JavaScript discovery (2.0s). Preloading cuts median resource load delay to 217 ms, the lowest of any discovery path.
LCP pass rate
Sites with HTML discovery have a good LCP on 88% of React sites, <link rel="preload"> at 74%, CSS discovery at 66%, and JavaScript discovery at 74%. Why does <link rel="preload"> (74%) trail plain HTML discovery (88%) 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 66% to 74%.
LCP resource discovery usage
On React, 84.0% of sites put their LCP element in the initial HTML markup. 13.7% (1,287 sites) put the LCP image inside a CSS background-image rule. Explicit <link rel="preload"> tags appear on 1.8% of React sites (168 sites), JavaScript injection on 0.4% (39 sites), and HTTP Link headers on 0.1% (5 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 217 ms, HTML discovery after 445 ms, CSS discovery after 434 ms, JavaScript discovery after 514 ms.
LCP discovery path by element type
More than half of all <link rel="preload"> sites (83 of 168) preload a CSS background-image rather than an <img> tag. Preloading cuts the background image's field load delay from 434 ms to 221 ms. Those sites score 66% on LCP against 66% without preload. Among standard <img> LCP elements, HTML discovery covers 5,573 sites (89% good, 447 ms load delay), <link rel="preload"> covers 79 sites (82% good, 216 ms delay), and JavaScript injection covers 35 sites (74% good, 500 ms delay).
| Discovery path | <img> element | CSS background-image | Text block | <video> element |
|---|---|---|---|---|
| HTML document | 89% 5,573 sites | few sites | 87% 2,128 sites | 82% 190 sites |
| CSS background-image | few sites | 66% 1,287 sites | few sites | few sites |
| <link rel="preload"> | 82% 79 sites | 66% 83 sites | few sites | few sites |
| JavaScript injection | 74% 35 sites | few sites | few sites | few sites |
| HTTP Link header | few sites | few sites | few sites | few sites |
LCP resource discovery per platform
Wix discovers the LCP element in HTML on 99% of its sites and in CSS on 1%, and 94% of Wix sites have a good LCP. WordPress discovers the LCP element in HTML on 56% of its sites and in CSS on 37%, and 61% of WordPress sites have a good LCP.
Wix 5,791 sitesHTML document 99%94%
WordPress 2,219 sitesHTML document 56%CSS background-image 37%61%LCP discovery path or the platform
Does the platform explain the discovery gap?
On WordPress, 67% of sites that preload their LCP resource have a good LCP, compared with 64% for HTML discovery and 55% for CSS discovery. Within WordPress, keeping the LCP element in HTML instead of CSS lifts the pass rate by 9 percentage points.
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 445 ms median load delay. When the image sits in an external stylesheet as a background-image, load delay jumps to 434 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 434 ms to 221 ms.
Understanding LCP resource discovery
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, 13.7% of sites put their LCP image in CSS, which adds 11 ms of resource load delay and drops good LCP from 88% to 66%. 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.
By Arjen Karel · 9,570 crawled React sites (9,110 with all devices Chrome field data, 9,390 sites with LCP resource discovery, October 2026). How we measured.