Use the code PERFMATTERS for 10% off!

How to preload a resource in WordPress

Preload allows you to specify resources (such as fonts, 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.

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.
  • 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 most modern browsers, with the exception of Internet Explorer (Microsoft Edge supports it), Firefox, and Opera Mini. Note: Preload is coming to Firefox very soon (MDN web docs, bug 1639607).

To preload a resource, follow the steps below.

Step 1

Click into the Perfmatters plugin settings.

Perfmatters plugin settings
Perfmatters plugin settings

Step 2

Click on the “Extras” tab and then click “Preloading.”

Perfmatters preloading
Perfmatters preloading

Step 3

Under “Preload” enter in the location of your resource (font, CSS, JavaScript, etc.) This can be a relative path or you can add 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. Fonts use CrossOrigin.

Preload resource in WordPress
Preload resource in WordPress

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.

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 either use the query string URL to preload it or remove query strings.
  • 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.

Was this article helpful?

Related Articles