Table of Contents
Every Webmaster knows about Google Search Console and how handy it is for various purposes. Bundling, so many features including, the PageSpeed Insights. It generates reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved. Ultimately, leading to boosting Website Page speed and getting more points for ranking in search results.
However, in the report, there are many improvements suggested depending on the current status of your webpage. One of them being Preload Key Requests. The Preload Key Requests suggestion in the report will look like the below image.
What is Preload Key Requests?
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. So, by using the Preload Key Requests, you will tell the browser which resources need to be preloaded from cache every time the page is loaded. Each resource represents a key. You can learn more about preloading in this Google developer article.
How to fix Preload Key Requests in WordPress
Now that you know what is Preload Key Requests, let’s see how can we get this fixed. This issue or suggestion can be for font, CSS, or similar resources. We will be creating Keys for each Preload suggestion from the report. So as a first step list down all the URL’s mentioned in the report for Preload Key. Once completed put all the full URL in the “href” of below code and type of the resource in “as”.
<link rel="preload" as="script" href="critical.js">
In my case, my suggestion is for a theme font called astra.woff. So I will copy the URL and modify the above code like this:
<link rel="preload" as="font" href="https://swarnathesagigirl.com/wp-content/themes/astra/assets/fonts/astra.woff">
Like wise you have to create above code for each resource mentioned in the report. Once all are modified, we will paste the code in Header of our theme i.e. header.php.
However, you need to update this code manually whenever you update the theme. So what can you do alternatively as a set of best practices to avoid updating this code each time you update your theme? We will use a third-party plugin called Insert Header and Footers. What will this plugin do? As the name suggests, it has three sections Header, Body, and Footer, where you can put your custom code like this preload key tags. And whenever you update your theme or replace your theme, you don’t have to worry about these codes again. It is a simple and pretty straight forward plugin.
How to fix Preload Key Requests in WP Rocket
If you are using WP Rocket or any similar cache plugin, you can check for Preloading Options. In WP Rocket there is a section for Preload. Here, you can add the URL’s directly from the Pagespeed Insight.
Once all the URL’s are pasted you can save the Settings and make sure to clear cache and hit the Re-Analyze button on Pagespeed Insights and you can see that there is no more Preload Key Requests section in the report.