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 96% of all Shopify sites. Sites with preconnect hints without preload connection hints have it least often, at 95%.

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 preconnect hints without preload sits in element render delay: 252 ms median for only dns-prefetch hints against 362 ms for preconnect hints without preload. Overall median field LCP is 1.2s for only dns-prefetch hints (TTFB 369 ms, load delay 668 ms, load duration 200 ms, render delay 252 ms) versus 1.4s for preconnect hints without preload.

On jQuery, 66% of sites use both preconnect and preload hints connection and preload hints, and 94% of jQuery sites have a good LCP, against 96% of all sites. On Vue, 80% of sites use both preconnect and preload hints, and 95% 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%96%

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

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

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, 98% of sites with only dns-prefetch hints connection and preload hints have a good LCP, against 94% 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, 96% of sites with both preconnect and preload hints connection and preload hints have a good LCP, against 90% of Vue sites with preconnect hints without preload. Within Vue, sites with both preconnect and preload hints have a good LCP more 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, 96% pass field LCP (1.3s median), compared with 98% (1.2s median) on the 2.3% using dns-prefetch alone.