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. 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 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');">