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.
- You are using advertisements like Google AdSense on your page using plugin.
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 is the error PageSpeed shows 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 errors by adding preload keys manually on your site header for those resources shown in PageSpeed.
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.
- You can use any plugin that allows you to insert header content and paste the code using the plugin.
- Alternatively, you can use FTP or File Manager and locate header.php file to insert the code. However, you need to update this code manually every time when you update the theme.
Check PageSpeed Again
After inserting the link tag, ensure to clear the cache on your site. Check back on PageSpeed Insights and now you will not see the preload key requests error.
WP Rocket Update to Include Font Preloading
WP Rocket recently updated the plugin 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.
Though preload error will show many seconds delay in loading, removing the error will not have big impact. However, you can follow the above steps to remove the error from Google PageSpeed.