Page speed is one of the top ranking signals considered by Google’s algorithm to rank pages in the SERPs. They use data from their own testing tool PageSpeed Insights to check how a given website performs in terms of speed. On auditing our webpage with the tool, Google shows certain opportunities to work on which can improve the webpage speed up to a certain limit.
One of the most common issues that are faced is the Preload key request problem. This problem delays the render of the page, and makes a visitor wait. We will discuss how to fix this problem in order to reduce the valuable time a visitor has to wait.
What is Preload?
Preload is a way of telling the browser to request a resource before the browser feels the needs of it. In simple words, we know our website is going to request a certain font at the end of loading all HTML and JS files, hence, instead of waiting for the instance to arrive and then having to wait for it, we command the browser to load the particular font at the start. This way, when the other files of the webpage are loaded, our preloaded font would be ready to use.
This preload request is useful because the system you are using contains only a few fonts and the webpage may contain some fancy fonts. As a result, the browser has to download the fancy font each time the webpage is opened.
What is the key preload request problem?
The key preload request problem is an outcome of overusing this method.
On checking your site with PageSpeed Insights, you might face some problems like the one in the screenshot below.
In this website audit, we can see that our webpage is loading 0.52 sec late due to this problem. For some other webpages, it can go easily upto 7-8 sec based on the type of font.
[Case Study] Managing Google’s bot crawling
How to solve preload key request problem in WordPress
Modifying your theme’s header.php file
We can remove the errors and convert them to opportunities by specifying the URL displayed in the Audit report as preload in the header section of each webpage. A general structure to do so would be:
link rel=”preload” href=”Error Font URL” as=”font” crossorigin=”anonymous”
This should be done for each link that is showing in the report for pagespeed. In my case, there are 4. After getting the links ready, it’s time to put them in the place they should be in, i.e; the “header.php” file of the theme. This can be done in two ways: manually or using plugin.
The recommended way would be through the plugin. Otherwise, you will have to update the header file manually each time the theme is updated.
Install the plugin named “Insert Headers and Footers” and then paste the lines of code in the header section. Save the result. It should look like the screenshot below:
For doing it manually, either connect to your FTP or go to the file manager of your hosting provider and navigate to “/wp-content/themes/themename/” and locate header.php file. Edit the file and paste the same lines of code before the wp_head(); function.
Both of the methods above will accomplish the same job.
After saving the files in both cases, ensure to clear all your cache.
Now go back to PageSpeed Insights and recheck your score and opportunities again. Ta-dah!!! No more Key Preload Request problems:
Using caching plugins
Another way to do this would be directly using caching plugins. But one point to be noted is not every caching plugin supports features for preloading requests. As per my experience, only WP Rocket and Autoptimize do it.
If you are using WP Rocket, Navigate to Settings -> WP Rocket -> Preload and paste the same URLs as above under the preload fonts section:
If you use Autoptimize, open the Extra tab of the Autoptimize panel and go to the preload specific requests tab and add the above URLs there:
Frequently Asked Questions and Suggestions
1. Do I have to clear my cache after modifying the header.php file in WordPress?
Yes. Make sure you have cleared your cache of both the website and the CDN in case of problems.
2. What is the most common error when adding code to the header?
Put the code in the right format. You can refer to the example provided earlier in this article.
3. Where should my prerender link information be placed?
Make sure to copy and paste the preload link in thesection of your code for each page. In most WordPress themes, this is in the header.php file.
Also check to make sure that the URLs for your fonts are pasted in the correct attributes and that no quotes are missing.
4. What is the difference between preload, preconnect, and prefetch?
Preload is not to be confused with preconnect or prefetch. The latter techniques are optional for the browser and are only executed if the browser feels the need for it while Preload is mandatory for the browser to execute.
5. Is PageSpeed Insights enough to validate my implementation?
No. Always check for user experience first rather than just going for the results of a Page Speed Insights audit. If anything degrades the existing performance to an even worst state, be ready to roll back to the previous checkpoint.
Takeaways
Don’t load excess resources using the preload tag. Just imagine if we gave special treatment to everyone, no one would be special. If we are fastpassing every minor resource using preload, then the major resources that are needed to be loaded as soon as browser requests them would be loaded slowly. Therefore, impacting our performance to a much higher negative aspect. Hence, just preload the request which Google pagespeed Insights suggests you to do so.
Enjoy the High Page Speed. 🙂
