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.
2. Render-blocking resources
By preloading, you can also fix the render-blocking resource warning as assets are loaded in a non-blocking manner.
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 filedocument: 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.
Step 2
Click on the “Extras” tab and then click “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.
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.