Lighthouse: Preload key requests
<link rel="preload"> can help you prioritize important requests, resulting in a faster page load.
This is because key resources may sometimes be requested late in the page load process and the browser wouldn't know of their existence until it discovers them in the request chain.
How does your site score on this audit?
How does preloading key requests affect page performance?
When a page loads, the browser must download and parse the HTML in order to fetch the resources needed for the page content. Some late-loading resources (i.e., third-level requests) may be cascaded or called from within other requests while others may simply be large - both instances impact your page performance.
preload tells the browser to fetch the resource sooner than it would, otherwise, discover on its own, because you are certain that the resource is an important one.
This results in an extended critical request chain.
Moreover, executing large, late requests in the critical request chain could involve significant time delays; hence, using
<link rel="preload"> can drastically speed up page loads in both the above cases.
Preload is useful in more than one way
<link rel="preload"> in your HTML header and specifying the resource type using the
as attribute also tells the browser to cache these preloaded resources so that they are immediately available on subsequent visits.
preload also gives you more control over the page load process, allowing scripts to be downloaded beforehand, but executed later. This prevents the scripts from blocking the main-thread at critical phases of the page load, enabling your users to interact faster with the page.
How does GTmetrix trigger this audit?
GTmetrix assesses your critical request chain and identifies the third-level requests that aren't being preloaded. GTmetrix then displays the estimated time savings that could be achieved by preloading these requests.
This audit's impact score depends on the estimated time savings.
How to fix this audit?
1) Preloading scripts
<link rel="preload" href="script.js" as="script">
2) Preloading stylesheets
To preload stylesheets, add the following link tag to your HTML header.
<link rel="preload" href="stylesheet.css" as="style">
where "stylesheet.css" is the URL of the stylesheet being preloaded.
3) Preloading fonts
To preload fonts (including web fonts), add the following link tag to your HTML header.
<link rel="preload" href="fontname" as="font" type="font/format" crossorigin>
where "fontname" is the URL of the font being preloaded and format is the respective font's format (i.e., ttf, woff, woff2, etc.).
The as attribute specifies the type of content being preloaded (e.g., video, image, script, stylesheet, etc.).
4) For WordPress (or other CMS) Users
WordPress (or other CMS) users can use plugins to preload certain file types like stylesheets, fonts, etc.
For example, WP Rocket will preload CSS files when you enable the Optimize CSS delivery option in the File Optimization settings.
You can also specify self-hosted fonts to preload in the Preload settings. Read our detailed WordPress optimization using WP Rocket guide to learn more on preloading page assets.