Connection and preload hints on React sites

Sites with preload hints without preconnect connection and preload hints have a good LCP most often: 92%, against 85% of all React sites. Sites with only dns-prefetch hints connection hints have it least often, at 57%.

Preload hints without preconnect is the most used: 61.7% of React sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between preload hints without preconnect and only dns-prefetch hints sits in time to first byte (TTFB): 446 ms median for preload hints without preconnect against 1427 ms for only dns-prefetch hints. Overall median field LCP is 1.2s for preload hints without preconnect (TTFB 446 ms, load delay 444 ms, load duration 140 ms, render delay 157 ms) versus 2.3s for only dns-prefetch hints.

Wix sets the connection and preload hints to preload hints without preconnect on 89% of its sites, and 94% of Wix sites have a good LCP, against 85% of all sites.

PlatformConnection and preload hints on its sitesGood LCP

All React sites 9,570 sitesPreload without preconnect 62%No resource hints 15%85%

Wix 5,824 sitesPreload without preconnect 89%94%

WordPress 2,342 sitesDNS-prefetch only 34%Preload without preconnect 20%Preconnect without preload 17%No resource hints 15%Both preconnect and preload 14%61%

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

Does the platform explain the connection and preload hints difference?

On Wix, 94% of sites with preload hints without preconnect connection and preload hints have a good LCP, against 96% of Wix sites with no resource hints. Within Wix, sites with preload hints without preconnect and no resource hints have a good LCP about equally often. On WordPress, 70% of sites with preload hints without preconnect connection and preload hints have a good LCP, against 72% of WordPress sites with no resource hints. Within WordPress, sites with preload hints without preconnect and no resource 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 904 sites (9.4%) pairing preconnect and preload, 76% pass field LCP (1.7s median), compared with 57% (2.3s median) on the 8.7% using dns-prefetch alone.