Pre rels in header link tag

I. Overview

A brief overview of meta tags for the browser: preconnect, dns-prefetch, prefetch, preload, prerender.

Five tags <link rel> instruct the browser to take preliminary actions:

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

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

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

Documentation on w3.org:

• All tags: https://www.w3.org/TR/resource-hints/
• Preload: https://www.w3.org/TR/preload/

II. Dns-prefetch

Asks the browser to obtain information about the specified domain (to find its IP) in the background, to then use it for actual requests to the specified domain.

Typically, resolving DNS for each new domain takes about 10-120 ms. This only affects the loading of the first resource from that domain. However, if we prefetch the DNS, we can save some time.

Optional instruction — the browser may ignore it if it interferes with more important operations.

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

href: Points to the domain for which the IP address needs to be determined. It can be specified without the protocol - //domain.com.

When to use: When the specified domain will be used later on the page, but the browser doesn't know about it yet.

Examples:

For instance, in the HEAD of the document, we can request information about the domain, and then a script from that domain is loaded in the footer. The browser will already have information about the domain and, as a result, will retrieve the script data a little faster.

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 dynamically made from JS. It's quite appropriate to use it here.

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 fonts.googleapis.com domain, and then this file requests fonts from fonts.gstatic.com. You can't know which specific font files from fonts.gstatic.com you'll need until you load the CSS file, so we can only establish a pre-connection in advance.

III. Preconnect

Preconnect instructs the browser to establish a connection (handshake, connect) with the specified domain in the background.

The connection process includes:

• DNS resolution. Finding the server's IP address (216.58.215.78) for the specified domain name (google.com).
• TCP handshake. Packet 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.
• All these operations take approximately 300 ms.

Optional instruction — the browser may ignore it, for example, if many connections are already established or in some other case.

<link rel="preconnect" href="https://example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>

href: The domain with which to establish a connection. It can be specified without the protocol. crossorigin: An attribute that indicates the CORS policy of the specified domain. CORS Attribute.

When to use: Use for domains from which important styles, scripts, or images will soon be needed for loading, but you don't yet know the URL of the resource. 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 dynamically made from JS. It's quite appropriate to use the tag for pre-connecting to the domain here.
• 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 fonts.googleapis.com domain, and then this file requests fonts from fonts.gstatic.com. You can't know which specific font files from fonts.gstatic.com you'll need until you load the CSS file, so we can only establish a pre-connection in advance.

IV. Prefetch

Prefetch instructs the browser to load and cache a resource in the background.

Unlike preload, the loading occurs with low priority, so it doesn't interfere with more important resources.

Optional instruction — the browser may ignore it, for example, with slow internet. It is executed with low priority, i.e., after loading everything important. See the priority table.

The browser does nothing with the resource after loading. Scripts are not executed, stylesheets are not applied. The resource is simply cached and provided on demand.

<link rel="prefetch" href="https://example.com/next-page.html" as="document" crossorigin>
<link rel="prefetch" href="//example.com/next-page.css" as="style" crossorigin="use-credentials">
<link rel="prefetch" href="/library.js" as="script">

href: URL. Can be relative or specified without the protocol.

as: An attribute used to pass the resource type, so the browser can optimize prefetch processing, for example, set appropriate request headers, processing priority, and so on. as can be:

• audio — Audio file, usually used in <audio>.
• document — HTML document intended for embedding in <frame> or <iframe>.
• embed — Resource embedded in the <embed> element.
• fetch — Resource accessed using a fetch or XHR request, for example, ArrayBuffer or JSON file.
• font — Font file.
• image — Image file.
• object — Resource embedded in the <object> element.
• script — JavaScript file.
• style — CSS stylesheet.
• track — WebVTT file.
• worker — JavaScript web worker or shared worker.
• video — Video file, usually used in <video>.

crossorigin: An attribute that indicates the CORS policy of the specified resource. CORS Attribute.

When to use:

For loading resources from other pages. i.e., when a resource will be needed on another page, and you want to add it to the cache in advance. For example:

• You have an online store, and 40% of users go from the home page to the product page. Use prefetch to load CSS and JS files for rendering product pages.
• You have a single-page application, and different pages load different packages. When a user visits a page, you can prefetch packages for all pages it links to.

V. Preload

Preload tells the browser to load and cache a resource in the preload cache.

This is a mandatory instruction — the browser must execute it, unlike prefetch or similar instructions (they can be ignored, for example, with slow internet).

The browser does nothing with the resource after loading. Scripts are not executed, stylesheets are not applied. The resource is simply provided from the preload cache on demand.

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

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

var res = document.createElement("link");
res.rel = "preload";
res.as = "style";
res.href = "styles/other.css";
document.head.appendChild(res);

HTTP Header output:
Link: <https://example.com/other/styles.css>; rel=preload; as=style
Link: </theme/styles.css>; rel=preload; as=style

href: URL. Can be relative or specified without the protocol.

as: It is important to specify the as attribute — it helps the browser to correctly prioritize and plan the loading, as can be:

• audio — Audio file, usually used in <audio>.
• document — HTML document intended for embedding in <frame> or <iframe>.
• embed — Resource embedded in the <embed> element.
• fetch — Resource accessed using a fetch or XHR request, for example, ArrayBuffer or JSON file.
• font — Font file.
• image — Image file.
• object — Resource embedded in the <object> element.
• script — JavaScript file.
• style — CSS stylesheet.
• track — WebVTT file.
• worker — JavaScript web worker or shared worker.
• video — Video file, usually used in <video>.

crossorigin: An attribute that indicates the CORS policy of the specified resource. CORS Attribute.

When to use: When a resource must be used and needs to be loaded immediately to avoid blocking HTML rendering.

VI. Prerender

Asks the browser to load the URL and process it in the background. When the user clicks on a link, the page should be displayed instantly.

Optional instruction - the browser may ignore it, for example, on a slow connection or with insufficient free memory.

<link rel="prerender" href="//example.com/next-page.html">

href: URL. Can be relative or specified without a protocol.

When to use:

When you are really sure that the user will navigate to a specific page. If you have a "tunnel" through which 70% of visitors from page A go to page B, then prerender on page A will help to display page B very quickly.