Shopify connection and preload hints and the Core Web Vitals

Sites with both preconnect and preload hints connection and preload hints have a good LCP most often: 97%, against 97% of all Shopify sites. Sites with preconnect hints without preload connection hints have it least often, at 96%.

Both preconnect and preload hints is the most used: 76.6% of Shopify sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between both preconnect and preload hints and preconnect hints without preload sits in resource load delay: 614 ms median for both preconnect and preload hints against 692 ms for preconnect hints without preload. Overall median field LCP is 1.3s for both preconnect and preload hints (TTFB 302 ms, load delay 614 ms, load duration 153 ms, render delay 298 ms) versus 1.3s for preconnect hints without preload.

Vue sets the connection and preload hints to both preconnect and preload hints on 80% of its sites, and 97% of Vue sites have a good LCP, against 97% of all sites.

FrameworkConnection and preload hints on its sitesGood LCP

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

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

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

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, 96% of sites with both preconnect and preload hints connection and preload hints have a good LCP, against 94% of jQuery sites with preconnect hints without preload. Within jQuery, sites with both preconnect and preload hints and preconnect hints without preload have a good LCP about equally often. On Vue, 97% of sites with both preconnect and preload hints connection and preload hints have a good LCP, against 92% 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, 97% pass field LCP (1.3s median), compared with 97% (1.1s median) on the 2.3% using dns-prefetch alone.