Use code PERFMATTERS for an extra 10% off!

How to preload a resource in WordPress

Preload allows you to specify resources (such as fonts, images, JavaScript, and CSS) that are needed right away or very soon during a page load. A link rel tag is added toward the top of the <head> </head> section on every page of your site.

<link rel='preload' href='font.woff2' as='font' type='font/woff2' crossorigin>

This helps fix the following two types of warnings:

1. Preload key requests

Preload key requests is a common warning with web fonts. Font Awesome is a very common one you might see show up.

Preload key requests
Preload key requests

2. Render-blocking resources

By preloading, you can also fix the render-blocking resource warning as assets are loaded in a non-blocking manner.

Eliminate render-blocking resources

Preloadable resources

There are many different resources that can be preloaded. Below are the formats that are supported in the Perfmatters plugin:

Common resources

  • font: Font file.
  • script: JavaScript file.
  • style: CSS stylesheet.

Additional resources

  • audio: Audio file
  • document: An HTML document intended to be embedded by a <frame> or <iframe>.
  • embed: A resource to be embedded inside an <embed> element.
  • fetch: Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer or JSON file.
  • image: Image file (.jpg, .png, .webp).
  • object: A resource to be embedded inside an <object> element.
  • track: WebVTT file.
  • worker: A JavaScript web worker or shared worker.
  • video: Video file.

Implement preload in WordPress

Preload is supported by all modern browsers, with the exception of Internet Explorer (Microsoft Edge supports it) and Opera Mini. Note: Preload was added to Firefox in version 85.

To preload a resource, follow the steps below.

Step 1

Click into the Perfmatters plugin settings.

Perfmatters plugin settings
Perfmatters plugin settings

Step 2

Under the “Options” tab, click on the “Preloading” sub-navigation menu.

Perfmatters preloading
Perfmatters preloading

Step 3

Under “Preload” enter in the location of your resource (font, image, CSS, JavaScript, etc.) This should be the full URL. Example: https://domain.com/style.css.

Then select the type of resource it is (as='type') and whether or not it needs to use crossorigin. Note: Web fonts and font icons should use the CrossOrigin option.

Preload resource in WordPress
Preload resource in WordPress

Preloading by device

By default, it will preload the resource on all devices. However, you can choose desktop or mobile if needed. To use mobile preloads, you’ll need to ensure you have separate mobile caching enabled:

  • If you’re using Cloudflare APO, you can enable cache by device type. 
  • Most hosting providers with server-level cache already have separate caching buckets for devices in place, which means you don’t need to do anything.
  • If you’re using a caching plugin like WP Rocket or Cache Enabler, many have a separate mobile cache option.

Preloading location

You can also set a location. Perhaps you need to preload an image just on your homepage, but nowhere else. Remember, preload will forcefully load the resource regardless, so you don’t want to preload something that isn’t needed. Use blog if your homepage is a blog feed. Otherwise, add the post ID. You can add multiple locations, comma-separated.

Note: If you have two different physical pages in WordPress that switch based on desktop or mobile, you’ll most likely need to use the post ID of your desktop homepage but then select “mobile” for the device.

Step 4

Scroll down and click “Save Changes.”

Note: If you are having problems seeing your changes show up in a performance testing tool, make sure to clear your URL or site’s cache before testing it.

How to filter preloads

You can use the perfmatters_preloads filter to manipulate your preloads. For example, you could remove a specific preload from printing.

add_filter('perfmatters_preloads', function($preloads) {
   foreach($preloads as $key => $preload) {    
     if($preload['url'] == 'https://example.com/style.css') {
       //custom code
       unset($preloads[$key]);
     }
   }
   return $preloads;
 });

Things to keep in mind when preloading

  • Don’t preload every script or it will actually cause performance issues. Preloading should only be used for resources that are needed immediately, so they are loaded in a non-blocking manner. Typically this used for web fonts, CSS, and JS.
  • If you’re using cache-busting techniques (such as query strings domain.com/style.css?ver=1.0), don’t forget that browsers see exact URLs. So you will need to use the query string URL.
  • If you have a CDN rewriting your asset’s URLs, ensure that all the resources you want to preload are first getting rewritten properly. If the URLs don’t match up, you could end up loading a resource twice.
  • If you preload a stylesheet (CSS) or script (JS) and you’re using a plugin to combine your CSS/JSS (Autoptimize, WP Rocket, etc.), make sure to exclude the resource your preloading from the concatenation process. Otherwise, it could get wrapped up twice and end up putting more code on your site.

Was this article helpful?

Yes No

Related Articles