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 (809 ms with preload vs 651 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 97% of all Shopify sites.
LCP pass rate
Sites with fetchpriority="high" LCP priority hints have a good LCP most often: 97%, against 97% of all Shopify sites.
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: 559 ms median for fetchpriority="high" against 651 ms for no. Overall median field LCP is 1.2s for fetchpriority="high" (TTFB 304 ms, load delay 559 ms, load duration 148 ms, render delay 293 ms) versus 1.3s for no.
LCP priority hints combined with the loading attribute
Combining fetchpriority="high" with Auto reaches 98% good LCP across 417 sites (520 ms median load delay). At the other end, fetchpriority="high" paired with Eager sits at 96% across 535 sites (595 ms median load delay).
| Priority hint | No loading attribute (auto) | loading="lazy" | loading="eager" |
|---|---|---|---|
| No priority hint | 97% 1,476 sites | 98% 1,850 sites | 97% 486 sites |
| fetchpriority="high" | 98% 1,261 sites | 100% 21 sites | 96% 889 sites |
| <link rel="preload"> | few sites | few sites | few sites |
| <link rel="preconnect"> | 83% 48 sites | 90% 21 sites | few sites |
LCP priority hints per framework
On jQuery, 82% of sites use no LCP priority hints, and 95% of jQuery sites have a good LCP, against 97% of all sites. On Vue, 70% of sites use no, and 97% of Vue sites have a good LCP.
Vue 892 sitesNo priority hint 70%fetchpriority="high" 28%97%
jQuery 3,031 sitesNo priority hint 82%fetchpriority="high" 14%95%LCP priority hints or the framework
Does the framework explain the LCP priority hints difference?
On jQuery, 97% of sites with fetchpriority="high" LCP priority hints have a good LCP, against 95% 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 97% 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 651 ms to 809 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 (97% good LCP, 1.3s median LCP).
By Arjen Karel · 8,246 crawled Shopify sites (3,818 with desktop Chrome field data, 7,873 sites with LCP priority hints, October 2026). How we measured.