Preload Fonts

πŸš€ Available from WP Rocket 3.6

 It is found on the Preload tab:

In this Article

How to use Preload Fonts

The Preload Fonts option allows you to tell the browser to start downloading fonts that it otherwise wouldn't discover until much later. This is usually because the font is referenced from within a CSS file. 

Preloading fonts will improve load time and perceived performance.

Which fonts should I preload?

Google PageSpeed Insights will point out any fonts that could benefit from this optimization under the Opportunity, Preload Key Requests:

TIP: Turn off Optimize CSS Delivery, or simply bypass WP Rocket when running a PageSpeed test to discover candidates for font preloading.

Don't preload everything!

Preload should be used sparingly to avoid creating a bottleneck. Only preload fonts which would otherwise delay the rendering of the page or the perceived performance. If you preload too many fonts which are not needed right away, you will decrease the performance of your site.

Preloading in action

When you enter a font URL for preloading, WP Rocket will apply the preload tag as follows, in the <head> of your site:

<link rel="preload" as="font" href="https://example.com/wp-content/themes/paperback/inc/fontawesome/fonts/fontawesome-webfont.woff2" crossorigin><br>
	

This optimization will be applied on both cached and uncached pages.

Note that fonts must be hosted on your own domain, or the domain you have specified on the CDN tab, in order to work with this option. External fonts like Google Fonts cannot be entered here. Google Fonts are already handled by the option: Optimize Google Fonts

With preloading, you will see the font being requested earlier in the waterfall and it should improve load time and the first paint time.

Waterfall before font preload

Note that the fonts are requested about halfway down, as the browser naturally discovers them.

Waterfall with font preloading

The fonts are now requested at the top, improving performance.

PageSpeed warning

Warnings: Lighthouse was unable to automatically check the `font-display` value for the origin

This is usually caused by preloading fonts that should not be preloaded. You can verify that in Chrome because it will show a warning like this in the console: 

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.