Speed is everything these days. Browsers try to cache content on web pages to speed up loading. There are many ways to tell the browser what to cache, when to cache it, and how long to keep cached content.
Preloading is one such caching feature that helps improve the page load speed of your WordPress site. However, this may produce errors in the Google Lighthouse report used in the Google PageSpeed Insights tool.
In this article, let’s explain how to fix preloaded keyword requests due to fonts in PageSpeed Insights.
How to use preload?
Preloading, as the name suggests, tells the browser to start caching the resources on the page immediately when the page starts to load. This will help cache CSS, scripts and fonts that will be needed later. You can learn more about preloading in this Google developer article.
Google PageSpeed problem with preload
While preloading will speed up load times, it should be used correctly. Check your website with the PageSpeed Insights tool to see if any chances are available due to preload requests. Below is an example showing that you can save 7.05 seconds due to preloading critical requests.
When you click the down arrow, you’ll see everything related to the delay. In this case, it’s all fonts loaded on the web page.
WordPress plugins and preloading
Now, you might be confused about how preloading appears in the Google PageSpeed report for your WordPress site. You might get this error for a number of reasons:
Load fonts via themes and plugins imported in CSS.
You are using a caching plugin like WP Rocket to preload pages but not fonts.
You are using 3rd party fonts with ads like Google AdSense or using plugins to load font awesome icons on your website.
The cache plugin adds preload request keys to all resources. However, fonts imported in CSS using @font-face are not requested with the preload key. Errors displayed by PageSpeed can be caused by fonts loaded by the site not using the preload key.
How to fix preload critical request issue due to fonts?
You can get rid of the error by manually adding a preload key on the site title of those resources displayed in PageSpeed. However, there are also plugins that automatically insert meta tags on your headers. We will explain manual and plugin methods.
Fix preload keyword requests in Google PSI with WP Rocket
First, we’ll use the WP Rocket plugin for illustration because it’s simple and you don’t need to modify the PHP files.
Manually add preload meta tags
Follow the steps below to manually insert meta tags in your theme’s header.php file. We recommend using child themes so that changes will persist when the parent theme is updated.
Prepare link meta tags
The first step is to get all the URLs of the resources displayed in Google PageSpeed. Often you see the end of the URL, hover over the link to see the full URL of the blocking resource. Now you can copy and paste the URL into a text editor.