Lighthouse: Preload key requests

Overview

Using <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 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.

For example, resources like fonts and images could be pointed to from inside the CSS. Similarly, JavaScript could request other resources like JSON, imported scripts, or web workers.

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

Adding <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?

Make a note of the requests flagged by GTmetrix and add link tags to your HTML header, depending on the type of request (e.g., Stylesheet, JavaScript, font, etc.).

1) Preloading scripts

To preload JavaScript files, add the following link tag to your HTML header.

<link rel="preload" href="script.js" as="script">

where "script.js" is the URL of the JavaScript file being preloaded.

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.).

Click here for a list of all possible values.

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.