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 (719 ms with preload vs 617 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 97% of those sites have a good LCP, against 96% of all Shopify sites.
LCP pass rate
Sites with fetchpriority="high" LCP priority hints have a good LCP most often: 97%, against 96% of all Shopify sites. Sites with <link rel="preconnect"> priority hints have it least often, at 92%.
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 617 ms for no. Overall median field LCP is 1.2s for fetchpriority="high" (TTFB 386 ms, load delay 522 ms, load duration 206 ms, render delay 286 ms) versus 1.3s for no.
LCP priority hints combined with the loading attribute
Combining fetchpriority="high" with Auto reaches 98% good LCP across 1,221 sites (499 ms median load delay). At the other end, fetchpriority="high" paired with Eager sits at 94% across 871 sites (560 ms median load delay).
| Priority hint | No loading attribute (auto) | loading="lazy" | loading="eager" |
|---|---|---|---|
| No priority hint | 96% 1,476 sites | 97% 1,850 sites | 95% 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"> | 87% 48 sites | 100% 21 sites | few sites |
LCP priority hints per framework
On jQuery, 82% of sites use no LCP priority hints, and 94% of jQuery sites have a good LCP, against 96% of all sites. On Vue, 70% of sites use no, and 95% of Vue sites have a good LCP.
Vue 892 sitesNo priority hint 70%fetchpriority="high" 28%95%
jQuery 3,031 sitesNo priority hint 82%fetchpriority="high" 14%94%LCP priority hints or the framework
Does the framework explain the LCP priority hints difference?
On jQuery, 94% of sites with fetchpriority="high" LCP priority hints have a good LCP, against 94% of jQuery sites with no. Within jQuery, sites with fetchpriority="high" and no have a good LCP about equally often. On Vue, 96% 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 617 ms to 719 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" (97% good LCP, 1.2s median LCP) while 69.9% ship no priority hint (96% good LCP, 1.3s median LCP).
By Arjen Karel · 8,246 crawled Shopify sites (8,062 with all devices Chrome field data, 7,873 sites with LCP priority hints, October 2026). How we measured.