Shopify connection and preload hints and the Core Web Vitals

Sites with only dns-prefetch hints connection and preload hints have a good LCP most often: 98%, against 95% of all Shopify sites. Sites with preload hints without preconnect connection hints have it least often, at 94%.

Both preconnect and preload hints is the most used: 76.6% of Shopify sites. Only dns-prefetch hints is 2.3% of Shopify sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between only dns-prefetch hints and preload hints without preconnect sits in resource load delay: 693 ms median for only dns-prefetch hints against 541 ms for preload hints without preconnect. Overall median field LCP is 1.3s for only dns-prefetch hints (TTFB 376 ms, load delay 693 ms, load duration 211 ms, render delay 246 ms) versus 1.3s for preload hints without preconnect.

On jQuery, 66% of sites use both preconnect and preload hints connection and preload hints, and 93% of jQuery sites have a good LCP, against 95% of all sites. On Vue, 80% of sites use both preconnect and preload hints, and 94% of Vue sites have a good LCP.

FrameworkConnection and preload hints on its sitesGood LCP

All Shopify sites 8,246 sitesBoth preconnect and preload 77%Preconnect without preload 18%95%

Vue 933 sitesBoth preconnect and preload 80%Preconnect without preload 17%94%

jQuery 3,153 sitesBoth preconnect and preload 66%Preconnect without preload 28%93%

Both preconnect and preload Preconnect without preload Preload without preconnect DNS-prefetch only No resource hints

Does the framework explain the connection and preload hints difference?

On jQuery, 97% of sites with only dns-prefetch hints connection and preload hints have a good LCP, against 92% of jQuery sites with both preconnect and preload hints. Within jQuery, sites with only dns-prefetch hints and both preconnect and preload hints have a good LCP about equally often. On Vue, 95% of sites with both preconnect and preload hints connection and preload hints have a good LCP, against 91% of Vue sites with preconnect hints without preload. Within Vue, sites with both preconnect and preload hints and preconnect hints without preload have a good LCP about equally often.

Why targeted preload and preconnect beat legacy dns-prefetch

dns-prefetch only resolves the domain name, leaving TCP and TLS handshakes on the critical path. Pairing preconnect on critical asset CDNs with preload on the LCP image eliminates both connection and discovery delay. Across 6,320 sites (76.6%) pairing preconnect and preload, 95% pass field LCP (1.3s median), compared with 98% (1.3s median) on the 2.3% using dns-prefetch alone.