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 97% of sites (1.2s median), against 94% for CSS discovery (1.5s) and 88% for JavaScript discovery (1.7s). Preloading cuts median resource load delay to 752 ms, the lowest of any discovery path.
LCP pass rate
Sites with HTML discovery have a good LCP on 97% of Shopify sites, <link rel="preload"> at 87%, CSS discovery at 94%, and JavaScript discovery at 88%. Why does <link rel="preload"> (87%) trail plain HTML discovery (97%) 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 94% to 87%.
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 752 ms, HTML discovery after 611 ms, CSS discovery after 836 ms, JavaScript discovery after 933 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 225 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 836 ms to 752 ms. That lifts LCP from 94% to 100%. Among standard <img> LCP elements, HTML discovery covers 6,008 sites (97% good, 608 ms load delay), <link rel="preload"> covers 20 sites (77% good, 746 ms delay), and JavaScript injection covers 32 sites (84% good, 933 ms delay).
| Discovery path | <img> element | CSS background-image | Text block | <video> element |
|---|---|---|---|---|
| HTML document | 97% 6,008 sites | few sites | 96% 685 sites | 98% 349 sites |
| CSS background-image | few sites | 94% 747 sites | few sites | few sites |
| <link rel="preload"> | 77% 20 sites | few sites | few sites | few sites |
| JavaScript injection | 84% 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 95% 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 97% of Vue sites have a good LCP.
Vue 892 sitesHTML document 89%97%
jQuery 3,031 sitesHTML document 80%CSS background-image 19%95%LCP discovery path or the framework
Does the framework explain the discovery gap?
On jQuery, 96% of sites with HTML discovery have a good LCP, against 94% 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 611 ms median load delay. When the image sits in an external stylesheet as a background-image, load delay jumps to 836 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 836 ms to 752 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 (97% good LCP) and 0.4% use <link rel="preload"> (87% good LCP), while stores that hide the hero in CSS drop to 94% good LCP (836 ms median load delay).
By Arjen Karel · 8,246 crawled Shopify sites (3,818 with desktop Chrome field data, 7,873 sites with LCP resource discovery, October 2026). How we measured.