Preloaded font count on React sites

Sites with 1 to 2 preloaded fonts preloaded font count have a good LCP most often: 70%, against 79% of all React sites.

Sites with 1 to 2 preloaded fonts preloaded font count have a good CLS most often: 70%, against 80% of all React sites.

5.2% of React sites use preloaded font count, and 57% of those use 1 to 2 preloaded fonts.

Across the four LCP sub-parts in Chrome's field data, the largest gap between 1 to 2 preloaded fonts and 0 preloaded fonts sits in time to first byte (TTFB): 971 ms median for 1 to 2 preloaded fonts against 670 ms for 0 preloaded fonts. Overall median field LCP is 1.8s for 1 to 2 preloaded fonts (TTFB 971 ms, load delay 396 ms, load duration 114 ms, render delay 263 ms) versus 1.6s for 0 preloaded fonts.

Across the four LCP sub-parts in Chrome's field data, the largest gap between 1 to 2 preloaded fonts and 0 preloaded fonts sits in time to first byte (TTFB): 971 ms median for 1 to 2 preloaded fonts against 670 ms for 0 preloaded fonts. Overall median field LCP is 1.8s for 1 to 2 preloaded fonts (TTFB 971 ms, load delay 396 ms, load duration 114 ms, render delay 263 ms) versus 1.6s for 0 preloaded fonts.

On Wix, 100% of sites use 0 preloaded fonts preloaded font count, and 92% of Wix sites have a good LCP, against 79% of all sites. On WordPress, 86% of sites use 0 preloaded fonts, and 66% of WordPress sites have a good LCP.

On Wix, 100% of sites use 0 preloaded fonts preloaded font count, and 96% of Wix sites have a good CLS, against 80% of all sites. On WordPress, 86% of sites use 0 preloaded fonts, and 75% of WordPress sites have a good CLS.

PlatformPreloaded font count on its sitesGood LCP

All React sites 9,570 sites0 preloaded fonts 95%79%

Wix 5,824 sites0 preloaded fonts 100%92%

WordPress 2,342 sites0 preloaded fonts 86%66%

0 preloaded fonts 1 to 2 preloaded fonts 5+ preloaded fonts 3 to 4 preloaded fonts

Does the platform explain the preloaded font count difference?

On WordPress, 59% of sites with 1 to 2 preloaded fonts preloaded font count have a good LCP, against 66% of WordPress sites with 0 preloaded fonts. Within WordPress, sites with 1 to 2 preloaded fonts and 0 preloaded fonts have a good LCP about equally often.

On WordPress, 77% of sites with 1 to 2 preloaded fonts preloaded font count have a good CLS, against 75% of WordPress sites with 0 preloaded fonts. Within WordPress, sites with 1 to 2 preloaded fonts and 0 preloaded fonts have a good CLS about equally often.

Why preloading 1 to 2 fonts helps LCP while preloading 5+ fonts starves the hero image

Normally the browser discovers web fonts only after downloading CSS and matching @font-face rules to DOM nodes. Preloading 1 to 2 core WOFF2 files (3.0% of sites, 288) starts font fetches immediately and lifts good LCP to 70% (1.8s median), ahead of the 94.8% with 0 font preloads (80% good LCP, 1.5s median). However, preloading 3 to 4 fonts (1.1%) drops good LCP to 80% (1.7s median), and preloading 5 or more fonts (1.1%) saturates early bandwidth and drops good LCP to 74% (1.7s median).