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 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.
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.
You can click on “Passed audits” section and check the “Preload key requests” issue is in passed status.
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.
WP Rocket is currently offering 20% discount for Halloween sale. You can grab the deal to speedup your WordPress site.
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.