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 67% for CSS discovery (2.0s) and 82% for JavaScript discovery (1.9s). Preloading cuts median resource load delay to 207 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 75%, CSS discovery at 67%, and JavaScript discovery at 82%. Why does <link rel="preload"> (75%) 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 67% 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 207 ms, HTML discovery after 437 ms, CSS discovery after 444 ms, JavaScript discovery after 327 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 7 ms of load delay over HTML discovery.
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 444 ms to 206 ms. That lifts LCP from 67% to 70%. Among standard <img> LCP elements, HTML discovery covers 5,573 sites (88% good, 438 ms load delay), <link rel="preload"> covers 79 sites (79% good, 199 ms delay), and JavaScript injection covers 35 sites (81% good, 327 ms delay).
| Discovery path | <img> element | CSS background-image | Text block | <video> element |
|---|---|---|---|---|
| HTML document | 88% 5,573 sites | few sites | 86% 2,128 sites | 82% 190 sites |
| CSS background-image | few sites | 67% 1,287 sites | few sites | few sites |
| <link rel="preload"> | 79% 79 sites | 70% 83 sites | few sites | few sites |
| JavaScript injection | 81% 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 63% of WordPress sites have a good LCP.
Wix 5,791 sitesHTML document 99%94%
WordPress 2,219 sitesHTML document 56%CSS background-image 37%63%LCP discovery path or the platform
Does the platform explain the discovery gap?
On WordPress, 65% of sites with HTML discovery have a good LCP, against 58% 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 437 ms median load delay. When the image sits in an external stylesheet as a background-image, load delay jumps to 444 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 444 ms to 206 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 7 ms of resource load delay and drops good LCP from 88% to 67%. 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 (5,488 with phone Chrome field data, 9,390 sites with LCP resource discovery, October 2026). How we measured.