Enable DNS Prefetching in WordPress For Faster Loading

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 hear before (or maybe you did), it’s called DNS Prefetching.

It’s a new technique 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, let's get started.

What is DNS Prefetching?

DNS (Domain Name System) Prefetching is a 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 presents inside that page.

So that when someone clicks on any of those links, the browser does 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 reduces 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 problems is through 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 DNS Prefetching?

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, for some case you can see the visual difference.

Let's say you are using a WordPress website with a decent theme which is built using Bootstrap design framework, font awesome 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 builds a connection which those specific servers 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 requests the browser has to make.

So if 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 much better and fast response as the browser already know which IPs it needs to call for.

Doesn’t browsers do DNS Prefetching by default?

Yes, most modern browsers prefetch the DNS of included links by default, if you haven’t restricted that inside your HTML. This is called implicit prefetch.

But as this is an implicit process, many times some external domains get skipped by the browser for much 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 understood 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 click on Start Test.

After this, your webpage test will start and run for a 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.

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 non-WordPress use 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 both 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 automatically 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 the 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 used 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.