thumb

DNS prefetching is another way to enhance the performance of the front-end of a website. We can use it to tell the browser which assets (actually only the domain names where these assets are located) the user might need in the future — before they even need them. With it, the page loads faster, and users can achieve their goals as quickly as possible. In this tutorial, I’ll show you how to speed up your website using DNS prefetching technique.

What is a DNS prefetch?

Here is a quote from the W3C documentation:

The dns-prefetch link relation type is used to indicate an origin that will be used to fetch required resources, and that the user agent SHOULD resolve as early as possible.

When a web page contains resources that loading from different domains, DNS prefetching notifies the web browser that there are web assets, such as a data file, an image, or an audio file, that will be needed later from a specific URL. As a result, the browser can resolve the DNS (Domain Name Server) as quickly as possible in the background.

Getting started

Implementing the DNS prefetching technique is a really easy process. It is done by adding a link tag with rel="dns-prefetch" in the <head></head> section of a website. The finished link tag looks like this:

<link rel="dns-prefetch" href="//www.example.com">

The above link tag is basically saying “I want to resolve the domain name www.example.com before it is called”.

Don’t add http:// or https://, use // instead. This way it will resolve DNS no matter the protocol.

Now we can view the source code of our web page in a web browser and do a quick scan to get a list of all domain names which we want to prefetch. In practice, this can look like the following in an HTML5 document:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="dns-prefetch" href="//ajax.googleapis.com">
        <link rel="dns-prefetch" href="//cdnjs.cloudflare.com">
    </head>
    <body>

You can go ahead and use other techniques in combination with “DNS prefetch”, such as “Prefetch”, “Preconnect”, “Prerender” and “Preload”. But that’s another story.

Control DNS Prefetch

By default, web browsers does not prefetch host names in hyperlinks that appear in HTTPS pages. This restriction helps prevent an eavesdropper from inferring the host names of hyperlinks that appear in HTTPS pages based on DNS prefetch traffic.

An inquisitive content author (for example, a commenter on a blog) may abuse DNS prefetching to attempt to monitor viewing of content containing links. For example, links with novel subdomains, when resolved during a prefetch, may notify a domain’s resolver that a link was viewed, even if it was not clicked. In some such cases, the authority serving the content (such as a blog owner, or webmail server) may wish to preclude such abusive monitoring.

To allow webmasters to control whether DNS prefetch is enabled or disabled, web browsers includes a DNS Prefetch Control mechanism. It can be used to turn DNS prefetch on for HTTPS pages, or turn it off for HTTP pages.

Web browsers watches for an HTTP header of the form X-DNS-Prefetch-Control (case insensitive) with a value of either on or off. This setting changes the default behavior for the rendered content. A meta tag http-equiv of the same name can be used to make policy changes within a page. If a page explicitly opts out of DNS prefetch, further attempts to opt in are ignored.

For example, the following part of HTTP header would cause web browser to prefetch b.com but not a.com, c.com, or d.com.

<a href="http://a.com"> A) Default HTTPS: No prefetching </a>

<meta http-equiv="x-dns-prefetch-control" content="on">
<a href="http://b.com"> B) Manual opt-in: Prefetch domain resolution. </a>

<meta http-equiv="x-dns-prefetch-control" content="off">
<a href="http://c.com"> C) Manual opt-out: Don't prefetch domain resolution </a>

<meta http-equiv="x-dns-prefetch-control" content="on">
<a href="http://d.com"> D) Already opted out: Don't prefetch domain resolution. </a>

Child frames also inherit the DNS prefetch control opt-out setting from their parent. The DNS prefetch control setting applies only to hyperlinks and not to the manual prefetch mechanism.

What things to DNS prefetch?

Some common things to use DNS prefetching for is your CDN, Google fonts, Google Analytics, etc. I know that an example is always clearer than just a description of actions, so here’s an example. The following is a list of various DNS prefetched domain names:

<!-- Google CDN -->
<link rel="dns-prefetch" href="//ajax.googleapis.com">

<!-- Google API -->
<link rel="dns-prefetch" href="//apis.google.com">

<!-- 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">

<!-- Google Tag Manager -->
<link rel="dns-prefetch" href="//www.googletagmanager.com">

<!-- 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">

<!-- Google Blogger -->
<link rel="dns-prefetch" href="//bp.blogspot.com">
<link rel="dns-prefetch" href="//1.bp.blogspot.com">
<link rel="dns-prefetch" href="//2.bp.blogspot.com">
<link rel="dns-prefetch" href="//3.bp.blogspot.com">
<link rel="dns-prefetch" href="//4.bp.blogspot.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">

<!-- BuySellads -->
<link rel="dns-prefetch" href="//stats.buysellads.com">
<link rel="dns-prefetch" href="//s3.buysellads.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">

You can use any combination of the above link tags according to your need.

Some themes might add DNS prefetching for certain things like Google Fonts already. You might want to view the source code of your web page in a web browser and do a quick scan just to make sure you aren’t trying to add a same tag twice.

Browser compatibility

DNS prefetching is supported by all major browsers (Safari 5.0+, IE 9.0+, Firefox 3.5+, Google Chrome), except for iOS Safari, Opera Mini, and Android Browser.

Not every technique listed above are supported across all browsers. You can see the browser support for each techniques in the below links:

Conclusion

That’s it, you’re done. So simple isn’t it?

You might want to view the source code of your web page in a web browser and do a quick scan just to make sure you that you have done it correctly.

After implementing the DNS prefetching technique, you can use any third party online tool to check the performance of your website. These are the two online tools that I use:

I hope this article has helped you learn how to speed up your website using DNS prefetching technique. If this article has helped you then please leave a comment :smiley:

Thanks for reading!