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 two reasons you will get this error:
- You are using caching plugin like WP Rocket to preload the pages.
- You are using advertisements like Google AdSense on your page using plguin.
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 error by adding the preload key manually for the resources showing in the PageSpeed. First, hover the mouse over the links and get the full URL of the blocking resource. Use the URLs in the below format:
<link rel=”preload” href=”Font URL Showing in PageSpeed” as=”font” crossorigin=”anonymous”>
You need to create the link tags for each font resource used by your theme and plugins. Copy all your link tags with preload requests and paste between 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.
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.
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.