If you ran your site through PageSpeed Insights, you may see a recommendation to preload key requests.
You can preload key requests with code or by using a plugin like Perfmatters or Pre* Party Resource Hints. WP Rocket can preload fonts and links, but doesn’t let you add files manually.
What Does It Mean To Preload Key Requests?
Preload tells the browser to fetch a file sooner than it originally would because that file is important for the page. In WordPress, this can be done with a line of code or by using a plugin.
Google says preloading is best suited for resources typically discovered late by the browser. Preloading images, fonts, and links are most common (especially in many WordPress speed plugins). But you can also preload links, documents, objects, workers, videos, and more. By preloading these important resources, you might also improve your largest contentful paint!
Common types of files to preload:
- CSS files
Choose Your Method Of Preloading
<link rel='preload' href='/image.png' as='image'> <link rel='preload' href='/style.css' as='style'> <link rel='preload' href='/script.js' as='script'> <link rel='preload' href='/font.woff2' as='font' crossorigin>
Pre* Party Resource Hints – supports preload, prefetch, preconnect, and prerender. It’s free if you don’t want to pay for Perfmatters or want to preload more than fonts/links in WP Rocket.
WP Rocket – lets you preload fonts and links in the settings, but not images or other files.
Perfmatters – premium plugin by Kinsta with preload, preconnect, and prefetch options. You can find these in the Perfmatters settings → Extras → Preloading. Also a great plugin for bloat removal and unloading assets (selective plugin disabling) and what I currently use on my site. If the CDN Rewrite setting is enabled where a CDN is rewriting assets to be served from your CDN, make sure preloaded resources are rewritten properly. Otherwise, it might cause errors.
Autoptimize – preload specific requests in the Extras setting.
SG Optimizer – you can only preload fonts in the Environment Optimization settings.
Preload Your Largest Contentful Paint Image
One of the best ways to improve your largest contentful paint (LCP) is to preload your largest contentful paint image.
If you load a background image across your WordPress site, this will usually be your largest contentful paint image. Mine is below. It’s a good idea to preload your LCP image as well as your logo, since they both load across your site and appear above the fold, so they should load ASAP.
Copy the URL of your background image (found in your media library or source code).
Preload it and use “image” for the “as” attribute.
Or do it manually:
<link rel='preload' href='https://onlinemediamasters.com/wp-content/ uploads/2020/03/about-banner.png' as='image'>
View your source code to make sure your image(s) are being preloaded.
Retest your site and check if your LCP or other scores have improved. Pay special attention to the “Images” section of your waterfall chart where you can compare the images you preloaded.
The PageSpeed Insights recommendation should now be green.
Copy the recommended font file(s) to preload from PageSpeed Insights.
Preload the font. Below is an example of preloading fonts in WP Rocket. If using another plugin, make sure you’re using “font” for the “as” attribute and always use crossorigin when preloading fonts. As far as preloading is concerned, crossorigin is usually only used when preloading fonts.
Or do it manually:
<link rel='preload' href='https://onlinemediamasters.com/wp-content /themes/omm2021/fonts/exo-2-v9-latin-regular.woff2' as='font' crossorigin>
View your source code to make sure fonts are being preloaded.
Recheck the file’s load time in your GTmetrix Waterfall chart to make sure preloading made a positive impact. The “Preload Key Requests” item should also be green in PageSpeed Insights.
If you see an error for “ensure text remains visible during webfont load,” it’s likely because you’re preloading a font that shouldn’t be preloaded.
Preloading links downloads the page in the background when users hover over a link, so by the time they click it, the page downloads almost instantly.
Check For Preload Errors
Check for preload errors in the Console section of Chrome Dev Tools.
In this example, I didn’t specify my logo as an “image” and I preloaded a font that wasn’t being used. Check for errors on multiple pages especially if you’re using multiple fonts on your site.
And finally, preloaded key requests should be green in PageSpeed Insights.
Frequently Asked Questions
How do I preload key requests in WordPress?
Choose a plugin to preload key requests or add the preload tag to your header.php file. You can preload fonts, images, and other files to load them early and potentially improve scores in testing tools.
How do I preload key requests in WP Rocket?
Go to your WP Rocket Preload settings, then preload fonts and links. You can find your font files in your GTmetrix Waterfall chart. Preloading links downloads a page in the background when users hover over a link.
How do I preload key requests in Autoptimize?
Go to Autoptimize > Settings > Extra > Preload specific requests. Add the URLs of the file(s) you want to preload.
How do I preload fonts in Elementor?
Find the fonts files loading on your site then preload them using a plugin (WP Rocket, Pre* Party, AssetCleanUp, Perfmatters, or WP Optimize). Or, you can preload fonts manually by adding the preload tag to your header.php file.
How do I preload key requests in LiteSpeed Cache?
LIteSpeed Cache only lets you preload links, not fonts, images, and other files. You will need to add a preload tag to your header.php file or use an alternative plugins like Pre* Party Resource Hints.
How do I preload key requests with W3 Total Cache?
W3 Total Cache does not have an option for preloading at the moment.
Which WordPress plugins can preload key requests?
The following plugins allow preloading: WP Rocket, LiteSpeed Cache, Autoptimize, Pre* Party Resource Hints, Asset CleanUp, and Perfmatters.
That’s it for this one!