Boost: Preload fonts

[thingalon]

originally filed by @gravityrail

PageSpeed detected opportunities to improve load speed by preloading fonts.

In this particular case, adding the following to a test plugin improved scores.

add_action( 'wp_head', function() {
echo '<link rel="preload" href="https://boosttest.mystagingwebsite.com/wp-content/themes/uncode/library/fonts/uncode-icons.woff2" as="font" type="font/woff2" crossorigin/>';
}, -PHP_INT_MAX );

We can/should use the Lighthouse results themselves to "discover" which fonts can/should be preloaded on a given URL. Note the type and crossorigin attributes are required if the font is served from a CDN.

Separately we may want to modify CSS to serve fonts from the origin. Browsers now typically segment caches by origin anyway so there's no caching benefit to having a shared instance, and incurring the DNS cost may cancel out any CDN benefits.

Some initial exploration notes in the old repo in a comment here: 664-gh-Automattic/jetpack-boost

[westonruter]

See also WordPress/performance#1313 which I filed to explore implementing this in Performance Lab. Specifically, it would be built on top of the Optimization Detective plugin which collects the client-side metrics necessary to discover which font specifically needs to be preloaded.

The Optimization Detective plugin is designed as a plugin dependency which other plugins can extend. For example, Image Prioritizer and Embed Optimizer both leverage Optimization Detective to prioritize loading LCP images, correctly apply lazy-loading, reserve space for layout-shifting embeds, and so on. All of this code is part of the the WordPress/performance repo which is intended to be an incubator for feature plugins that eventually get merged into core. Optimization Detective, Image Prioritizer, and Embed Optimizer are also all designed so that they can be embedded inside other plugins as a library, so Jetpack Boost could distribute the Optimization Detective code without having to install a separate plugin dependency. Nevertheless, with Jetpack's recent push toward decoupling plugins, perhaps Boost would opt to install these plugins separately.