WordPress preloaded font count and the Core Web Vitals

Sites with 3 to 4 preloaded fonts preloaded font count have a good LCP most often: 76%, against 76% of all WordPress sites. Sites with 1 to 2 preloaded fonts font preloads have it least often, at 70%.

Sites with 3 to 4 preloaded fonts preloaded font count have a good CLS most often: 81%, against 78% of all WordPress sites. Sites with 5+ preloaded fonts font preloads have it least often, at 78%.

One in ten WordPress sites uses preloaded font count, and 56% of those use 1 to 2 preloaded fonts. 3 to 4 preloaded fonts is 25% of the sites with font preloads, 2.9% of all WordPress sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between 3 to 4 preloaded fonts and 0 preloaded fonts sits in time to first byte (TTFB): 1032 ms median for 3 to 4 preloaded fonts against 987 ms for 0 preloaded fonts. Overall median field LCP is 1.7s for 3 to 4 preloaded fonts (TTFB 1032 ms, load delay 266 ms, load duration 127 ms, render delay 254 ms) versus 1.7s for 0 preloaded fonts.

Across the four LCP sub-parts in Chrome's field data, the largest gap between 3 to 4 preloaded fonts and 0 preloaded fonts sits in time to first byte (TTFB): 1032 ms median for 3 to 4 preloaded fonts against 987 ms for 0 preloaded fonts. Overall median field LCP is 1.7s for 3 to 4 preloaded fonts (TTFB 1032 ms, load delay 266 ms, load duration 127 ms, render delay 254 ms) versus 1.7s for 0 preloaded fonts.

On jQuery, 88% of sites use 0 preloaded fonts preloaded font count, and 75% of jQuery sites have a good LCP, against 76% of all sites. On Vue, 84% of sites use 0 preloaded fonts, and 75% of Vue sites have a good LCP.

On jQuery, 88% of sites use 0 preloaded fonts preloaded font count, and 77% of jQuery sites have a good CLS, against 78% of all sites. On Vue, 84% of sites use 0 preloaded fonts, and 75% of Vue sites have a good CLS.

FrameworkPreloaded font count on its sitesGood LCP

All WordPress sites 63,295 sites0 preloaded fonts 88%76%

Alpine 380 sites0 preloaded fonts 84%82%

jQuery 60,314 sites0 preloaded fonts 88%75%

Vue 4,844 sites0 preloaded fonts 84%75%

React 2,233 sites0 preloaded fonts 85%66%

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

Does the framework explain the preloaded font count difference?

On jQuery, 75% of sites with 3 to 4 preloaded fonts preloaded font count have a good LCP, against 76% of jQuery sites with 0 preloaded fonts. Within jQuery, sites with 3 to 4 preloaded fonts and 0 preloaded fonts have a good LCP about equally often. On Vue, 76% of sites with 3 to 4 preloaded fonts preloaded font count have a good LCP, against 73% of Vue sites with 0 preloaded fonts. Within Vue, sites with 3 to 4 preloaded fonts and 0 preloaded fonts have a good LCP about equally often.

On jQuery, 81% of sites with 3 to 4 preloaded fonts preloaded font count have a good CLS, against 77% of jQuery sites with 0 preloaded fonts. Within jQuery, sites with 3 to 4 preloaded fonts and 0 preloaded fonts have a good CLS about equally often. On Vue, 87% of sites with 3 to 4 preloaded fonts preloaded font count have a good CLS, against 72% of Vue sites with 0 preloaded fonts. Within Vue, sites with 3 to 4 preloaded fonts have a good CLS more 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 (6.6% of sites, 4,171) starts font fetches immediately and lifts good LCP to 70% (1.9s median), ahead of the 88.3% with 0 font preloads (76% good LCP, 1.7s median). However, preloading 3 to 4 fonts (2.9%) drops good LCP to 76% (1.7s median), and preloading 5 or more fonts (2.2%) saturates early bandwidth and drops good LCP to 74% (1.8s median).