Shopify preloaded font count and the Core Web Vitals

Sites with 1 to 2 preloaded fonts preloaded font count have a good LCP most often: 96%, against 95% of all Shopify sites. Sites with 5+ preloaded fonts font preloads have it least often, at 93%.

Sites with 1 to 2 preloaded fonts preloaded font count have a good CLS most often: 96%, against 94% of all Shopify sites. Sites with 5+ preloaded fonts font preloads have it least often, at 90%.

70.3% of Shopify sites use preloaded font count, and three in four 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 resource load delay: 545 ms median for 1 to 2 preloaded fonts against 704 ms for 0 preloaded fonts. Overall median field LCP is 1.3s for 1 to 2 preloaded fonts (TTFB 399 ms, load delay 545 ms, load duration 213 ms, render delay 268 ms) versus 1.5s 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 resource load delay: 545 ms median for 1 to 2 preloaded fonts against 704 ms for 0 preloaded fonts. Overall median field LCP is 1.3s for 1 to 2 preloaded fonts (TTFB 399 ms, load delay 545 ms, load duration 213 ms, render delay 268 ms) versus 1.5s for 0 preloaded fonts.

Vue sets the preloaded font count to 1 to 2 preloaded fonts on 54% of its sites, and 94% of Vue sites have a good LCP, against 95% of all sites.

Vue sets the preloaded font count to 1 to 2 preloaded fonts on 54% of its sites, and 90% of Vue sites have a good CLS, against 94% of all sites.

FrameworkPreloaded font count on its sitesGood LCP

All Shopify sites 8,246 sites1 to 2 preloaded fonts 53%0 preloaded fonts 30%3 to 4 preloaded fonts 14%95%

Vue 933 sites1 to 2 preloaded fonts 54%0 preloaded fonts 28%3 to 4 preloaded fonts 15%94%

jQuery 3,153 sites0 preloaded fonts 46%1 to 2 preloaded fonts 39%3 to 4 preloaded fonts 12%93%

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

Does the framework explain the preloaded font count difference?

On jQuery, 94% of sites with 1 to 2 preloaded fonts preloaded font count have a good LCP, against 92% of jQuery sites with 0 preloaded fonts. Within jQuery, sites with 1 to 2 preloaded fonts and 0 preloaded fonts have a good LCP about equally often. On Vue, 96% of sites with 1 to 2 preloaded fonts preloaded font count have a good LCP, against 92% of Vue sites with 0 preloaded fonts. Within Vue, sites with 1 to 2 preloaded fonts and 0 preloaded fonts have a good LCP about equally often.

On jQuery, 93% of sites with 1 to 2 preloaded fonts preloaded font count have a good CLS, against 89% of jQuery sites with 0 preloaded fonts. Within jQuery, sites with 1 to 2 preloaded fonts have a good CLS more often. On Vue, 92% of sites with 1 to 2 preloaded fonts preloaded font count have a good CLS, against 87% of Vue sites with 0 preloaded fonts. Within Vue, 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 (53.2% of sites, 4,389) starts font fetches immediately and lifts good LCP to 96% (1.3s median), ahead of the 29.7% with 0 font preloads (94% good LCP, 1.4s median). However, preloading 3 to 4 fonts (14.0%) drops good LCP to 95% (1.4s median), and preloading 5 or more fonts (3.1%) saturates early bandwidth and drops good LCP to 93% (1.5s median).