Preload, Preconnect, Prefetch: Improve Your Site's Performance with Resource Hints

Modern web browsers use all sorts of different techniques to improve the overall performance of your website - from prioritizing the most important resources and fetching them first to guessing which page the user will visit next.

However, you shouldn’t rely on browsers, as advanced as they might be, to take all of the decisions with your site’s performance.

As a website owner, you are the one who knows which resources are most crucial and what the actual user journey on your site is. And to improve the overall performance, perceived speed, and user experience of your website, you could use that knowledge to help the browsers load your pages faster. 

That’s where the resource hints come in. 

In the following lines, we’ll take a look at them and how to utilize their advantages in the best way possible.

Let’s dive into it.

How Browsers Work (In a Nutshell)

To better understand the resource hints and where they are applicable, let’s take a quick look at how browsers actually load content. 

We could divide the whole process of a browser loading a page into three steps:

• Establishing connection;
• Downloading, parsing, and rendering the code;
• Making the page interactive;

During the first stage, the browser needs to establish a connection with the server in order to download the resources. That includes looking up the domain name and resolving it to an IP address, setting up a connection to the server, and encrypting the connection for security.

Once everything is done, the browser can proceed with downloading and parsing the information, constructing the Document Object Model (DOM) and CSS Object Model (CSSOM), and then rendering the content.

The last part is to make the page interactive. All of the processes mentioned above take place in the main thread. So after the browser’s main thread is done with parsing, rendering, and painting the page, it’s time to take care of deferred JavaScript files to make the page available for scrolling, touch, and other interactions.

In a nutshell, that is the behind-the-scenes process every time a page is loaded. 

Let’s see how you can positively impact each of these stages by integrating the resource hints.

Resource Hints: Prefetch, Preconnect, Preload

As the name suggests, resource hints are hints or instructions that tell the browser how it should handle specific resources or web pages. In other words, this set of instructions allows you to assist the browser in prioritizing origins or resources which need to be fetched and rendered.

All the resource hints use the rel attribute of the link element that you’ll find in the head of your HTML documents.

Integrating those HTML code snippets on your website will allow the browser to start loading the selected files sooner than if the browser finds them through the normal course of loading the page.

And now that the basics are behind us let’s move on to the part you are here for - overview of the resource hints, their benefits, and when to use them.

Prefetch

link rel=prefetch is a low priority resource hint that allows the browser to fetch resources that might be needed later and store them in the browser's cache. 

Because prefetch sets a very low priority, don’t use this hint for files of high importance. 

One of the great use cases is utilizing prefetch to improve subsequent pages’ load time. For instance, you can apply the prefetch directive during the authentication of a user. This way, you can take advantage of the time it takes them to input their credentials to preload the resources needed for the page they will see next.

By anticipating your visitors’ steps on your site and prefetching the resources, you can improve metrics like First Contentful Paint and Time to Interactive. Something that Netflix did and reduced their Time to Interactive by 30%.

Everything we mentioned up until this point relates to prefetching, also known as link prefetching. But there are two other types of prefetching that are equally important, and we have to mention:

1. DNS Prefetching
The browser needs to perform a DNS lookup to convert a hostname (the URL) to an IP address before connecting to the host (origin server). 

Although this usually takes only milliseconds, if a website loads files from a third-party domain name, something that most websites do, the browser has to perform a DNS lookup for each domain. Some sites (e.g., news websites) use a lot of external resources, which means that there might be dozens of DNS lookups required per page.

In these cases, using the dns-prefetch hint might save a few milliseconds as the instruction tells the browser to start that process right away, rather than as the need is discovered later in the loading process.

As suggested in the Web Almanac 2021, a good practice is to combine dns-prefetch with the preconnect hint for optimal results. You can see why in the section where we talk about preconnect.

2. Prerendering
Prerendering is very similar to prefetching in that it optimizes resources which the user may navigate to next. The difference is that prerender actually renders the entire page instead of specific resources. 

Preconnect

Like dns-prefetch, the preconnect directive helps the browser establish early connections before sending an initial request to the server.

However, the preconnect hint takes it a step further. While it performs DNS lookups, it also includes TLS negotiations and TCP handshakes. This, in turn, eliminates round trip latency and saves even more time.

But here comes the question:

If preconnect does everything dns-prefetch does, and above, why would I use dns-prefetch in the first place? 

In most cases, preconnect is the preferable option to dns-prefetch, but the problem is preconnect isn’t supported by some browsers:

Source: caniuse.com

The good thing is that you can use them together to get the most out of them. You can benefit from preconnect in browsers that support it with a fallback to dns-prefetch:

According to Google:

 

Back in 2019, Chrome managed to improve their Time To Interactive by almost 1s by preconnecting to important origins.

Preload 

Before explaining how the preload directive works, we have to make something clear. 

Although preload is regularly mentioned as a “Resource Hint,” it is not. Preload is a declarative fetch, and it’s mandatory for the browsers, making it more of a command rather than a hint.

That being said, preload is used to force the browser to download a resource sooner than the browser would discover it because it is crucial for the page.

The preload directive works best on resources that are part of the critical rendering path but are not easily discovered by the browser. For instance, fonts, CSS, or critical JavaScript. 

Another difference from the dns-prefetch and preconnect hints is that while they only need the rel and href attributes, preload is more complicated. You have to add the as attribute, which indicates the resource’s content type you want to preload.

According to Addy Osmani, an engineering manager at Google, supplying an as attribute when preloading is mandatory:

Here’s a complete list of as values that you can specify:

Including the as attribute helps the browser set the priority of the prefetched resource according to its type and determine whether the resource already exists in the cache. 

Check out the Chrome Resource Priorities and Scheduling document to learn more about how the different resource types are prioritized.

For some resources, such as fonts, you have to include the crossorigin attribute as well. 

The crossorigin attribute sets the mode of the request to an HTTP CORS Request. CORS (Cross-Origin Resource Sharing) is a mechanism that allows a server to indicate any origins other than its own from which a browser should permit loading resources. We won’t dive deeper into this as it’s not the focus of this article, but you can find more information here.

And similar to the as attribute, preloading fonts without crossorigin will double fetch. Here’s another excerpt from Addy Osmani’s article on the topic:

Test your site with NitroPack and see how fast your site could be →

More Resource Hints, More Problems

Reading everything up until now, you might start thinking that using as many resource hints as possible would only lead to the browsers loading your pages lightning fast. 

Unfortunately, this is not the case.

Here are some of the setbacks you should take into account when integrating the resource hints:

1. Prefetch might increase the data consumption

Although prefetch sets a low download priority, that doesn’t mean that it is harmless. Its use might increase data consumption on your site, which can present issues both for you (increased traffic on your server), and your users (unnecessary over-consumption of resources). In addition, you can end up loading extra bytes that might not be used eventually. So think twice before integrating it.

 

2. Prerender can cause bandwidth waste

The gamble with prerender is even greater than prefetch, as you download entire pages in advance. This makes the hint resource-heavy and can cause bandwidth waste, especially on mobile devices. And the worst part is that users might not even see the effect of the hint if they do not request the page.

 

3. Preconnect could lead to extra CPU usage

Although preconnect is a hint with low priority, it may still harm the performance of your website. If an established connection is not used quickly (within 10 seconds on Chrome), then the preconnect directive only adds extra CPU usage, and it would automatically be closed by the browser. Additionally, you should use preconnect sparingly as the size of the encryption certificates is around 3 KB, which would be competing with bandwidth for other important resources.

4. Preload overrides the priorities set by the browser’s analyzer

preload is a powerful instruction since it allows you to make the browser immediately download a resource. However, modern web browsers are pretty good at prioritizing resources, so the excessive usage of preload might lead to negative results. For instance, If you add a preload directive matching an asynced resource URL, the browser will fetch it faster, so it will parse it faster, nullifying the effect of your async attribute by interrupting the main thread very early in the page load. 

Recap

We’ve covered a lot of ground in this article, so let’s do a quick recap of the most essential points:

• dns-prefetch and preconnect are used to prioritize domain names (e.g., https://example.com).
• prefetch and preload are used to prioritize the loading of resources. While prefetch is used for improving the load time of subsequent pages, preload works best on critical resources for the current page.
• prerender references an entire page (e.g., blog.html).
• prefetch, prerender, and preconnect are resource hints, and they are executed as the browser sees fit. The preload directive is a command which is mandatory for the browsers.
• When using preload, don’t forget to supply the as and crossorigin attributes to avoid double fetch.
• Although the resource hints are low-priority instructions, they still pose a threat to your site’s performance. Use them in moderation and only when necessary. 
• preload is a powerful directive that can override the browser’s analyzer’s priorities. Don’t forget that modern browsers are pretty good at prioritizing resources, so use the preload “hint” sparingly.

Use the newly acquired knowledge about the resource hints to speed up the delivery of content and assets and improve your site’s overall performance. And don’t forget to test your website in the real world (focus on field data) every time you make a change.