How to Preload Key Requests in WordPress (Fonts, CSS, JS, Images)

preload-key-requests

One of the common issues in Google PageSpeed Insights is “Preload key requests”. In this article I will show you how to fix this issue on a WordPress site, thus improving its performance and user experience.

What is preloading?

Preloading lets you define specific resources (fonts, styles, scripts, images, etc.) that a browser must request earlier without blocking the rendering of your page.

It works this way: when a user visits your website, his browser loads all the resources on that web page in a certain order. By using preloading, you can force browsers to load specific resources early on.

You can preload different resources on your site. However, most common resources that you need to preload are:

  • Fonts (WOFF, TTF, etc.)
  • Styles (CSS)
  • Scripts (JS)
  • Images (PNG, JPEG, etc.)

How to preload resources?

In order to preload resources on your WordPress website you need to use the <link rel="preload"> attribute. You need to add this code, along with your resource location and type in the <head> section of your site.

How to preload fonts?

To preload fonts on your WordPress site, place the <link rel="preload"> attribute along with the location of your font and its type in the <head> section of your site.

Here is an example:

<link rel="preload" href="https://wpindigo.com/fonts/Roboto.woff" as="font" type="font/woff" crossorigin="anonymous">

How to preload CSS files?

To preload CSS files on your WordPress site, place the <link rel="preload"> attribute along with the location of your CSS file and the type of the file in the <head> section of your site.

Here is an example:

<link rel="preload" href="https://wpindigo.com/style.css" as="style">

How to preload JS files?

To preload JS files on your WordPress site, place the <link rel="preload"> attribute along with the location of your JS file and the type of the file in the <head> section of your site.

Here is an example:

<link rel="preload" href="https://wpindigo.com/main.js" as="script">

How to preload images?

To preload images on your WordPress site, place the <link rel="preload"> attribute along with the location of your image file and the type of the file in the <head> section of your site.

Here is an example:

<link rel="preload" href="https://wpindigo.com/images/flower.png" as="image">

How to preload key requests. Step by step instructions:

1. Identify your key requests to preload

Run a speed test in Google PageSpeed Insights and check the Preload key requests section.

PageSpeed Insights preload key requests

2. Prepare the code

Copy the link location for every font or resource and paste it inside your <link rel=”preload”> attribute as explained above.

Let’s say you want to preload two fonts. Here is an example of the code:

<link rel="preload" href="https://wpindigo.com/fonts/Roboto.woff" as="font" type="font/woff" crossorigin="anonymous">

<link rel="preload" href="https://wpindigo.com/fonts/Montserrat.woff" as="font" type="font/woff" crossorigin="anonymous">

3. Paste the code in the <head> section

Paste the code in the <head> section of your site. You can use a WordPress plugin to achieve that.

Insert Headers and Footers is a free plugin that can help you with this task. Simply install it on your website, go to Settings – Insert Headers and Footers and paste the code in the Scripts in Header field. Then, click on Save.

Insert Headers and Footers paste code in head

You can use any other similar plugin or add the code manually, if you know what you’re doing.

Things to consider when preloading resources

  • Preload is a mandatory instruction for the browser, so make sure you only preload resources that you’re actually using on your site. Otherwise, you might end up with wasted requests and extra page size
  • Don’t use too many fonts, as these will slow down your site (especially on mobile devices). Consider using 2 – 4 fonts at most. Also, use web safe fonts when possible.

That’s it guys, you learned how to preload difference resources on your site. I hope you’ll find this article useful. Let me know if you have questions in the comments below.

2 thoughts on “How to Preload Key Requests in WordPress (Fonts, CSS, JS, Images)”

  1. Thank you for such an informative article! I have certain images appearing globally on my site that I would prefer to preload. I am in ASTRA Theme with Child theme. Is there a way around not having to install a plugin to achieve this preloading process, and maybe add a filter to functions.php, if that works? Thanks you.

Leave a Comment

Your email address will not be published. Required fields are marked *