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 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.
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. Fonts use CrossOrigin.
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.