How to enable DNS Prefetching in WordPress

As a webmaster or a website owner we always want our site to be fast and optimized so that we can provide a good user experience to all of our visitors. Creating a good and optimized website include many different parameters, starting with design, code quality, caching, server quality and many other things. But most of us already know this right, so why am I writing this post? Well, today I’m going share a new optimization technique with you which you might not heard before (or may be you did), it’s called DNS Prefetching. It’s a new techniques used by professional webmasters to tune websites a little bit more. In this post I’m going to discuss what DNS Prefetching is, why you should use it and how to implement it for WordPress and non WordPress sites. So, lets get started. 🙂

What is DNS Prefetching?

DNS (Domain Name System) Prefetching is method of informing the browser of domain names referenced on a site so that the client can resolve the DNS for those hosts, cache them, and when it comes time to use them, have a faster turn around on the request. the browsers prefetch the DNS of the links present inside that page. So that when someone clicks on any of those links, the browser do not have to make the dns calls to know which ip address to call for that specific link. Your browser already knows that and prefetched the DNS while it is loading the page. This feature is really nifty and sweet as it reduce a lot of redirecting and loading time. This is also a good optimization standard as per Google and if you check the source code of professional webmaster you might find that many of them are currently using DNS Prefetching on their website. One of the major problem is though DNS Prefetch only works on Firefox 3.5+, Chrome, Safari 5+ and/or IE 9+, so browsers older than this might not support DNS Prefetching properly.

Why should we use it?

This is a really good question with a simple answer i.e. to build a more optimized and fast loading website. Though you might not find a significant difference in loading time after enabling DNS Prefetching, but for some case you can see the visual difference. Lets say you are using a WordPress website with a decent theme which is built using Bootstrap design framework, fontawesome icons, many external css and javascript codes, external scripts loading from social network sites like twitter, facebook, etc. and many more. Now when you load the website in your browser, the browser has to initiate a DNS call for every single domain to understand that which ip address it is associated with and then it build connection which those specific server to load up the content.

Now this might sound really small to bother about right? Well not completely. You see if your website has to load many external domains or you have links inside your website which again redirected to another site and so on, DNS Prefetch can be really helpful. If you have a website called example.com where you have included a link of test1.example.com/somethging.html clicking on which it gets redirected to test2.example.com you can see that how many DNS request the browser has to make. So id you would have told the browser that you have these external domains added in your, it would have prefetched the DNS and which you click on those links, it would give a a much better and fast response as the browser already know which ips it need to call for.

Doesn’t browsers do this by default?

Yes, most modern browser prefetch the DNS of included links by default, if you haven’t restricted that inside your HTML. This is call implicit prefetch. But as this is a implicit process, many times some external domains get skipped by the browser for many different internal reason. This is why we use explicit prefetching where we tell the browser that which external domains it must need to prefetch the DNS, beside the dns prefetch it does implicitly.

How to figure out the list of external domains in use

Ok, so now as you have understand why we should use DNS Prefetching and how awesome it is, you might be thinking whether is an easy way to find out the list of the external domains that are working on my website. Well, there is a very easy way to do that. First you have to figure out the page or post which is using most of the plugin features. Generally it is always the single blog post page. Now visit www.webpagetest.org and enter any of your single blog post (or the page uses most requests) link and clieck on Start Test. After this your webpage test will start and run for few seconds. Then when the test completed, click on the Domains section from the top navigation menu to see the list of external domains the browser has requested for along with the number of request for each external domain.

Get external request domain names

So now as you have our list of external domains, you are just one step behind from activating DNS Prefetching on your website. So, let’s dig into the coding procedure of implementing DNS Prefetching on your website.

DNS Prefetch for non WordPress users

If you are a non WordPress uses what you have to do is just add one HTML meta tag and one link tag for each external domain into the head section of each webpage. You should put this code just after starting the head tag. See the below sample code to understand it.

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//example.com">
<link rel="dns-prefetch" href="//some-other-external-domain.com">
<link rel="dns-prefetch" href="//ajax.googleapis.com">
<!-- Rest of your code goes here -->
</head>
<body>
<!-- your code inside body -->
</body>
</html>

As you can see that I did not use either http:// or https:// as protocol or the external domains instead I’ve used relative protocol concept while adding these external domains. As dns-prefetch support relative protocol, always use the external website addresses without hardcoding the protocol and use like //www.example.com, where // denotes that this link will work over bothe HTTP and HTTPS protocol. So if the parent website is over HTTP, this link will work like any other HTTP link, but if the parent site is over HTTPS, the link will aumatically call the HTTPS version of this link, so you don’t have to change the code all times.

DNS Prefetch for WordPress users

WordPress uses can’t just add the DNS Prefetch code like way I’ve explained above because it is not good to edit the header.php of your theme. In future if your theme developer updated the theme for some reason, you are going to lose all of your changes that you have made inside the header.php, that is why it is always better to use the below function to add your DNS Prefetch code into the head section of your wordpress website. I’m sharing a small function that I’ve written and use for my personal as well as my client website. Just copy and paste this code at the end of your active theme’s functions.php file and change the sample external domains with the external domain name you want to put and you are good to go. So, here is the code.

//* Adding DNS Prefetching
function ism_dns_prefetch() {
    echo '<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//some-external-domain1.com" />
<link rel="dns-prefetch" href="//some-external-domain2.com" />
// keep adding more here if you want
<link rel="dns-prefetch" href="//some-external-domain3.net" />';
}
add_action('wp_head', 'ism_dns_prefetch', 0);

This simple wordpress function would be enough for adding DNS Prefetching in your website. Just remember to change the domain names with the external domain names you want to add and use the //as relative protocol.

Conclusion

I hope this small tutorial will help you guys to build a more optimized, fast and better website. Please let me know if this helps you to build a better website in the comment section below. Also if you have any future topic request, let me know that too. I would love to hear all of your comments 🙂