Preloaded font count on React sites

Sites with 5+ preloaded fonts preloaded font count have a good LCP most often: 74%, against 85% of all React sites. Sites with 1 to 2 preloaded fonts font preloads have it least often, at 62%.

Sites with 5+ preloaded fonts preloaded font count have a good CLS most often: 88%, against 92% of all React sites. Sites with 1 to 2 preloaded fonts font preloads have it least often, at 84%.

5.2% of React sites use preloaded font count, and 57% of those use 1 to 2 preloaded fonts. 5+ preloaded fonts is 21% of the sites with font preloads, 1.1% of all React sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between 5+ preloaded fonts and 0 preloaded fonts sits in time to first byte (TTFB): 838 ms median for 5+ preloaded fonts against 497 ms for 0 preloaded fonts. Overall median field LCP is 1.7s for 5+ preloaded fonts (TTFB 838 ms, load delay 256 ms, load duration 146 ms, render delay 318 ms) versus 1.4s for 0 preloaded fonts.

Across the four LCP sub-parts in Chrome's field data, the largest gap between 5+ preloaded fonts and 0 preloaded fonts sits in time to first byte (TTFB): 838 ms median for 5+ preloaded fonts against 497 ms for 0 preloaded fonts. Overall median field LCP is 1.7s for 5+ preloaded fonts (TTFB 838 ms, load delay 256 ms, load duration 146 ms, render delay 318 ms) versus 1.4s for 0 preloaded fonts.

On Wix, 100% of sites use 0 preloaded fonts preloaded font count, and 94% of Wix sites have a good LCP, against 85% of all sites. On WordPress, 86% of sites use 0 preloaded fonts, and 61% of WordPress sites have a good LCP.

On Wix, 100% of sites use 0 preloaded fonts preloaded font count, and 98% of Wix sites have a good CLS, against 92% of all sites. On WordPress, 86% of sites use 0 preloaded fonts, and 85% of WordPress sites have a good CLS.

PlatformPreloaded font count on its sitesGood LCP

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

Wix 5,824 sites0 preloaded fonts 100%94%

WordPress 2,342 sites0 preloaded fonts 86%61%

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

Does the platform explain the preloaded font count difference?

On WordPress, 59% of sites with 5+ preloaded fonts preloaded font count have a good LCP, against 62% of WordPress sites with 0 preloaded fonts. Within WordPress, sites with 5+ preloaded fonts and 0 preloaded fonts have a good LCP about equally often.

On WordPress, 89% of sites with 5+ preloaded fonts preloaded font count have a good CLS, against 85% of WordPress sites with 0 preloaded fonts. Within WordPress, sites with 5+ 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 62% (2.2s median), ahead of the 94.8% with 0 font preloads (86% good LCP, 1.4s median). However, preloading 3 to 4 fonts (1.1%) drops good LCP to 70% (1.8s median), and preloading 5 or more fonts (1.1%) saturates early bandwidth and drops good LCP to 74% (1.7s median).