Shopify LCP priority hints and the Core Web Vitals
fetchpriority="high", <link rel="preload">, <link rel="preconnect">, or no hint at all: how priority hints cut LCP resource load delay (729 ms with preload vs 624 ms with no hint) and move Largest Contentful Paint.
69.9% of Shopify sites have no LCP priority hints. Of the 30.1% that do, 92% use fetchpriority="high", and 96% of those sites have a good LCP, against 95% of all Shopify sites.
LCP pass rate
Sites with fetchpriority="high" LCP priority hints have a good LCP most often: 96%, against 95% of all Shopify sites. Sites with <link rel="preconnect"> priority hints have it least often, at 91%.
LCP priority hints usage
30.1% of Shopify sites use LCP priority hints, and nine in ten of those use fetchpriority="high".
Where priority hints save time: the four LCP phases
Across the four LCP sub-parts in Chrome's field data, the largest gap between fetchpriority="high" and no sits in resource load delay: 522 ms median for fetchpriority="high" against 624 ms for no. Overall median field LCP is 1.3s for fetchpriority="high" (TTFB 400 ms, load delay 522 ms, load duration 204 ms, render delay 300 ms) versus 1.4s for no.
LCP priority hints combined with the loading attribute
Combining fetchpriority="high" with Auto reaches 98% good LCP across 825 sites (498 ms median load delay). At the other end, fetchpriority="high" paired with Eager sits at 94% across 682 sites (559 ms median load delay).
| Priority hint | No loading attribute (auto) | loading="lazy" | loading="eager" |
|---|---|---|---|
| No priority hint | 94% 1,476 sites | 96% 1,850 sites | 94% 486 sites |
| fetchpriority="high" | 98% 1,261 sites | 100% 21 sites | 94% 889 sites |
| <link rel="preload"> | few sites | few sites | few sites |
| <link rel="preconnect"> | 83% 48 sites | 100% 21 sites | few sites |
LCP priority hints per framework
On jQuery, 82% of sites use no LCP priority hints, and 93% of jQuery sites have a good LCP, against 95% of all sites. On Vue, 70% of sites use no, and 94% of Vue sites have a good LCP.
Vue 892 sitesNo priority hint 70%fetchpriority="high" 28%94%
jQuery 3,031 sitesNo priority hint 82%fetchpriority="high" 14%93%LCP priority hints or the framework
Does the framework explain the LCP priority hints difference?
On jQuery, 93% of sites with fetchpriority="high" LCP priority hints have a good LCP, against 93% of jQuery sites with no. Within jQuery, sites with fetchpriority="high" and no have a good LCP about equally often. On Vue, 95% of sites with fetchpriority="high" LCP priority hints have a good LCP, against 96% of Vue sites with no. Within Vue, sites with fetchpriority="high" and no have a good LCP about equally often.
How fetchpriority and preload change Chrome's network queue
Chromium starts <img> requests at Low network priority while stylesheets and head scripts download at Highest or High priority, only promoting visible viewport images to High after layout completes. Adding fetchpriority="high" to the hero <img> sets its initial network priority to High during the preload scan, while <link rel="preload" as="image"> starts the download from the document <head> and cuts median resource load delay from 624 ms to 729 ms.
Understanding LCP priority hints
Pass preload: true or fetchpriority: 'high' to Shopify's image_tag filter on the main hero section. Across Shopify stores, 27.6% use fetchpriority="high" (96% good LCP, 1.3s median LCP) while 69.9% ship no priority hint (95% good LCP, 1.4s median LCP).
By Arjen Karel · 8,246 crawled Shopify sites (5,825 with phone Chrome field data, 7,873 sites with LCP priority hints, October 2026). How we measured.