There are many ways to increase web productivity . One of them is preloading content that will be needed later. Prefetching CSS, previewing a full page or resolving a domain name. We do everything in advance, and then instantly display the result! It sounds cool.

Even cooler is that it is very easy to implement. Five <link rel> tags give the browser a command for 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" /> 

Briefly tell what they do and when to use them.
')
Jump to: preload · prefetch · preconnect · dns-prefetch · prerender

preload

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

The browser does nothing with the resource after downloading. Scripts are not executed, style sheets are not applied. The resource is simply cached and immediately available 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 style sheets
  
• script for scripts
  
• font for fonts
  
• fetch for resources loaded with fetch() or XMLHttpRequest ,
  
• see MDN for a complete list.

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

When to use

Use preloading when the resource is needed as soon as possible. For example:

• Custom fonts from external file:
  
  

   <!-- index.html --> <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 loading and parsing index.css . In order not to wait that long, you can load the font earlier with <link rel= "preload"> :
  
  

   <link rel="preload" href="comic-sans.woff2" as="font" /> 

• If you divide 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 start loading only when JavaScript is started, which can happen a few seconds after rendering. Instead of waiting for JS, use <link rel= "preload"> to start the download earlier:
  
  

   <style> /* Inlined critical styles */ </style> <link rel="preload" href="/app/non-critical.css" as="style" /> <script> /* Custom JS that starts downloading non-critical styles */ loadCSS('/app/non-critical.css'); </script> 

Do not abuse preloading . If you download everything, the site will not be accelerated magically, rather, on the contrary, it will prevent the browser from properly scheduling work.

Do not confuse with prefetching . Do not use <link rel= "preload"> unless you 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 mandatory tag for browser execution (if it supports it), unlike all other <link> tags associated with preloading. The browser must load the resource specified in <link rel="preload"> . In other cases, it may ignore the preload, for example, if it is running on a slow connection.

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

prefetch

<link rel= "prefetch"> asks the browser to load and cache the resource (for example, a script or style sheet) in the background. The download takes place with a low priority, so does not interfere with more important resources. This is useful if you need the resource on the next page, and you want to cache it in advance.

Here, too, the browser does nothing with the resource after downloading. Scripts are not executed, style sheets are not applied. The resource is simply cached and immediately available 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 style sheets
  
• script for scripts
  
• font for fonts
  
• fetch for resources loaded with fetch() or XMLHttpRequest ,
  
• see MDN for a complete list.

It is important to specify an as attribute — this helps the browser to 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, then to speed up the rendering of this page. For example:

• You have an online store, and 40% of users leave the main page for the product page. Use <link rel= "prefetch"> when loading CSS and JS files to render pages with the product.
  
• You have a one-page application, and different pages load different packages. When a user visits a page, you can preload packages for all pages to which it refers.

Probably, this tag can be safely used in any amount . Browsers usually plan for prefetch with the lowest priority, so it doesn't bother anyone. Just keep in mind that user traffic is being spent, 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 obliged to follow this instruction, it can ignore it, for example, on a slow connection.

Priority in Chrome . In Chrome, <link rel= "prefetch"> usually executed with a minimum priority (see the full table of priorities ), that is, after loading the rest.

preconnect

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

The browser should establish a connection if it retrieves any resources from a new third-party domain. For example, if you download Google Fonts fonts, React from a CDN or request a JSON response from the API server.

Setting up a new connection usually takes a few hundred milliseconds. It is made once, but still takes time. If you have pre-established a connection, you will save time and load resources from this domain faster.

Syntax

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

href points to the domain name for which you want to determine the IP address. You can specify with or without the prefix ( https://domain.com ) ( //domain.com ).

When to use

Use for domains you’ll need to download an important style, script or image from there, but you don’t know the URL of the resource yet. For example:

• Your application is hosted on my-app.com and makes AJAX requests to api.my-app.com : you do not know the specific requests in advance, because they are made dynamically from JS. It is quite appropriate to use the tag to pre-connect to the domain.
  
• Your application is hosted on my-app.com and uses Google Fonts fonts. They are loaded in two steps: first, the CSS file is loaded from the fonts.googleapis.com domain, then this file requests fonts from fonts.gstatic.com . You cannot know which specific font files from fonts.gstatic.com you will need until you upload 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 by pre-setting the connection.

Do not abuse . 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 obliged to follow this instruction and may ignore it, for example, if many connections have already been established or in some other case.

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

• DNS resolving . Find the IP address of the server ( 216.58.215.78 ) for the specified domain name ( google.com ).
• TCP handshake . Packet exchange (client → server → client) to initiate a TCP connection to 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 far away.

dns-prefetch

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

The browser must determine the domain’s IP address if it retrieves any resources from a new third-party domain. For example, download Google Fonts, React fonts from a CDN, or request a JSON response from the API server.

For each new domain, the resolution of the DNS record usually takes about 20-120 ms. This only affects the loading of the first resource from this domain, but it still represents a delay. If you implement DNS resolution in advance, then 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. You can specify with or without the prefix ( https://domain.com ) ( //domain.com ).

When to use

Use for domains you’ll need to download resources from there that your browser doesn’t know in advance. For example:

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

Use this tag to speed up some third-party script or style by pre-setting the connection.

Note the similar characteristics on <link rel= "dns-prefetch"/> and <link rel= "preconnect"> . Using them together for the same domain usually does not 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" /> supported since 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 want to support these browsers, use <link rel= "dns-prefetch" /> as a <link rel= "preconnect"> for <link rel= "preconnect"> .
• You want to speed up connectivity to more than 4-6 domains . The <link rel= "preconnect"> not recommended for 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 obliged to follow this instruction, so it may not perform DNS rezolving, 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 that looks like 216.58.215.78 . In the address bar of the browser, the site name is usually entered (for example, google.com ), and the 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 perform a query to the DNS server. It takes 20-120 ms to connect to a new third-party domain.

DNS is cached, though not very secure . Some operating systems and browsers cache DNS queries: this will save time on repeated queries, but you cannot rely on caching. On Linux, it usually doesn't work at all. Chrome has a DNS cache, but it only lives a minute. Windows caches DNS responses for five days.

prerender

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

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

Syntax

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

href points to the URL for which you want to render 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” in which 70% of visitors to page A go to page B, then <link rel= "prerender"> on page A will help you quickly display page B.

Do not abuse . Preview rendering is extremely expensive in terms of traffic and memory. Do not use <link rel= "prerender"> more than one page.

Details

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

In order to save memory, Chrome does not perform full rendering , but only the preloading of NoState . This means that Chrome loads the page and all its resources, but does not render and does not 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 still sad. The implementation bug in Firefox has been 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 that you will need a resource soon, but you still do not know its full URL
  
• <link rel= "dns-prefetch"> - likewise, when you know that you will need a resource soon, but you still do not know its full URL (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