How to Resolve “Preload Key Requests” in Google’s Lighthouse Report
The Problem
The solution to this problem address issues in the critical request chain which can have significant impacts on site speed. This problem highlights several issues that are similar to a previous article we did about pre-connecting origins. The main difference here is that instead of just telling the browser to connect to servers right away (as opposed to waiting till it’s needed, thus slowing down the rendering of the resource) we will tell the browser to actually download the file because we are CERTAIN that the file will be used.
When auditing our own website (Strunk Media), we found one file that was often causing a slight delay in loading and it was shown in the report as so:
The Solution
To rectify this problem, we will use a preload browser hint. The syntax would look like this:
<link rel='preload' href="https://www.strunkmedia.com/wp-content/plugins/Ultimate_VC_Addons/assets/css/fonts/ult-silk.woff" as="font" type="font/woff" crossorigin>
After implementing this simple line of code in the <head> section of the site, we have achieved a passing audit!
UPDATE – 12/03/2019
For those who are continuing to struggle with passing this Lighthouse audit, there has been a known bug in their system that is reporting false positives. Many of you are probably preconnecting properly but still see an error, particularly with .woff files.
You can find more details about the Lighthouse Bug here.
Hi, there! Thank you so much for your help on this! I’m trying to implement this on my own site, but must be getting it wrong. Where did you get the plugins/Ultimate_VC…stuff from? I’ve tried to multiple ways and can’t land on what the code should be. Thanks!
That plugin is called Visual Composer I believe, but shouldn’t affect the preloading. Replace the url with whatever file you want to preload and add the code to the ‘head’ BEFORE that file is used.
Hi
May I ask to which file in the wordpress file manager do you apply that code please?
Well it depends on the theme, but the code should be in the ‘head’ section.
You post here was exacyly what I was looking for. Fixed my issue with plugin font! Thanks so much!
Excellent!
We need to just copy paste the above code or have to download some plugin for that. I am unable to fix this problem. Please help me in this regard.
Hi this is a great article, I am struggling with a css file sheet that needs preloading I have put the code in my header and changed the type to stylesheet but still says the problem in google insights even after clearing cache
Did you also change/include
as="style"?Hi sorry for the late reply, Yes I changed it to “style” but still have had no luck. I am running wp rocket on my site and was wondering would the css file optimisation be causing this issue at all? I’m pretty stuck
I would have to see the code you implemented and where it’s posted. You can email me if you’d like.
Simple question, where would I find your email? if I click on your name or picture it goes to posts archive.
regards
devin at strunkmedia.com
This is the code I have implemented just below the tag of my site.
I have tried it with and without the crossorigin with no luck
Sorry our system currently scrubs code from comments so I can’t see what you probably posted. But I left my email above.
Thanks, I have dropped you an email with the information you requested
Hey
Thank you for the help. My pagespeed insight is showing me the same issue, and this appears
fonts/egfont.woff?85610117
could you please tell me what code should i put in my header section?
Hi Zac, if you tried using the same code format as referenced in the article, you may have an issue due to the parameter attached to the url which I assume changes?… But I’m not sure how frequently. Do you know?
Hi, Devin, I am also getting the same error. the URL link is
icomoon-arrows-carousel-32×32.ttf?satvtg
something like that and the parameter also not changing and also I have added preload link in my head section( in header-single.php) but it’s not working can you help me with that
Hi Devin,
I’m wondering that is it possible to use in Wix?
Hi Ming, Wix is generally a disaster. I don’t think you can add this type of functionality on your own. I would recommend switching to a more open-source solution.
Hey Devin, thanks for keeping this thread alive! I’m trying to input this code to my site, but the theme is entirely in php. There isn’t any html files at all. I can’t find anything online that addresses the issue. Any suggestions?
Hi Ev, could you provide me with your URL? Feel free to email me as well.
https://www.strunkmedia.com/team/
Hello Devin,
I’m not having any success getting pagespeed insights to recognise the preload request
fonts/egfont.woff?85610117 is the issue – I have added preload requests into the header for the file with & without the parameter (which doesn’t change), I can see it when viewing source – and pagepseed insights still tells me I need to preload the link – aarrgghh.
Any advise would be gratefully received!!
Hi sir i need to add a preload request in my wordpress website but i am not a developer so please provide me the proper code of preload key request my website is http://www.oscarpackersmovers.com please help me and give me code and let me know where to put that code. This is what google lighthouse suggested to me :- Please help me ..
Consider using to prioritize fetching resources that are currently requested later in page load. Learn more.
URL
Potential Savings
…webfonts/fa-regular-400.woff2(oscarpackersmovers.com)
3,530 ms
…webfonts/fa-brands-400.woff2(oscarpackersmovers.com)
1,790 ms
…webfonts/fa-solid-900.woff2(oscarpackersmovers.com)
1,130 ms
when use fonts on css file , then how to solve this issue ?
hi, I have same issue, pre load with ultimate vc same font. as u mentioned the code. its totaly similiar to my situation. I used it as it is.
but there’s no effect on my website.
please help me?