Preload, Preconnect, and Prefetch: How to Make a Website Faster

Índice: mostrar

Resource preloading involves initiating the download of web resources that a user is likely to use before they interact with the page. When done correctly, this practice allows us to load the most important resources first, enabling a faster load time for our pages.

To summarise the three most well-known types of preloading:

Preload: Used to preload critical resources immediately, which will be used on the current page.
Preconnect: Used to preload resources from external websites, allowing the user to acquire the necessary information from those sites before using their files.
Prefetch: Used to preload specific resources that are likely to be used on subsequent pages.

Let's explore the characteristics of each of these practices and their implementation in more detail.

Preload

This HTML attribute for the <link> tag allows us to request critical resources (or those we prioritise) in advance, speeding up the loading process.

This attribute helps prioritise the loading of certain resources. For example, on our website, we may want fonts to load before the entire stylesheet, ensuring that our text does not initially appear in a default font, only to change once the entire stylesheet has loaded.

To achieve this, we use the preload attribute. This way, the browser loads the fonts first and then (or simultaneously, as fonts are usually lightweight) loads the stylesheet, preventing the page from displaying with a default font until the stylesheet has fully loaded.

On this website, you can see an example of preload:

As we can see, the second element to load (after the HTML) is the fonts, thus avoiding the previously mentioned issue.

This attribute is implemented as follows:
<link rel='preload' href='https://carlos.sanchezdonate.com/wp-content/themes/sanchezdonate/core/fonts/fonts.css' as="style"/>

Within the <link> tag, the preload attribute is included. In href, we specify the link to download, and finally, in the as attribute, we specify the type of document to preload (in our case, stylesheet, because it is a stylesheet).

Subsequently, we will need to load the same file using rel="stylesheet" in this case, as this is how we load the CSS.

Preload is compatible with all modern browsers. Unlike preconnect and prefetch, which execute based on the browser's discretion, the preload attribute makes this preloading 100% mandatory. Therefore, it's important to use this attribute sparingly, as browsers are generally good at prioritising resources, and if everything is important, nothing is important.

If you create a preload that doesn't load subsequently, you'll see this error message:

To work correctly, preloading should always precede loading, with the same element (including parameters) being called.

Preconnect

When the browser loads a webpage, it is essentially requesting a series of resources from the server. To make this request, it logically needs to establish a secure connection with the server.

To establish this secure connection, the browser needs to perform certain checks (domain name, IP, encrypt the connection...), and depending on the network speed, these connections can take varying amounts of time.

This is where the preconnect attribute comes in. This attribute allows us to tell the browser that a page intends to connect to another domain and wants the process to start as soon as possible. Resources will load faster because the setup process is already done when the browser requests them.

In other words, the browser connects to the domain before it is asked to load the page so that when we request the resource, the secure connection is already established.

To load a page from our website using the preconnect attribute, we only need to enter the URL with the following attribute:
<link rel="preconnect" href="https://fonts.gstatic.com">

A common example of use is to load images from a CDN, as we often know that our website will request a resource from the CDN, but we may not know the exact URL (CDN URLs are variable for verification purposes, for example).

Crossorigin

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Crossorigin is an attribute that, far from simply indicating "this connection goes to a different domain", actually tells the browser that "the resources from the specified connection are downloaded using CORS".

Following a query on Stackoverflow, an interesting article on this topic was published on Michael Crenshaw's website, where he explains the various checks he performed to see what was most effective in each case.

DNS Prefetch

DNS-prefetch is a way of resolving domain names before they are required. Let's say it's a lighter form of preconnect.

It allows the browser to perform DNS resolution of a domain in the background before the resource is actually needed. This can reduce load times by reducing the time it takes to resolve the domain name when the resource is requested.

Here's a dns-prefetch:
<link rel="dns-prefetch" href="https://fonts.googleapis.com/">
This process includes DNS resolution, establishing a TCP connection, and improving TLS. This, in combination, will reduce the perceived latency of cross-origin requests.

If the website needs to connect to too many external pages, preconnecting them all can be counterproductive. Preconnect should only be used for the most critical connections, while dns-prefetch can be used more often as it simply saves DNS lookup time.

The difference between preconnect and dns-prefetch is that preconnect allows the browser to establish network connections (DNS, TCP, and optionally TLS) ahead of time, before a resource is requested. This includes DNS resolution, opening a TCP connection, and performing the TLS handshake (if necessary). The preconnect is more comprehensive than dns-prefetch because it prepares the entire connection chain, not just DNS resolution.

Can dns-prefetch and preconnect be combined?

Although preconnect also includes DNS resolution and could be considered more complete since it does everything that dns-prefetch does and more, it can make sense to combine them, but for different resources.

Since browsers limit the number of "preconnects" they perform due to the resource cost when loading a page (it's more comprehensive, so it does more things, doing more implies affecting the load more). Preconnect should be used for the most critical resources.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="dns-prefetch" href="https://fonts.googleapis.com/">

DNS-Prefetch and preconnect for the same domain

While the idea of using dns-prefetch as a sort of "backup" may have some merit in theory, in practice, it can lead to unnecessary overhead and less efficient resource management both in the browser and on the server, especially if overused.

It is more effective to use preconnect for domains where full connections will be imminently required, and dns-prefetch for those less urgent but will eventually need to load.

Prefetch

While the preconnect attribute preloads specific documents or files on the current page, the prefetch attribute allows us to preload the next pages or documents that we anticipate the user will need.

Prefetch requests the browser to download the resource and store it in the background cache with low priority. This way, it does not interfere with the loading of important resources.
The browser does nothing with the prefetched element once it is downloaded. Scripts are not executed, and stylesheets are not applied; they are only cached so that when those resources are needed on another page, they are instantly available.

For example, if we are on page 1 of our blog, we may assume that the user is likely to proceed to page 2, so it may be advantageous for the browser to start loading page 2 of our blog. In this case, we would include a link to page 2 of the blog with the prefetch attribute to speed up the loading of this page and reduce load time.

To implement prefetch, use the attribute as follows:
<link rel="prefetch" href="/example.css" as="style">

Warning: Regarding resource preloading (preload, preconnect, and prefetch), we must bear in mind that overuse of this type of loading can delay the load time of other necessary resources. Therefore, we should use this type of loading sparingly.

The AS Attribute

As you can see in the link tag, when I use preload or prefetch, I include an attribute called as. In these cases, it is a necessary attribute for matching requests, for security policy, and for correct configuration of the "accept request header". Additionally, in preload, as is used as a signal for prioritisation.

Early Hints

Early Hints are a form of resource preloading through the server, developed by Google, Shopify, and Cloudflare. Although it is currently only compatible with Google Chrome.

DeveloperChrome.com

If you want to learn more about this method of resource preloading, I recently wrote a post about Early Hints in more detail.

Attributes Not Recommended

Techniques like prerender or subresource have very limited support and are not recommended for use.

Page Preloading Plugins

Preloading Pages Before the User Clicks

These plugins are used to preload pages before the user clicks on a link. While this may not be directly reflected in a Website Speed Test, this is completely normal. This technique only improves the speed of the website when clicking from a link where it has been implemented and does not affect the first load speed of a website.

This type of technique is also applied in JavaScript frameworks depending on their rendering.

Resource Preloading