What is meant by the term Preload font?This is the feature that helps take into account the PageSpeed recommendations to be able to Preload the key requests. You can easily locate this feature on the Preload tab:
The Preload Fonts: How to Use It?
This is one of the finest features that enables the users to direct the browser to begin the process of downloading the fonts. Here, we are talking about those fonts that will not be otherwise un-discoverable. These fonts are usually referred to from the CSS files, this also being the reason for them staying ‘hidden’. However, with the help of the pre-load fonts the load time will be enhanced and so will be the overall performance of the website.
What Fonts Need to Be Preload
Those fonts that require to be preloaded are pointed out by the Google PageSpeed insights. These are the fonts that can make the most out of the optimisation technique within the opportunity, Preload Key requests:
To do this you need to:
- Start by right clicking on the required font within the PageSpeed
- Now Copy the Url
- Next paste the URL within the ‘Fonts to Preload’ field.
- Be sure that the fonts are hosted within your own domain/CDN domain.
- Bear in mind that you cannot enter the externally hosted fonts such as the Google Fonts here.
- Finally makes sure that the font URL should match with what has been provided by the PageSpeed.
Avoid Preloading Everything
It has been recommended to avoid preloading everything in order to avoid creating a bottleneck. Prioritize preloading only those fonts that can delay the rendering of the page or the expected performance of the same. When you end-up preloading too many fonts that are not required at the moment, you can end-up reducing the performance of your website.
It is recommended to avoid preloading of multiple formats for the same fonts. This is because adding the .woff2, .woff, .ttf, .eot, .svg format within the preload box for the exact same font will only force the browser to preload innumerable font files where as it needs just one, which is the .woff2 in most times.
The Use of the Preload Fonts to Remove the Unused CSS
Once the ‘Remove Unused CSS’ feature has be enabled, the Preload font will not function. Instead of this, all the fonts that have been found within the resulting used CSS will be preloaded and inserted on to the page prior to the CSS block. However, this is applicable only for the fonts that are included within the ‘Used CSS’ and not within the ‘Preload Fonts box’.
Hence, you are not required to manually preload the fonts when trying to remove the Unused CSS. Also, you can easily avoid certain fonts from being preloaded when using the Remove Unused CSS or to deactivate the font preloading that have been linked to Remove Unused CSS.
How to Preload Font
Now let us take a look at how to proceed with preloading the fonts:
- Once you enter the URL font for preloading, it will be applied by the WP Rocket soon after closing of the title tag </title>, of your site:
- This is the optimisation that is applied on both the uncached and cached pages.
- Once preloading, you will get to see the font being released within Waterfall and it can enhance the load time along with the first paint time.
Waterfall Prior to the Font Preload
Here, take note that the fonts are requested somewhere halfway down, as they are naturally discovered by the browser.
Waterfall and Font Loading
Here you will notice that the fonts are located at the top, thus, enhancing the performance.
The Warnings Of the PageSpeed
Warnings: Lighthouse is unable to automatically check the `font-display` value for the origin
The main reason for this is that the Preloading fonts should not have been preloaded. This can be easily verified within Chrome where you will find a warning within the console as follows:
Preloading the External Fonts
It is not possible at the moment to preload the external fonts while using the WP Rocket. However, it can also be easily done by applying the below steps:
- Begin the process of installation of the ‘Head & Footer’ Code Plugin.
- Go to the page where you need to Preload the fonts.
- Next add the following preload <link> tags on to Header & Footer code > Header Code:
In case you are using the same font for both the desktop and the mobile:
- As displayed in the example above, you need to replace with the correct URL for the external fonts that you wish to preload.
- Also check that the type=”font/woff2″tallies with the font format that you wish to use.
- Finally you need to clearout the WP Rocket’s Cache.
CONCLUSION
That is all that we have on the topic at the moment. What do you think of this article? Do share your thoughts with us.
