Speed is everything these days. Browsers will try to cache the contents of the web page in order to speed up loading. There are many ways to inform the browser what to cache, when to cache, and how long to keep cached content. Preloading is one such caching feature that helps improve the page loading speed of a WordPress site. However, this may cause an error in the Google Lighthouse reports that are used in the Google PageSpeed Insights tool. In this article, we will explain how to fix PageSpeed Insights preload key prompts issue due to fonts.
How to use preload?
Prefetching, as the name suggests, tells the browser to start caching resources on a web page as soon as the page starts loading. This will help cache CSS, scripts, and fonts that you will need later. You can learn more about preloading in this Google Developer Article .
Essentially, preload is the value of the rel property on the HTML link tag. Here is the syntax for using preload requests on your site:
<link rel="preload" href="https://www.webnots.com/how-to-fix-preload-key-requests-with-fonts-in-wordpress/font.woff" as="style">
You need to insert this link tag between the head tags in your HTML for every CSS, script and font file uploaded to the site.
Google PageSpeed issue with preload
While preload speeds up boot time, it should be used correctly. Check your site with the PageSpeed Insights tool to see if any features are available due to the preload request. Below is an example case that shows you can save 7.05 seconds with key preload queries.
By clicking the down arrow, you will see all related content that is causing the delay. In this case, all fonts are loaded onto the web page.
WordPress plugins and preloading
Now you might be confused how preloading shows up in the Google PageSpeed report for your WordPress site. There are many reasons why you will get this error:
- Themes and plugin load fonts by importing them into CSS.
- You use a caching plugin like WP Rocket to preload pages, but not preload fonts.
- You use third-party fonts in your ads, like Google AdSense, or you use a plugin to upload great icon fonts to your site.
Caching plugins add preload request keys to all resources. However, fonts imported into CSS using @font-face will not use preload key requests. It could be a PageSpeed error showing that the preload key is not being used by the fonts downloaded from the site.
How to fix requests to preload keys with fonts?
You can remove the error by manually adding preload keys to your site’s header for those resources shown in PageSpeed. However, there are also plugins to automatically insert meta tags into your title. We will explain both manual and advanced methods.
Using WP Rocket to Fix Google PSI Preload Key Request
We’ll cover the WP Rocket plugin first as it’s simple and you don’t need to modify PHP files.
Enable font preloading with WP Rocket
WP Rocket is a premium caching plugin that allows you to enable font preloading. If you are using WP Rocket, go to Settings > WP Rocket > Preload. Paste the relative URLs of the font resources into the Preload Fonts text box and save your changes. This will help you get rid of the preload requests issue in the Google PageSpeed Insights tool. Remember that the relative url must 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 such as critical CSS generation, DNS prefetching, and local hosting of third party scripts such as Google Analytics. Hence, it is recommended to use plugins like WP Rocket to improve the overall speed of your WordPress site. The latest WP Rocket plugin will automatically ignore font preloading if you have enabled the “Optimize CSS Delivery” option in the “File Optimization” tab. So be sure to disable CSS optimization if you want to use font preloading.
Adding preload meta tags manually
Follow the steps below to manually insert meta tags into your theme’s header.php file. We recommend that you use a child theme so that the changes stay the same when you update the parent theme.
Preparing link meta tags
The first step is to get all the resource URLs displayed in Google PageSpeed. Usually you see the trailing part of the URLs, hover over the links to view the full URL of the blocking resource. You can now copy the URL and paste it in a text editor.
You need to use URLs in the following format to include them in the link tag:
<link rel="preload" href="https://www.webnots.com/how-to-fix-preload-key-requests-with-fonts-in-wordpress/Font URL Showing in PageSpeed" as="font "crossorigin="anonymous">
Prepare link tags for each font resource used by your theme and plugins.
The next step is to copy all of your preload request link tags and paste into the header section of the site. On your WordPress site, you need to insert link tags in the active theme’s header.php file. You can use the File Manager app from your hosting account, or use FTP to edit the header.php file and paste the code into the header.
- Log in to your hosting account with an FTP client like FileZilla or search for the File Manager app in your hosting account.
- Go to “/wp-content/themes/yourtheme” folder and find header.php file.
- Edit the file and paste the preload code in the header section.
- It will look something like below and don’t forget to paste all the queries you see in the Google PageSpeed Insights tool.
Alternatively, you can also go to “Appearance > Theme Editor” in the admin panel and edit the file. We recommend using a child theme and modifying the header.php file. If you are modifying the parent theme file, you will need to manually paste this code each time you update the theme.
Check PageSpeed Again
After inserting the link tag manually or using WP Rocket, be sure to clear the cache on your site. Go back to the PageSpeed Insights page and now you won’t see the preboot key request error.
You can click on the Passed Audits section and check that the Key Preload issue is in the Passed status.
Conclusion
Typically, Google PageSpeed Insights shows a preload error causing the page to load a few seconds late. You can follow the steps above to insert preload links manually or with a plugin. It will help you remove Google PageSpeed error and improve speed score.