How To Preload Key Requests In WordPress (PageSpeed Insights)

If you ran your site through PageSpeed Insights, you may see a recommendation to preload key requests.

Preload Key Requests

Preloading key requests instructs browsers to download your critical resources as soon as possible. In WordPress, preload is most commonly done with fonts, images, CSS, and JavaScript files. Many speed plugins let you preload links (also called “instant page”) which downloads a page in the background when users hover over a link. These are all examples of preloading.

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:

  • Fonts
  • Links
  • Images
  • CSS files
  • JavaScript files

 

Choose Your Method Of Preloading

Preload Tag – to add preload manually, insert the following code into your header.php file. Replace the font, CSS, JavaScript, image, or other file with your own file you want to preload. If you’re not sure which files you should preload, PageSpeed Insights recommends them for you.

 as='image'>
 as='style'>
 as='script'>
 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.

Preload font - Pre Party Resource Hints

WP Rocket – lets you preload fonts and links in the settings, but not images or other files.

WP Rocket Preload Links Fonts

Perfmatterspremium 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.

Perfmatters Preloading

Autoptimize – preload specific requests in the Extras setting.

Preload key requests - Autoptimize

Asset CleanUp – lets you preload local fonts and external Google Fonts in the main settings. Under bulk changes, you can also preload CSS and JavaScript files (see explanation in image).

Preload local fonts - Asset CleanUp

Preload Google Font Files - Asset CleanUp

Preload Scripts Styles - Asset CleanUp

Preloading CSS JS - Asset CleanUp

SG Optimizer – you can only preload fonts in the Environment Optimization settings.

Fonts Preloading - SG Optimizer

 

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 largest contentful paint image

Preload it and use “image” for the “as” attribute.

Preload largest contentful paint images with Pre Party

Or do it manually:


View your source code to make sure your image(s) are being preloaded.

Preload largest contentful paint image

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.

Preload largest content paint image - Waterfall Test

The PageSpeed Insights recommendation should now be green.

Preload Largest Contentful Paint Image WordPress - Passed Audit

 

Preload Fonts

Copy the recommended font file(s) to preload from PageSpeed Insights.

Preload Key Requests WordPress

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.

Preload Fonts

Or do it manually:

View your source code to make sure fonts are being preloaded.

Preload Fonts

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.

Font preload test GTmetrix Waterfall

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.

Ensure text remains visible during webfont load

 

Preload Links

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.

This will not affect scores in PageSpeed Insights and isn’t even a recommendation. But it is a nifty speed feature which you can enable using WP Rocket, Pefmatters, or even Flying Pages.

Preload Links WP Rocket

 

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.

Preload key request errors

And finally, preloaded key requests should be green in PageSpeed Insights.

Preload Key Requests 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!

Cheers,
Tom

About Tom Dupuis

Tom Dupuis 2017Tom Dupuis writes WordPress speed and SEO tutorials out of his apartment in Denver, Colorado. In his spare time, he plays Rocket League and watches murder documentaries. Read his bio to learn 50 random and disturbing things about him.

Subscribe
Notify of
guest
1 Comment
Newest
Oldest Most Voted
Inline Feedbacks
View all comments