Shopify 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 89.4% of Shopify sites, the browser finds the LCP element straight in the HTML. 9.5% hide it in a CSS stylesheet, 0.4% declare it with <link rel="preload">, and 0.6% inject it with JavaScript. Sites with the LCP element in HTML have a good LCP on 96% of sites (1.3s median), against 93% for CSS discovery (1.5s) and 89% for JavaScript discovery (1.7s). Preloading cuts median resource load delay to 680 ms, the lowest of any discovery path.
LCP pass rate
Sites with HTML discovery have a good LCP on 96% of Shopify sites, <link rel="preload"> at 81%, CSS discovery at 93%, and JavaScript discovery at 89%. Why does <link rel="preload"> (81%) trail plain HTML discovery (96%) 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 93% to 81%.
LCP resource discovery usage
On Shopify, 89.4% of sites put their LCP element in the initial HTML markup. 9.5% (747 sites) put the LCP image inside a CSS background-image rule. Explicit <link rel="preload"> tags appear on 0.4% of Shopify sites (32 sites), JavaScript injection on 0.6% (45 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 680 ms, HTML discovery after 574 ms, CSS discovery after 809 ms, JavaScript discovery after 712 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 235 ms of load delay over HTML discovery.
LCP discovery path by element type
More than half of all <link rel="preload"> sites (7 of 32) preload a CSS background-image rather than an <img> tag. Preloading cuts the background image's field load delay from 809 ms to 688 ms. That lifts LCP from 93% to 100%. Among standard <img> LCP elements, HTML discovery covers 6,008 sites (96% good, 574 ms load delay), <link rel="preload"> covers 20 sites (75% good, 563 ms delay), and JavaScript injection covers 32 sites (88% good, 794 ms delay).
| Discovery path | <img> element | CSS background-image | Text block | <video> element |
|---|---|---|---|---|
| HTML document | 96% 6,008 sites | few sites | 97% 685 sites | 96% 349 sites |
| CSS background-image | few sites | 93% 747 sites | few sites | few sites |
| <link rel="preload"> | 75% 20 sites | few sites | few sites | few sites |
| JavaScript injection | 88% 32 sites | few sites | few sites | few sites |
LCP resource discovery per framework
jQuery discovers the LCP element in HTML on 80% of its sites and in CSS on 19%, and 94% of jQuery sites have a good LCP. Vue discovers the LCP element in HTML on 89% of its sites and in CSS on 10%, and 95% of Vue sites have a good LCP.
Vue 892 sitesHTML document 89%95%
jQuery 3,031 sitesHTML document 80%CSS background-image 19%94%LCP discovery path or the framework
Does the framework explain the discovery gap?
On jQuery, 94% of sites with HTML discovery have a good LCP, against 92% of jQuery 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 574 ms median load delay. When the image sits in an external stylesheet as a background-image, load delay jumps to 809 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 809 ms to 688 ms.
Understanding LCP resource discovery
Render your hero banner with Liquid's image_tag filter (image_url | image_tag: preload: true, fetchpriority: 'high') instead of a section CSS background-image or a JavaScript slider. On Shopify, 89.4% of stores discover their LCP in the HTML (96% good LCP) and 0.4% use <link rel="preload"> (81% good LCP), while stores that hide the hero in CSS drop to 93% good LCP (809 ms median load delay).
By Arjen Karel · 8,246 crawled Shopify sites (8,062 with all devices Chrome field data, 7,873 sites with LCP resource discovery, October 2026). How we measured.