Use code PERFMATTERS for an extra 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. 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.
  • 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

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 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 it’s a CSS stylesheet, you might also try the alternative CSS preload method below.

Alternative CSS preload method

If you’re having issues with CSS stylesheets loading twice when trying to preload them, try using the alternative method below. Simply add the code in the header section in Perfmatters. Remember to also remove the stylesheet from the preload section.

<link rel="preload" href="https://domain.com/style.css" as="style" onload="this.rel='stylesheet';this.removeAttribute('onload');">

Was this article helpful?

Yes No

Related Articles