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 many reasons you will get this error:
- Themes and plugin loading fonts by importing in CSS.
- You are using caching plugin like WP Rocket to preload the pages but not preloading the fonts.
- You are using third-party fonts with advertisements like Google AdSense or using a plugin to load font awesome icons on your site.
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 could be the error PageSpeed showing 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 manually adding preload keys on your site header for those resources shown in PageSpeed. However, there are also plugins to automatically insert the meta tags on your header. We will explain both manual and plugin methods.
Using WP Rocket to Fix Preload Key Request in Google PSI
First, we will explain with WP Rocket plugin as it is easy and you do not need to modify PHP files.
Include Font Preloading with WP Rocket
WP Rocket is the premium caching plugin that allows your to include preloading of fonts. If you are using WP Rocket, go to “Settings > WP Rocket > Preload” section. Paste the relative URLs of the font resources under “Preload fonts” text box and save your changes. This will help you to get rid of preload requests issue in Google PageSpeed Insights tool. Remember, relative URL should 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 like critical CSS generation, DNS prefetching and hosting third-part scripts like Google Analytics locally. Hence, it is a good idea to use plugins like WP Rocket to improve overall speed of your WordPress site. WP Rocket plugin also offers option for generating critical path CSS or removing unused CSS out of the box.
Manually Adding Preload Meta Tags
Follow the below steps to insert meta tags manually in your theme’s header.php file. We recommend using child theme so that changes will stay permanent when you update the parent theme.
Preparing Link Meta Tags
First step is to get all URLs for the resources shown in Google PageSpeed. Normally, you will see the end portion of the URLs, hover the mouse over the links to view full URL of the blocking resource. Now, you can copy the URL and paste in a text editor.
You need to use the URLs in the below format to include in the link tag:
<link rel="preload" href="Font URL Showing in PageSpeed" as="font" crossorigin="anonymous">
Prepare link tags for each font resource used by your theme and plugins.
Inserting Link Tags in Header
Next step is to copy all your link tags with preload requests and paste inside the header section of the site. On your WordPress site, you need to paste the link tags in header.php file of the active theme. You can use File Manager app from hosting account or use FTP to edit header.php file and insert code in the header.
- Login to your hosting account using FTP client like FileZilla or locate File Manager app in your hosting account.
- Navigate to “/wp-content/themes/yourtheme” folder and locate header.php file.
- Edit the file and insert the preload code in the header section.
- It will look something like below and remember to insert all request that you see in Google PageSpeed Insights tool.
Alternatively, you can also go to “Appearance > Theme Editor” in your admin dashboard and edit the file. We recommend to use child theme and modify header.php file. If you modify the parent theme file, you need to insert this code manually every time when you update the theme. Alternatively, you can use plugins like Insert Headers and Footers plugin to add the link tags to your site’s header without editing theme files.
Check PageSpeed Again
After inserting the link tag manually or using WP Rocket, ensure to clear the cache on your site. Check back on PageSpeed Insights and now you will not see the preload key requests error.
You can click on “Passed audits” section and check the “Preload key requests” issue is in passed status.
Generally, Google PageSpeed Insights will show the preload error causing many seconds delay in page loading. You can follow the above steps to insert preload links manually or using plugin. This will help you to remove the error from Google PageSpeed and improve the speed score.
Is it possible to exclude any font from the WP-rocket preload?
Very very useful. Thanks for the script. I solved the problem with 3 fonts and the score rise from 59 to 65.
thanks for sharing this great article thnaks alot.
First of all nice article.
I have a different problem.
Pagespeed insgihts has been updated.
Before this update my page score was 100 and i don’t get any errors.
My theme has Load Google Fonts Locally, Preload Local Fonts and Enable CSS Preload.
When i enabled them i still have Preload key requests errors.
with this method i don’t use google fonts options at Autoptimize.
second method that i used is to disable Preload Local Fonts options and
i enable combine and load it with display:swap parameter! at AUtoptimize google font options.
But still i get Preload key requests errors!
I will use your method but i have these links like this KFOmCnqEu92Fr1Mu4mxK.woff2
What do you think?
Hi. I’m using WP Rocket for this, doing it exactly as shown here an on other sites, yet it is not successfully preloading my fonts. This is according to both PageSpeed and GTMetrix. I copied the full url and put in one per line. These are only acceptable fonts (woff2, woff, ttf).
Any ideas what else I can do to make this work?
Your website does not have preload links in the header section. You should provide the relative URL as mentioned in the article and make sure the source code on the browser contains the links in the header.
Probably, you can clear the cache and check.
Thank you for the infos!
it won’t work, because header.php is written in php style, while the code you provide is written in html.
As shown in the screenshot, you can insert HTML inside PHP as long as the PHP opening/closing tags are managed properly.
Very good Information…Increase website Speed
how to do this header plugin ?
I am unable to find header.php in theme files
Thanks for sharing this awesome knowledge.
thanks for the detailed article, solved my preload problem but unable to solve server response time. if you have any suggestion please let me know.
Thanks for the article….It solved my website speed issue.
It work very well for my website thanks for sharing
I have checked the speed of my website and it contained 4 preload key request issues. With the help of this article solved 4 issues present in my website. Now these issues have been moved to Passed audits. But the main querry is that this issue was set but still the speed of my website has not improved. Please suggest us good results to improve the speed of the website.
Same problem as mine
It worked great with my Astra theme! Thank you so much!
Hey, for me it didn’t work. Before using this code format, there were only 3 issues like this but now it has increased to more than 8 when I used this code format. I don’t know what went wrong? Can you please look into this.?
There is no preload errors in Google PageSpeed Insights for your site. It is under “Passed audits” section which means it is already fixed.
I have used it on my website through WP Rocket. But, didn’t get any result. Are there any plugins which will help me to put this on header as i don’t know coding.
Google PageSpeed Insights shows preload key requests under “Passed audits” section for your site. This means the problem is resolved by using WP Rocket.
I managed to reduce my quiz website load time by one second. Thanks very much for your help!
Good to know it helped to solve your issue.
Damn! It improved my site loading by 800ms. The steps to preload font was so easy. Thanks and keep sharing good stuff.
It worked great with my Leto theme! Thank you so much!
Thanks for sharing this, I was having a speed issue with my site but I hope your blog post would help me with it.
Super. Output is came successfully.
Thank you so much for sharing! Managed to quickly fix this issue on my website with this guide.
this was really helpful…. i really appreciate…
hello good what I tried to put in header but I could not put it right ???
First of all thanks for your effort, sharing this intel with us!
I followed your instructions but I’m still getting the same warning from PageSpeed.
this is in the header with signs at the beginning and end
link rel=”preload” href=”https://kutyajo.com/wp-content/themes/storefront/assets/fonts/fa-solid-900.woff2″ as=”font” crossorigin=”anonymous”
this is in the source with signs at the beginning and end
link rel=”preload” href=”https://kutyajo.com/wp-content/themes/storefront/assets/fonts/fa-solid-900.woff2″ as=”font” type=”font/woff2″ crossorigin
I clear all cache (browser, WP, host).
In the source view I found this:
Can you please help me out with this? It eats up about 4-5 seconds.
Thanks in advance.
I never leave comments on blogs but just wanted to say a quick thanks for this article. It solved my issue for one as I manually added the font in the header, but secondly, the article is well written and to the point which is so rare these days. I’m tired of blogs written just for SEO, they’re long and mostly filled with useless crap just to gain some SEO juice. But your article is written just for the user and not really for the search engine which I liked. It was to the point and offered a range of solutions. You’ve won a fan here and I’ll be checking out your other articles. Thanks.
I’ve tryed the option with wp rocket but no luck preloading
Hey, Thanks it worked for me.
I use copy the URL provide by GSI but nothing seem to be changed, and GSI automatically clear the cache without having to clean it up.
Hey, first of all, thanks for your insights. It is not working for me. Can you help?
I have put this in the header of my website. It still gives me the preload warning on the pagespeed report.
Check whether you have inserted properly and the link appears in the source. Also, clear the cache on your website and server side.
We have tested on multiple themes/plugins and it works to remove the warning.
Helped… from 1.4 second to 0.4 second
Nice to see it worked for you.
Thanks for the work, but it is not working for me.
I have several webs and finally i assume it is related to the theme i am using (Generate Press free). I don’t have similar issues with other themes.
For web version the speed value is good enough, but for mobile, it is a mesh. I check it regularly and, with no changes, it could be 65 or 35.
On GeneratePress, this problem should not happen (at least on GP Premium), if you choose System Stack as body font. Select “inherit” for all other font settings.
If you choose Google fonts, then you have to add each font weight and family you choose. In addition, plugins also load fonts that you should check.
In Google PageSpeed, you can get the complete URL of the fonts preload. You need to simply past it in the header link section.
Didn’t work for me. I followed the steps carefully and replaced Font URL Showing in PageSpeed with the error font code no changes.
Clear your cache after updating the files and check in PageSpeed.
It didn’t work for me.
I’ve added the links as instructed, but it made no difference at all.
I can see it in the source, but it doesn’t fix the error.
I even tried putting it directly in the header.php so it will be on top, that didn’t do anything too.
Paste the code in the link tag section of your header.php. As far as we tested, it works fine and Google removed the warnings.
i’ve been trying to do this but it’s so hard. here is what google asked me to preload, i don’t know if its the url format i’m not getting right or what ?
You have to use the complete URL including your domain name. Basically, you can use the URL in browser to open the file.
Hi! This is the last issue I can’t get off my head XD I have this “ET-Bloom.woff?gd6mr8” coming from the E-Mail Marketing integration plugin that is bugging me. I already tried your code, (and some other variations I found) but no one works!! I already checked the code is on the web code.
So… Any ideas? :) Thanks!!
Hi Taisa! I´m having the same issue… could you solve it? And how if so, please??
Thanks in advance!
We don’t see preload errors on your site. After updating header.php, you have to clear the cache on your site and check in Google PageSpeed Insights.
Same issue with this bloom font. Did you have any success – if so how?! Thanks hoping.
Thanks for your time and effort putting this guide together. It’s great.
I have one question.
In Google PageSpeed Insights, these are the two URLs displayed under the Preload key requests section.
As you can see, both refer specifically to a CSS file, as opposed to fonts.
Would your technique still work with these URLs?
How theses were included in the site? The point is any resources loaded using CSS import needs to explicitly declared.
We did not text with CSS, however it should work in the manner.
Awesome. Thanks for the help!
Thanks for sharing this awesome knowledge. I have been able to fix the preload key request error.
Thanks for sharing this amazing post with us