There is many ways to improve web performance. One of them is preloading content that will be needed later. CSS pre-processing, full page pre-rendering or domain name resolution. We do everything in advance, and then instantly display the result! Sounds cool.

What’s even cooler is that it’s very simply implemented. Five tags give the browser a command to perform preliminary actions:

<link rel="prefetch" href="/en/style.css" as="style" />
<link rel="preload" href="/en/style.css" as="style" />

<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />

<link rel="prerender" href="https://example.com/about.html" />

Let's briefly explain what they do and when to use them.

Jump to: preload · prefetch · preconnect · dns-prefetch · prerender

preload

<link rel= "preload"> tells the browser to load and cache a resource (such as a script or stylesheet) as soon as possible. This is useful when a resource is needed a few seconds after the page loads - and you want to speed up the process.

The browser does nothing with the resource after loading. Scripts are not executed, style sheets are not applied. The resource is simply cached and immediately made available upon request.

Syntax

<link rel="preload" href="/en/style.css" as="style" />

href points to the resource you want to download.

as can be anything that can be downloaded in the browser:

style for style sheets,
script for scripts,
font for fonts,
fetch for resources loaded using fetch() or XMLHttpRequest,
see full list on MDN.

It is important to specify the attribute as – this helps the browser to properly prioritize and schedule downloads.

When to use

Use preloading when the resource is needed in the very near future. For example:

Non-standard fonts from an external file:
```

<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
By default comic-sans.woff2 will start loading only after downloading and parsing index.css. To avoid waiting so long, you can download the font earlier using <link rel= "preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```

If you separate your styles according to the approach CSS Critical into two parts, critical (for immediate rendering) and non-critical:

<style>
/* Inlined critical styles */
</style>

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

With this approach, non-critical styles will only start loading when JavaScript runs, which can happen a few seconds after rendering. Instead of waiting JS use <link rel= "preload">to start downloading earlier:

<style>
/* Inlined critical styles */
</style>

<link rel="preload" href="/en/app/non-critical.css" as="style" />

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

Don't overuse preloading. If you load everything in a row, the site will not magically speed up; on the contrary, it will prevent the browser from planning its work correctly.

Not to be confused with prefetching. Do not use <link rel= "preload">, if you don't need the resource immediately after the page loads. If you need it later, for example for the next page, then use <link rel= "prefetch">.

Details

This is a required tag to be executed by the browser (if it supports it), unlike all other tags related to preloading. The browser must download the resource specified in <link rel="preload">. In other cases it may ignore preloading, for example if it is running on a slow connection.

Priorities. Browsers usually assign different priorities to different resources (styles, scripts, fonts, etc.) in order to load the most important resources first. In this case, the browser determines priority by attribute as. For Chrome browser you can look at full priority table.

prefetch

<link rel= "prefetch"> asks the browser to download and cache a resource (such as a script or style sheet) in the background. Loading occurs at low priority so it doesn't interfere with more important resources. This is useful if the resource is needed on the next page and you want to cache it in advance.

Here, too, the browser does nothing with the resource after loading. Scripts are not executed, style sheets are not applied. The resource is simply cached and immediately made available upon request.

Syntax

<link rel="prefetch" href="/en/style.css" as="style" />

href points to the resource you want to download.

as can be anything that can be downloaded in the browser:

style for style sheets,
script for scripts,
font for fonts,
fetch for resources loaded using fetch() or XMLHttpRequest,
see full list on MDN.

It is important to specify the attribute as - this helps the browser correctly prioritize and schedule downloads.

When to use

To load resources from other pages, if you need a resource from another page, and you want to preload it to then speed up the rendering of that page. For example:

You have an online store, and 40% of users leave the home page for the product page. Use <link rel= "prefetch">, loading CSS and JS files to render product pages.
You have a single page application, and different pages load different packages. When a user visits a page, packages for all the pages it links to can be preloaded.

It is likely that this tag can be safely used to any extent.. Browsers usually schedule prefetch with the lowest priority, so it doesn't bother anyone. Just keep in mind that it consumes user traffic, which can cost money.

Not for urgent requests. Do not use <link rel= "prefetch">, when the resource is needed in a few seconds. In this case, use <link rel= "preload">.

Details

Optional tag. The browser is not required to follow this instruction; it may ignore it, for example, on a slow connection.

Priority in Chrome. In Chrome <link rel= "prefetch"> usually executed with minimum priority (see full priority table), that is, after loading everything else.

preconnect

<link rel= "preconnect"> asks the browser to connect to the domain in advance when you want to speed up connection setup in the future.

The browser must establish a connection if it retrieves any resources from a new third-party domain. For example, if it loads Google Fonts, React fonts from a CDN, or requests a JSON response from an API server.

Establishing a new connection usually takes a few hundred milliseconds. It is done once, but still takes time. If you have established a connection in advance, you will save time and download resources from this domain faster.

Syntax

<link rel= "preconnect" href="https://api.my-app.com" />

href indicates the domain name for which you want to determine the IP address. Can be specified with a prefix (https://domain.com) or without it (//domain.com).

When to use

Use for domains that will be needed soon to download an important style, script or image from there, but you don’t know the resource URL yet. For example:

Your application is hosted on my-app.com and makes AJAX requests to api.my-app.com: You don't know the specific queries in advance because they are made dynamically from JS. Here it is quite appropriate to use a tag to pre-connect to the domain.
Your application is hosted on my-app.com and uses Google Fonts. They are downloaded in two steps: first, the CSS file is downloaded from the domain fonts.googleapis.com, then this file requests fonts with fonts.gstatic.com. You can't know which specific font files are from fonts.gstatic.com you will need until you load the CSS file, so we can only make a preliminary connection beforehand.

Use this tag to speed up some third party script or style a little due to pre-established connection.

Do not overuse. Establishing and maintaining a connection is an expensive operation for both the client and the server. Use this tag for a maximum of 4-6 domains.

Details

Optional tag. The browser is not required to follow this instruction and may ignore it, for example, if many connections have already been established or in some other case.

What does the connection process include?. To connect to each site, the browser must do the following:

DNS resolution. Find server IP address (216.58.215.78) for the specified domain name (google.com).
TCP handshake. Exchange packets (client → server → client) to initiate a TCP connection with the server.
TLS handshake (HTTPS sites only). Two rounds of packet exchange (client → server → client → server → client) to initiate a secure TLS session.

Note: HTTP/3 will improve and speed up the handshake mechanism, but it is still a long way off.

dns-prefetch

<link rel= "dns-prefetch"> asks the browser to perform DNS resolution for the domain in advance if you will be connecting to it soon and want to speed up the initial connection.

The browser must determine the domain's IP address if it will retrieve any resources from a new third-party domain. For example, loading Google Fonts, React fonts from a CDN, or requesting a JSON response from an API server.

For each new domain, DNS record resolution typically takes about 20-120 ms. This only affects the loading of the first resource from a given domain, but still introduces a delay. If we perform DNS resolution in advance, we will save time and load the resource faster.

Syntax

<link rel= "dns-prefetch" href="https://api.my-app.com" />

href indicates the domain name for which you want to set the IP address. Can be specified with a prefix (https://domain.com) or without it (//domain.com).

When to use

Use for domains that will be needed soon to download resources from there that the browser does not know about in advance. For example:

Your application is hosted on my-app.com and makes AJAX requests to api.my-app.com: You don't know the specific queries in advance because they are made dynamically from JS. Here it is quite appropriate to use a tag to pre-connect to the domain.
Your application is hosted on my-app.com, and uses Google Fonts. They are downloaded in two steps: first, the CSS file is downloaded from the domain fonts.googleapis.com, then this file requests fonts with fonts.gstatic.com. You can't know which specific font files are from fonts.gstatic.com you will need it until you load the CSS file, so we can only make a preliminary connection in advance.

Use this tag to speed up some third party script or style a little due to pre-established connection.

Please note similar characteristics to <link rel= "dns-prefetch"/> и <link rel= "preconnect">. It usually doesn't make sense to use them together for one domain: <link rel= "preconnect"> already includes <link rel= "dns-prefetch"/> and much more. This can be justified in two cases:

Do you want to support older browsers?. <link rel= "dns-prefetch" /> supported by since IE10 and Safari 5. <link rel= "preconnect"> was supported for a while in Chrome and Firefox, but was only added to Safari in 11.1 and still not supported in IE/Edge. If you need to support these browsers, use <link rel= "dns-prefetch" /> as a backup option for <link rel= "preconnect">.

You want to speed up connections to more than 4-6 domains. Tag <link rel= "preconnect"> It is not recommended to use with more than 4-6 domains, since establishing and maintaining a connection is an expensive operation. <link rel= "dns-prefetch" /> consumes less resources, so use it if necessary.

Details

Optional tag. The browser is not required to follow this instruction, so it may not perform DNS resolution, for example, if there are many such tags on the page or in some other case.

What is DNS. Each server on the Internet has a unique IP address, which looks like 216.58.215.78. The name of the site is usually entered into the address bar of the browser (for example, google.com), and DNS (Domain Name System) servers match it with the server's IP address (216.58.215.78).

To determine an IP address, the browser must query the DNS server. It takes 20−120 ms when connecting to a new third-party domain.

DNS is cached, although not very reliablySome operating systems and browsers cache DNS requests: this will save time when repeating requests, but caching cannot be relied upon. Linux It usually doesn't work at all. Chrome has a DNS cache, but it only lasts for a minute. Windows Caches DNS responses for five days.

prerender

<link rel= "prerender"> asks the browser to download the URL and display it in an invisible tab. When the user clicks on the link, the page should be displayed immediately. This is useful if you are sure that the user will visit a certain page and want to speed up its display.

Despite (or because of) the exceptional effectiveness of this tag, in 2019 <link rel= "prerender"> poorly supported in major browsers. See more details. below.

Syntax

<link rel="prerender" href="https://my-app.com/pricing" />

href points to the URL you want to start rendering in the background.

When to use

When you are really sure that the user will go to a certain page. If you have a “tunnel” through which 70% of visitors to page A go to page B, then <link rel= "prerender"> on page A will help to display page B very quickly.

Do not overuse. Pre-rendering is extremely expensive in terms of bandwidth and memory. Do not use <link rel= "prerender"> for more than one page.

Details

Optional tag. The browser is not required to follow this instruction and may ignore it, for example, on a slow connection or when there is insufficient free memory.

To save memory Chrome doesn't do full rendering, only preload NoState. This means that Chrome loads the page and all its resources, but does not render or execute JavaScript.

Firefox and Safari do not support this tag at all. This does not violate the specification, since browsers are not required to follow this instruction; but still sad. Implementation bug Firefox has been open for seven years. There are reports that Safari doesn't support this tag either.

Summary

Use:

<link rel= "preload"> - when you need a resource in a few seconds
<link rel= "prefetch"> - when you need the resource on the next page
<link rel= "preconnect"> - when you know that you will need a resource soon, but you do not yet know its full URL
<link rel= "dns-prefetch"> - similarly, when you know that you will need a resource soon, but you do not yet know its full URL (for older browsers)
<link rel= "prerender"> — when you are sure that users will go to a certain page, and you want to speed up its display

Source: habr.com