In a modern web application, it is very likely that you will be connecting to multiple domains other than the one representing your own server. For each domain the browser is connecting to, there will be initial setup. The initial setup consists of 3 things - Resolve DNS, TCP Handshake, and TLS Negotiation.
Browser clients usually perform the initial setup only when necessary (This might not be true for some specially optimized browsers), and this results in some latency before they can start getting content.
To minimize the latency, we can use 2 resource hints below.
- DNS Prefetch - Resolve DNS beforehand.
- Preconnect - Resolve DNS, Establish Connection, and Negotiate TLS as soon as possible.
DNS Prefetch is more widely supported comparing to Preconnect, it should be done as the default. Example:
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
<link rel="dns-prefetch" href="//abcdefghijklmn.cloudfront.net" />
<link rel="dns-prefetch" href="//www.google-analytics.com" />
<link rel="dns-prefetch" href="//api.your-domain.com" />
<link rel="dns-prefetch" href="//ajax.googleapis.com" />
<link rel="dns-prefetch" href="//www.facebook.com" />
Preconnect should be done if the connection is required in the current context (E.g. you are getting something from that domain). If you are just preparing for the next possible page, then DNS Prefetch is good enough. Example:
<link rel="preconnect" href="//fonts.googleapis.com" crossorigin />
<link rel="preconnect" href="//abcdefghijklmn.cloudfront.net" crossorigin />
Note that "crossorigin" element decides the crossorigin state of the domain.
Illustration:
Supported Browsers: