Improve Page Load Times With DNS Prefetching

I'm often looking for ways to improve the performance of my websites and provide a better experience for users. Quite often you may find that your site is running efficiently and performing well. You may also have run your application through Google PageSpeed or Yahoo! YSlow and come out with a great score. However, one thing that has always affected my page load times is the time that it takes to lookup the DNS for the different components on a page. For example, the image below shows a waterfall chart for the resources that load on the first page of my blog:

Notice the dark blue part of the bar that appears before most components in the waterfall chart. This dark blue is the time the DNS lookup takes when downloading a resource. It's quite a large percentage of the component download time! Even if the component is optimized and has been minified/bundled/smushed, you still have the DNS lookup to contend with. I used webpagetest.org to generate a table with the DNS lookup times of this website.

As you can see from the image above, those times are quite high and it would be much more efficient if we could cut down on this time and speed it up. Fortunately, there is a cool trick that will make the load time of your webpages happen even faster. It's known as DNS prefetching, and it's really easy to implement. All that you need to do is include the following attribute as a link at the top of your webpage.

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

DNS prefetching is an attempt to resolve domain names before a user tries to follow a link. Once a domain name has been resolved and if the user does navigate to that domain, there will be no delay due to DNS resolution time. On this blog, you hit the main page and are presented with a lot of links to the different posts. If I am able to prefetch the DNS of some of the external links before a user navigates to the next page, I will be able to cut down a huge chunk on the DNS lookup time for the next page. According to the Chromium documentation, if a user resolves a domain name to an IP address and this is cached, the resolution time can be as low as 0-1ms (a thousandth of a second). That is pretty impressive!

I added DNS prefetching to this site and definitely noticed improved load times. There is currently support for this in most major browsers (excluding IE), so it doesn't make sense not to use this in your web applications today! DNS prefetch is a safe HTML5 feature that will simply be ignored if used by older browsers if not supported. If your webpages uses content from multiple domains, this is definitely a clever way to speed up your page load times!