How to Fix Preload Key Requests with Fonts in WordPress?

Nowadays, speed is everything. Browsers will try to cache the content on the webpage to speed up the loading. There are many ways to inform the browser about what to cache, when to cache and how long retain the cached content. Preload is one such caching feature that helps to improve the page loading speed of WordPress site. However, this may create an error in Google Lighthouse reports which is used in Google PageSpeed Insights tool. In this article, let us explain how to fix the preload key requests problem in PageSpeed Insights due to fonts.

How to Use Preload?

Preload, as the name indicates, inform the browser to start caching the resources on a webpage immediately when the page starts loading. This will help to cache the CSS, scripts and fonts that are required later point of time. You can learn more about preloading in this Google developer article.

Basically, preload is a value of the rel property in HTML link tag. Here is a syntax of using preload requests on your site:

<link rel="preload" href="font.woff" as="style">

You need to insert this link tag between the head tags on your HTML for each CSS, script and font files loaded on the site.

Google PageSpeed Issue with Preload

Though preload speed up the loading time, it should be used properly. Check your site with PageSpeed Insights tool to see whether any opportunity available due to preload request. Below is an example case that shows you can save 7.05 seconds due to the preload key requests.

When you click on the down arrow, you will see all related content that cause the delay. In this case, all are fonts loaded on the webpage.

WordPress Plugins and Preloading

Now, that you may get confused how the preloading appears on the Google PageSpeed report for your WordPress site. There are many reasons you will get this error:

• Themes and plugin loading fonts by importing in CSS.
• You are using caching plugin like WP Rocket to preload the pages but not preloading the fonts.
• You are using third-party fonts with advertisements like Google AdSense or using a plugin to load font awesome icons on your site.

The caching plugins add preload request keys to all resources. However, the fonts imported in CSS using @font-face will not use the preload key requests. This could be the error PageSpeed showing that preload key is not used by the fonts loaded from the site.

How to Fix Preload Key Requests with Fonts?

You can remove the error by manually adding preload keys on your site header for those resources shown in PageSpeed. However, there are also plugins to automatically insert the meta tags on your header. We will explain both manual and plugin methods.

Using WP Rocket to Fix Preload Key Request in Google PSI

First, we will explain with WP Rocket plugin as it is easy and you do not need to modify PHP files.

Include Font Preloading with WP Rocket

WP Rocket is the premium caching plugin that allows your to include preloading of fonts. If you are using WP Rocket, go to “Settings > WP Rocket > Preload” section. Paste the relative URLs of the font resources under “Preload fonts” text box and save your changes. This will help you to get rid of preload requests issue in Google PageSpeed Insights tool. Remember, relative URL should be in the format “/wp-content/themes/your-theme-name/font-file-name” for theme fonts and “/wp-content/plugins/plugin-name/font-file-name” for fonts loaded by plugins.

WP Rocket optimizes many other features like critical CSS generation, DNS prefetching and hosting third-part scripts like Google Analytics locally. Hence, it is a good idea to use plugins like WP Rocket to improve overall speed of your WordPress site. WP Rocket plugin also offers option for generating critical path CSS or removing unused CSS out of the box.

Manually Adding Preload Meta Tags

Follow the below steps to insert meta tags manually in your theme’s header.php file. We recommend using child theme so that changes will stay permanent when you update the parent theme.

Preparing Link Meta Tags

First step is to get all URLs for the resources shown in Google PageSpeed. Normally, you will see the end portion of the URLs, hover the mouse over the links to view full URL of the blocking resource. Now, you can copy the URL and paste in a text editor.

You need to use the URLs in the below format to include in the link tag:

<link rel="preload" href="Font URL Showing in PageSpeed" as="font" crossorigin="anonymous">

Prepare link tags for each font resource used by your theme and plugins.

Inserting Link Tags in Header

Next step is to copy all your link tags with preload requests and paste inside the header section of the site. On your WordPress site, you need to paste the link tags in header.php file of the active theme. You can use File Manager app from hosting account or use FTP to edit header.php file and insert code in the header.

• Login to your hosting account using FTP client like FileZilla or locate File Manager app in your hosting account.
• Navigate to “/wp-content/themes/yourtheme” folder and locate header.php file.

• Edit the file and insert the preload code in the header section.
• It will look something like below and remember to insert all request that you see in Google PageSpeed Insights tool.

Alternatively, you can also go to “Appearance > Theme Editor” in your admin dashboard and edit the file. We recommend to use child theme and modify header.php file. If you modify the parent theme file, you need to insert this code manually every time when you update the theme. Alternatively, you can use plugins like Insert Headers and Footers plugin to add the link tags to your site’s header without editing theme files.

Check PageSpeed Again

After inserting the link tag manually or using WP Rocket, ensure to clear the cache on your site. Check back on PageSpeed Insights and now you will not see the preload key requests error.

You can click on “Passed audits” section and check the “Preload key requests” issue is in passed status.

Conclusion

Generally, Google PageSpeed Insights will show the preload error causing many seconds delay in page loading. You can follow the above steps to insert preload links manually or using plugin. This will help you to remove the error from Google PageSpeed and improve the speed score.