Increase speed and performance by using DNS Prefetch and Preconnect. Below is a common list of websites where you would typically use Prefetching & Preconnects. For websites that request open connections to many third parties, this latency can significantly reduce loading performance thus speeding up the page loads.
dns-prefetch: indicates to the browser that it should perform the resolution of a given domain name (determining the IP to contact) before that domain is used to download resources.
preconnect: indicates to the browser that it should connect a given origin before that domain is used to download resources.
1, dns-prefetch is only effective for DNS lookups on cross-origin domains, so avoid using it to point to your site or domain. This is because the IP behind your site’s domain will have already been resolved by the time the browser sees the hint.
2, It’s also possible to specify dns-prefetch (and other resources hints) as an HTTP header by using the HTTP Link field:
3, Consider pairing dns-prefetch with the preconnect hint. While dns-prefetch only performs a DNS lookup, preconnect establishes a connection to a server. This process includes DNS resolution, as well as establishing the TCP connection, and performing the TLS handshake—if a site is served over HTTPS.
Combining the two provides an opportunity to further reduce the perceived latency of cross-origin requests. You can safely use them together like so:
Note: If a page needs to make connections to many third-party domains, preconnecting them all is counterproductive. The preconnect hint is best used for only the most critical connections. For the others, just use <link rel="dns-prefetch"> to save time on the first step — the DNS lookup.
FYI - Some of the content referenced in this post is from the Mozilla Web Docs website - https://developer.mozilla.org
Code:
<!-- Google CDN -->
<link rel="dns-prefetch" href="//ajax.googleapis.com">
<link href="//ajax.googleapis.com" rel="preconnect" crossorigin>
<!-- Google API -->
<link rel="dns-prefetch" href="//apis.google.com">
<link href="apis.google.com" rel="preconnect" crossorigin>
<!-- Google Fonts -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<!-- Google Analytics -->
<link rel="dns-prefetch" href="//www.google-analytics.com">
<link href="//www.google-analytics.com" rel="preconnect" crossorigin>
<!-- Google Tag Manager -->
<link rel="dns-prefetch" href="//www.googletagmanager.com">
<link href="//www.googletagmanager.com" rel="preconnect" crossorigin>
<!-- Google Publisher Tag -->
<link rel="dns-prefetch" href="//www.googletagservices.com">
<!-- Google AdSense -->
<link rel="dns-prefetch" href="//adservice.google.com">
<link rel="dns-prefetch" href="//pagead2.googlesyndication.com">
<link rel="dns-prefetch" href="//tpc.googlesyndication.com">
<!-- Microsoft CDN -->
<link rel="dns-prefetch" href="//ajax.microsoft.com">
<link rel="dns-prefetch" href="//ajax.aspnetcdn.com">
<!-- Amazon S3 -->
<link rel="dns-prefetch" href="//s3.amazonaws.com">
<!-- Cloudflare CDN -->
<link rel="dns-prefetch" href="//cdnjs.cloudflare.com">
<!-- jQuery CDN -->
<link rel="dns-prefetch" href="//code.jquery.com">
<!-- Bootstrap CDN -->
<link rel="dns-prefetch" href="//stackpath.bootstrapcdn.com">
<!-- Font Awesome CDN -->
<link rel="dns-prefetch" href="//use.fontawesome.com">
<!-- Facebook -->
<link rel="dns-prefetch" href="//connect.facebook.net">
<!-- Twitter -->
<link rel="dns-prefetch" href="//platform.twitter.com">
<!-- Linkedin -->
<link rel="dns-prefetch" href="//platform.linkedin.com">
<!-- Vimeo -->
<link rel="dns-prefetch" href="//player.vimeo.com">
<!-- GitHub -->
<link rel="dns-prefetch" href="//github.githubassets.com">
<!-- Disqus -->
<link rel="dns-prefetch" href="//referrer.disqus.com">
<link rel="dns-prefetch" href="//c.disquscdn.com">
<!-- Gravatar -->
<link rel="dns-prefetch" href="//0.gravatar.com">
<link rel="dns-prefetch" href="//2.gravatar.com">
<link rel="dns-prefetch" href="//1.gravatar.com">
<!-- DoubleClick -->
<link rel="dns-prefetch" href="//ad.doubleclick.net">
<link rel="dns-prefetch" href="//googleads.g.doubleclick.net">
<link rel="dns-prefetch" href="//stats.g.doubleclick.net">
<link rel="dns-prefetch" href="//cm.g.doubleclick.net">dns-prefetch: indicates to the browser that it should perform the resolution of a given domain name (determining the IP to contact) before that domain is used to download resources.
preconnect: indicates to the browser that it should connect a given origin before that domain is used to download resources.
Best practices
There are 3 main things to keep in mind:1, dns-prefetch is only effective for DNS lookups on cross-origin domains, so avoid using it to point to your site or domain. This is because the IP behind your site’s domain will have already been resolved by the time the browser sees the hint.
2, It’s also possible to specify dns-prefetch (and other resources hints) as an HTTP header by using the HTTP Link field:
Code:
Link: <https://fonts.gstatic.com/>; rel=dns-prefetch3, Consider pairing dns-prefetch with the preconnect hint. While dns-prefetch only performs a DNS lookup, preconnect establishes a connection to a server. This process includes DNS resolution, as well as establishing the TCP connection, and performing the TLS handshake—if a site is served over HTTPS.
Combining the two provides an opportunity to further reduce the perceived latency of cross-origin requests. You can safely use them together like so:
Code:
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="dns-prefetch" href="https://fonts.gstatic.com/">Note: If a page needs to make connections to many third-party domains, preconnecting them all is counterproductive. The preconnect hint is best used for only the most critical connections. For the others, just use <link rel="dns-prefetch"> to save time on the first step — the DNS lookup.
FYI - Some of the content referenced in this post is from the Mozilla Web Docs website - https://developer.mozilla.org