There is Many ways to enhance web performance. One of them is preloading content that will be needed later. Prefetching CSS, prerendering a full page, or resolving a domain name. We do everything in advance, and then instantly display the result! Sounds great.

Even cooler is that it's very easy to implement. Five <link rel> tags tell the browser to take preliminary actions:

<link rel="prefetch" href="/style.css" as="style" />
<link rel="preload" href="/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 the resource (like a script or a stylesheet) as soon as possible. This is useful when the resource will be 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, stylesheets are not applied. The resource is just cached and immediately provided upon request.

Syntax

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

href points to the resource you want to download.

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

style for stylesheets,
script for scripts,
font for fonts,
fetch for resources loaded with fetch() or are triggered,
full list see. on MDN.

It's important to specify the attribute as — this helps the browser prioritize correctly and plan loading.

When to use

Use preload when a resource will be needed very soon. For example:

Custom fonts from an external file:
```

<link rel="stylesheet" href="index.css" />

/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
the net/http comic-sans.woff2 will start loading only after the index.cssand parsing completes. To avoid waiting so long, you can load the font earlier with <link rel="preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```
If you split your styles according to the Critical CSS approach 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 begin to load only when JavaScript is executed, which may happen a few seconds after rendering. Instead of waiting for JS, use <link rel="preload">, to start loading earlier:
```
/* Inlined critical styles */
```

Do not abuse preloading. If you load everything indiscriminately, the site will not magically speed up; rather, it will hinder the browser from planning its work efficiently.

Don't confuse this with prefetching. Do not use <link rel="preload">, if you do not need the resource immediately after loading the page. If it will be needed later, for example, on the next page, then use <link rel= "prefetch">.

Details

This is a mandatory tag for the browser to execute (if supported), unlike all other tags related to preloading. The browser is required to load the resource specified in <link rel="preload">. In other cases, it may ignore preloading, for instance, if running on a slow connection.

Priorities. Different resources (styles, scripts, fonts, etc.) are usually assigned different priorities by browsers to load the most important resources first. In this case, the browser determines priority by the attribute as. For Chrome browsers, you can view the full priority table.

prefetch

<link rel= "prefetch"> requests the browser to load and cache a resource (like a script or stylesheet) in the background. The loading occurs with low priority, thus not interfering with more important resources. This is useful if the resource will be 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, stylesheets are not applied. The resource is simply cached and immediately provided upon request.

Syntax

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

href points to the resource you want to download.

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

style for stylesheets,
script for scripts,
font for fonts,
fetch for resources loaded with fetch() or are triggered,
full list see. on MDN.

It's important to specify the attribute as — this helps the browser prioritize correctly and plan loading.

When to use

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

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

This tag can probably be safely used in any amount. Browsers typically prioritize prefetching the least, so it won't interfere with anything else. Just keep in mind that it consumes user bandwidth, which may cost money.

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

Details

An optional tag. The browser is not obliged to follow this instruction; it can ignore it, for example, on a slow connection.

Priority in Chrome. In Chrome <link rel= "prefetch"> it usually executes with minimal priority (see full priority table), meaning after loading everything else.

preconnect

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

The browser should establish a connection if it's retrieving some resources from a new external domain. For example, if it loads Google Fonts, React from a CDN, or requests a JSON response from an API server.

Establishing a new connection usually takes a few hundred milliseconds. It happens only once but still takes time. If you pre-establish the connection, you will save time and load resources from this domain faster.

Syntax

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

href indicates the domain name for which to resolve the IP address. You can specify with a prefix (https://domain.com) or without it (//domain.com).

When to use

Use for domains that will be needed soon to load important styles, scripts, or images 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 requests in advance because they are made dynamically from JS. Here, using the tag to preconnect to the domain is quite appropriate.
Your application is hosted on my-app.com and uses Google Fonts. They are loaded in two stages: first, a CSS file is loaded from the domain fonts.googleapis.com, then this file requests the fonts from fonts.gstatic.com. You can't know which specific font files are fonts.gstatic.com you will need, until you upload the CSS file, so we can only establish a preliminary connection in advance.

Use this tag to slightly speed up some third-party script or style. due to the preliminary connection setup.

Do not misuse it.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

An optional tagThe browser is not required to follow this instruction and may ignore it, for example, if it already has many connections established or in some other case.

What the connection process includesTo connect to each site, the browser must perform the following actions:

DNS resolutionFind the server's IP address (216.58.215.78) for the specified domain name (mrkaran.dev).
TCP handshakePacket exchange (client → server → client) to initiate a TCP connection with the server.
TLS handshake (only for HTTPS sites)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 be fetching any resources from a new third-party domain. For example, loading Google Fonts, React from a CDN, or requesting a JSON response from the 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 that domain, but it still represents a delay. By performing DNS resolution in advance, we 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 the IP address should be established. It 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 for loading 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 requests in advance because they are made dynamically from JS. Here, using the tag to preconnect to the domain is quite appropriate.
Your application is hosted on my-app.com, and uses Google Fonts. They are loaded in two stages: first, the CSS file from the domain is loaded. fonts.googleapis.com, then this file requests the fonts from fonts.gstatic.com. You can't know which specific font files are fonts.gstatic.com you will need, until you upload the CSS file, so we can only establish a preliminary connection in advance.

Use this tag to slightly speed up some third-party script or style. due to the preliminary connection setup.

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

You want to support older browsers. <link rel= "dns-prefetch" /> is supported starting from IE10 and Safari 5. <link rel= "preconnect"> was supported for some time in Chrome and Firefox, but was added to Safari only in 11.1 and is still not supported in IE/Edge. If you need to support these browsers, use <link rel= "dns-prefetch" /> as a fallback for <link rel= "preconnect">.

You want to speed up connections to more than 4-6 domains. The tag <link rel= "preconnect"> is not recommended for use with more than 4-6 domains, as establishing and maintaining connections is an expensive operation. <link rel= "dns-prefetch" /> uses fewer resources, so use it if necessary.

Details

An 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 a page or in some other case.

What is DNS. Each server on the internet has a unique IP address that looks like 216.58.215.78. In the browser's address bar, a website name is usually entered (for example, mrkaran.dev), and DNS servers (Domain Name System) map it to the server's IP address (216.58.215.78).

To determine the IP address, the browser must make a request to the DNS server. This takes 20-120 ms when connecting to a new third-party domain.

DNS is cached, though not very reliably. Some operating systems and browsers cache DNS requests: this saves time on repeated requests, but caching cannot be relied on. In 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 fetch a URL and display it on a hidden tab. When the user clicks the link, the page should appear immediately. This is useful if you are sure the user will visit a particular page and want to speed up its display.

Despite the exceptional efficiency of this tag (or because of it), in 2019 <link rel= "prerender"> it is poorly supported by major browsers. Read more at further down.

Syntax

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

href points to the URL for which you want to perform rendering in the background.

When to use

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

Do not misuse it.. Pre-rendering is extremely costly in terms of traffic and memory. Do not use <link rel= "prerender"> for more than one page.

Details

An optional tag. The browser is not obliged to follow this instruction and may ignore it, for example, on a slow connection or with insufficient free memory.

To save memory, Chrome does not perform a full render, and only preloads 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, as browsers are not required to follow this instruction; but it is still unfortunate. A bug in the implementation in Firefox was open for seven years. There are reports that Safari also does not support this tag..

Summary

Use:

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

Source: habr.com