Last Updated:

Meta tags: dns-prefetch, preconnect, prefetch, prerender, preload

Briefly about meta tags for the browser preconnect, dns-prefetch, prefetch, preload, prerender.

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

<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 the w3.org:


dns-prefetch

Specification.

Asks the browser in the background to get information about the specified domain (find out its IP), in order to then use it for real requests to the specified domain.

For each new domain, DNS resolving usually takes about 10−120 ms. This affects only the loading of the first resource from this domain, however, if we carry out the DNS-prefitch in advance, we will save a little time.

Optional instruction – the browser can ignore it if it interferes with other more important operations.

Note that preconnect already includes dns-prefetch. Using them together for the same domain doesn't make sense. Except to add support for browsers that understand and don't understand .dns-prefetchpreconnect

Use

<link rel="dns-prefetch" href="https://api.my-app.com" />
href
Specifies the domain for which you want to know the IP address. Can be specified without a protocol - .//domain.com

When to use

When the specified domain will be used further on the page, but so far the browser does not know about it.

Examples:

  • For example, in the HEAD document we can ask to find out the information about the domain, and then in the footer we connect a script from this domain. The browser will already know the information about the domain and due to this it will receive 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 specific requests in advance because they are made dynamically from JS. It is quite appropriate to use .

  • Your app is hosted on my-app.com, and uses Google Fonts. They are loaded in two steps: first, a CSS file from the fonts.googleapis.com domain is loaded, then the file requests fonts from the fonts.gstatic.com. You can't know which specific font files from fonts.gstatic.com you'll need until you download the CSS file, so we can only pre-establish a pre-connection.

Browser support

preconnect

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

The connection process includes:

  1. DNS resolving. Find the IP address of the server (216.58.215.78) for the specified domain name (google.com).
  2. TCP handshake. Packet exchange (client → server → client) to initiate a TCP connection to the server.
  3. TLS handshake (HTTPS sites only) 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 can ignore it, for example, if many connections are already established or in some other case.

It is not recommended to use with more than 4-6 domains, as establishing and maintaining a connection is an expensive operation.

Use

<link rel="preconnect" href="https://example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>
href(required)
The domain to connect to. Can be specified without a protocol.
crossorigin
An attribute that points to the CORS policy of the specified domain. The CORS attribute.

When to use

Use for domains that will soon be needed to upload an important style, script or image from there, but you do not 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 specific requests 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 app is hosted on my-app.com and uses Google Fonts. They are loaded in two steps: first, a CSS file from the fonts.googleapis.com domain is loaded, then the file requests fonts from the fonts.gstatic.com. You can't know which specific font files from fonts.gstatic.com you'll need until you download the CSS file, so we can only pre-establish a pre-connection in advance.

Browser support

prefetch

Prefight asks the browser in the background to download and put the resource in the cache.

Unlike preload. loading occurs with a low priority, so it does not interfere with more important resources.

Optional instruction - the browser can ignore it, for example, when the Internet is slow. Runs with low priority, i.e. after downloading everything important. Cm. Priority table.

The browser does nothing with the resource after downloading. Scripts are not executed, style sheets are not applied. The resource is simply cached and made available on demand.

Use

<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(required)
URL. Can be relative or specified without a protocol.
as

The attribute is used to pass the resource type so that the browser can optimize perfitch handling, such as setting the appropriate request headers, processing priority, and so on. Could be:as

  • audio - An audio file commonly used in .<audio>
  • document is an HTML document intended to be embedded in or .<frame><iframe>
  • embed is a resource embedded in the .<embed>
  • fetch is a resource that is accessed using a fetch or XHR request, such as an ArrayBuffer or a JSON file.
  • font - Font file.
  • image - Image file.
  • object is a resource embedded in the .<object>
  • script - JavaScript file.
  • style - CSS style sheet.
  • track is a WebVTT file.
  • worker - JavaScript web worker or shared worker.
  • video - A video file commonly used in .<video>
crossorigin
An attribute that points to the CORS policy of the specified resource. The CORS attribute.

When to use

  • To load resources from other pages. That is, when the resource is 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 leave the main page to the product page. Use prefetch when 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, you can pre-load packages for all the pages it links to.
  • Do not use it if the resource is important to the current page. If the resource will definitely be used on the current page, use preload, not prefect.

Browser support

preload

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

This is a mandatory instruction - the browser is obliged to execute it, unlike prefetch or other similar instructions (they can be ignored, for example, in case of bad Internet).

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

Priorities. Different resources (styles, scripts, fonts, etc.), browsers usually assign different priorities in order to first load the most important resources. Here, the priority is distributed by the . For chrome, you can see the full priority table.as

  • Do not abuse preloading. If you load everything in a row, the site will not magically accelerate, rather, on the contrary, it will prevent the browser from planning work competently.

  • Not to be confused with prefetch. Do not use unless you need the resource immediately after the page loads. If you need it later, for example, for the next page, then use .preloadprefetch

Use

html:

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

JavaScript:

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

HTTP Header:

Link: <https://example.com/other/styles.css>; rel=preload; as=style
Link: </theme/styles.css>; rel=preload; as=style
href(required)
URL. Can be relative or specified without a protocol.
as

It is important to specify the as attribute - this helps the browser to properly prioritize and schedule downloads. Could be:as

  • audio - An audio file commonly used in .<audio>
  • document is an HTML document intended to be embedded in or .<frame><iframe>
  • embed is a resource embedded in the .<embed>
  • fetch is a resource that is accessed using a fetch or XHR request, such as an ArrayBuffer or a JSON file.
  • font - Font file.
  • image - Image file.
  • object is a resource embedded in the .<object>
  • script - JavaScript file.
  • style - CSS style sheet.
  • track is a WebVTT file.
  • worker - JavaScript web worker or shared worker.
  • video - A video file commonly used in .<video>
crossorigin
An attribute that points to the CORS policy of the specified resource. The CORS attribute.

When to use

When the resource will be used and it needs to be loaded immediately (so as not to block HTML parsing).

Browser support

prerender

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

Optional instruction - the browser can ignore it, for example, on a slow connection or if there is not enough free memory.

  • Despite the exceptional effectiveness of this tag (or because of it), in 2021 prerender is poorly supported by major browsers.

  • Don't abuse it. Pre-rendering is extremely expensive in terms of traffic and memory. Do not use prerender for more than one page.

  • Firefox and Safari do not support this tag. This does not violate the specification, as browsers are not required to follow this instruction.
  • For the sake of saving memory, Chrome does not perform a full rendering, but only a preload of NoState. This means that Chrome loads the page and all its resources, but does not render or execute JavaScript.

Use

<link rel="prerender" href="//example.com/next-page.html">
href(required)
URL. Can be relative or specified without a protocol.

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 prerender on page A will help to display page B very quickly.

Browser support

How to add this to WP

See examples of the wp_resource_hints() function.

--

Used when writing: