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 82% of sites (1.5s median), against 65% for CSS discovery (1.9s) and 100% for JavaScript discovery (1.2s). Preloading cuts median resource load delay to 235 ms, the lowest of any discovery path.
LCP pass rate
Sites with HTML discovery have a good LCP on 82% of React sites, <link rel="preload"> at 75%, CSS discovery at 65%, and JavaScript discovery at 100%. Why does <link rel="preload"> (75%) trail plain HTML discovery (82%) 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 65% to 75%.
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 235 ms, HTML discovery after 442 ms, CSS discovery after 396 ms, JavaScript discovery after 518 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 396 ms to 230 ms. That lifts LCP from 65% to 70%. Among standard <img> LCP elements, HTML discovery covers 5,573 sites (84% good, 424 ms load delay), <link rel="preload"> covers 79 sites (78% good, 233 ms delay), and JavaScript injection covers 35 sites (100% good, 518 ms delay).
| Discovery path | <img> element | CSS background-image | Text block | <video> element |
|---|---|---|---|---|
| HTML document | 84% 5,573 sites | few sites | 78% 2,128 sites | 80% 190 sites |
| CSS background-image | few sites | 65% 1,287 sites | few sites | few sites |
| <link rel="preload"> | 78% 79 sites | 70% 83 sites | few sites | few sites |
| JavaScript injection | 100% 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 92% 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 66% of WordPress sites have a good LCP.
Wix 5,791 sitesHTML document 99%92%
WordPress 2,219 sitesHTML document 56%CSS background-image 37%66%LCP discovery path or the platform
Does the platform explain the discovery gap?
On WordPress, 69% of sites with HTML discovery have a good LCP, against 59% of WordPress sites whose LCP image sits in CSS.
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 442 ms median load delay. When the image sits in an external stylesheet as a background-image, load delay jumps to 396 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 396 ms to 230 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 46 ms of resource load delay and drops good LCP from 82% to 65%. 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 (1,979 with desktop Chrome field data, 9,390 sites with LCP resource discovery, October 2026). How we measured.