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.
2. Render-blocking resources
By preloading, you can also fix the render-blocking resource warning as assets are loaded in a non-blocking manner.
There are many different resources that can be preloaded. Below are the formats that are supported in the Perfmatters plugin:
font: Font file.
style: CSS stylesheet.
audio: Audio file
document: An HTML document intended to be embedded by a
embed: A resource to be embedded inside an
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
track: WebVTT file.
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.
Click into the Perfmatters plugin settings.
Click on the “Extras” tab and then click “Preloading.”
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.
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.
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.
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 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.