Implement DNS Prefetch SpeedUp website tutorial

What is DNS Prefetch?

DNS prefetch technique can be used to speed up website.It is simple to implement.Yet this method is not widely used by website owners.Using DNS prefetch you are reducing DNS lookup time by pre resolving DNS (Domain Name Server).Google PageSpeed has also incorporated DNS prefetch (pre resolving DNS) as one of performance improvement methods.

Using DNS Prefetch you are instructing web browser to perform DNS lookup for a domain before making request to that domain.By default web browsers perform DNS lookup for a domain while making a request for that domain.

DNS Prefetch performance benefit

Lets understand performance gain by pre resolving DNS.I will refer to webpagetest.org for visuals and explanation of it.I will be referring to it all along the tutorial.So you can have a test run now and read this post in parallel.You might have tested your website performance using webpagetest.org.Even if you do not have then I will recommend to test your website speed using the tool.

After completion of the test on Details page you can see that every request for a resource can be broken down to

  • DNS Lookup
  • Initial Connection
  • Time to First Byte
  • Content Download

webpagetest details page


I have ignored SSL negotiation as not too many web pages use it.For example if you have a image hosted in example.com then to display that image on browser of a visitor all the four things mentioned above will take place.

Typically the DNS lookup time is around 50 ms to 5000 ms (worst case).Most of the time you will see the time below 1000 ms.Below is the screen shot of requests before DNS prefetch and after DNS prefetch (taken from webpagestest test of my website).The image is of Google Analytics JavaScript request with and without DNS Prefetch technique.

Request without DNS Prefetch

Total Time of request = DNS lookup + Initial Connection + Time to First Byte + Content Download.


Google Analytics request without DNS prefetch


Request with DNS Prefetch

Total time of request = Initial Connection + Time to First Byte + Content Download.


Google Analytics request with DNS prefetch


You can see that in first case the DNS lookup time is part of the request.But in second case DNS lookup has happened before the request.In first image the colored blocked are joined.But in second request the first block is separate from other blocks.As first request for DNS lookup is made before other requests.

The reason is that browser will perform DNS lookup before the request.The net result will be performance benefit of DNS lookup time spend on that request.Actually you can not say that total DNS lookup time will be benefit.As you can see on webpagetest.org details page the resources are loaded in parallel.

But performance gain is there if this is performed for all domains loaded before document complete then you can have decent performance gains.We are using document complete above.We will see reason for it later in the tutorial

Implementing DNS Prefetch

Implementing DNS prefetch on your website can be broken into couple of parts

  • Identifying the domain you need to prefetch
  • Adding DNS prefetch directive to your website

In case you are using Google Adsense,Google Analytics and loading social media buttons after page onload then you can navigate to bottom of page and copy already created DNS Prefetch tags.You can read this post for details of loading social media button after page on load.

Identifying the domain you need to prefetch

We will again use webpagetest.org for this purpose.I am assuming you have run test for your website.If you have not then run a test for your website.You can leave the setting to default.After completing the run navigate to Domains tab.On this tab you can see list of all domains requested by your webpage.


webpagetest domain page


The image shows domain tab of my web page test.You can see list of domains on the page.Copy the list of domains on any text editor.This lists all domains requested by your webpage.We will be using this list in next paragraph.

You can prefetch all the domains but that would make your web page head section bulky.So we will only prefetch domains requested before page on load.This will not make head section bulky and also speed up page onload time.You can safely use all domain if number of domain request are not too great.

Now to get idea about domains loaded before page load time navigate to Details tab on webpagetest.You can see vertical blue link.You can refer to first image on this post.Now locate the requests which have DNS lookup color in them.You can copy the domain names from domain tab for these requests.For example in this image DNS lookup request is made for udinra.com,www.google-analytics.com etc.

You can hover mouse over the entries to see complete URL.You should copy the matching domain names from the list you prepared above (from Domains tab).This way create a list of domains looked up before page onload.

So far you have identified the domains to prefetch for better performance.Next step will be to add them on your website.

Adding DSN prefetch to your website

The syntax of DNS prefetch code is

Internet Explorer

<link rel=”prefetch” href=”//domain name”>

Chrome and Firefox

<link rel=”dns-prefetch” href=”//domain name”>

You need to create codes for all domain you got from first step.For example if you listed two domains example.com and domain.com then your resultant code will be

Chrome and Firefox

<link rel=”dns-prefetch” href=”//example.com”>
<link rel=”dns-prefetch” href=”//domain.com”>

Internet Explorer

<link rel=”prefetch” href=”//example.com”>
<link rel=”prefetch” href=”//domain.com”>

After creating all the tags we need to add them on website.I am listing detailed instruction for WordPress users below.For users of other content management systems and platforms locate the file with <head> tag and paste the code.

If you want to enable prefetching for Internet Explorer,Firefox and Chrome then you should create code for both of them.After creating code for both of them paste on your side as shown below.The code for Internet Explorer is embedded with the conditional tag.The code for Firefox and Chrome are above conditional code.

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

Pre Created DNS Prefetch Code

I am assuming that most common assets used on website is Google Analytics and Google Adsense.If you are using these two then copy below code.This code is for Chrome and Firefox.To create code for Internet Explorer you need to replace dns-prefetch with prefetch only (as shown in Internet explorer dns prefetch code above).

	<link href="http://www.google-analytics.com" rel="dns-prefetch" />
	<link href="http://pagead2.googlesyndication.com" rel="dns-prefetch" />
	<link href="http://googleads.g.doubleclick.net" rel="dns-prefetch" />
	<link href="http://www.gstatic.com" rel="dns-prefetch" />

WordPress users

Every WordPress theme comes with header.php file.You will find <head> tag inside header.php file.Just paste the code created above below <head> tag.

mod_pagespeed and ngx_pagespeed users

As stated above Google PageSpeed for Apache (mod_pagespeed) and for Nginx (ngx_pagespeed) can be enabled for DNS prefetch.But if you are using the method mentioned above then it is better to disable that feature in pagespeed.

Conclusion

I am using this technique on this very site with good effect.The amount of performance gain with this method is hard to measure.You can not rely to tests with and without these tags and conclude something from results.As everything does not remain same for each test.

Sometimes external resources load fast and sometime they load slow.Two back to back webpagetest or other test many not give you accurate data.I have not tried to test it rigorously as well.The reason is it is included in Google PageSpeed so it must be worth using.

Also I have not included DNS Prefetch for Internet Explorer.As majority of visitors are using Chrome and Firefox only (at least my website visitors).There is no need of unnecessary conditional statement for IE hack.

Consider sharing the post if you found this useful.

Share this post on

2 thoughts on “Implement DNS Prefetch SpeedUp website tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Pranjal Gupta

    Thanks a lot Esha, I am right now implementing this feature on my site, and will definitely share back the results :)

    Reply
    1. Esha Upadhyay

      do test your website on webpagetest or other similar tools you will notice the difference

      Reply