Meta tags: dns-prefetch, preconnect, prefetch, prerender, preload
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/
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.
Note that preconnect already includes dns-prefetch. Using them together for one domain doesn't make sense, except to add support for browsers that understand dns-prefetch
and don't understand preconnect
.
Usage
<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.
Browser Support
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.
It is not recommended to use it with more than 4-6 domains, as establishing and maintaining connections is an expensive operation.
Usage
<link rel="preconnect" href="https://example.com"> <link rel="preconnect" href="//cdn.example.com" crossorigin>
- href(mandatory)
- 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.
Browser Support
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.
Usage
<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(mandatory)
- 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.
-
- Do not use it if the resource is important for the current page. If the resource will definitely be used on the current page, use preload instead of prefetch.
Browser Support
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.
-
Do not abuse preloading. If you load everything indiscriminately, the site will not magically speed up; rather, it will hinder the browser's ability to plan its work effectively.
- Do not confuse with prefetch. Do not use
preload
if you don't need the resource immediately after the page loads. If it will be needed later, for example, for the next page, useprefetch
.
Usage
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(mandatory)
- 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.
Browser Support
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.
-
Despite the exceptional efficiency of this tag (or because of it), in 2021 prerender is poorly supported by major browsers.
-
Do not abuse it. Prerendering is extremely expensive in terms of traffic and memory usage. 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 execute this instruction.
- For memory saving, Chrome does not perform full rendering, but only preloads NoState. This means that Chrome loads the page and all its resources, but does not render and does not execute JavaScript.
Usage
<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 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.
Browser support
How to add this in WP
See examples of the function wp_resource_hints().
See hook wp_preload_resources.
--
Used in writing: