WordPress connection and preload hints and the Core Web Vitals

Sites with no resource hints connection and preload hints have a good LCP most often: 82%, against 76% of all WordPress sites. Sites with preconnect hints without preload connection hints have it least often, at 71%.

Only dns-prefetch hints is the most used: 34.9% of WordPress sites. No resource hints is 23.5% of WordPress sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between no resource hints and preconnect hints without preload sits in time to first byte (TTFB): 908 ms median for no resource hints against 1071 ms for preconnect hints without preload. Overall median field LCP is 1.6s for no resource hints (TTFB 908 ms, load delay 272 ms, load duration 131 ms, render delay 182 ms) versus 1.9s for preconnect hints without preload.

On jQuery, 36% of sites use only dns-prefetch hints connection and preload hints, and 75% of jQuery sites have a good LCP, against 76% of all sites. On Vue, 32% of sites use no resource hints, and 75% of Vue sites have a good LCP.

FrameworkConnection and preload hints on its sitesGood LCP

All WordPress sites 63,295 sitesDNS-prefetch only 35%No resource hints 24%Preload without preconnect 16%Preconnect without preload 16%Both preconnect and preload 10%76%

Alpine 380 sitesDNS-prefetch only 25%Preload without preconnect 22%Both preconnect and preload 21%Preconnect without preload 20%No resource hints 13%82%

jQuery 60,314 sitesDNS-prefetch only 36%No resource hints 23%Preconnect without preload 16%Preload without preconnect 16%Both preconnect and preload 10%75%

Vue 4,844 sitesNo resource hints 32%Preload without preconnect 26%DNS-prefetch only 22%75%

React 2,233 sitesDNS-prefetch only 34%Preload without preconnect 20%Preconnect without preload 17%No resource hints 15%Both preconnect and preload 14%66%

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

Does the framework explain the connection and preload hints difference?

On jQuery, 81% of sites with no resource hints connection and preload hints have a good LCP, against 76% of jQuery sites with only dns-prefetch hints. Within jQuery, sites with no resource hints have a good LCP more often. On Vue, 77% of sites with no resource hints connection and preload hints have a good LCP, against 69% of Vue sites with only dns-prefetch hints. Within Vue, sites with no resource hints and only dns-prefetch hints 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,426 sites (10.2%) pairing preconnect and preload, 73% pass field LCP (1.8s median), compared with 76% (1.8s median) on the 34.9% using dns-prefetch alone.