HTML5 DNS & Content Prefetching: Speed up your website

Since from its inception, HTML5 has been in the radar of web developers and designers. It has brought several exciting features to control how the web page will look and function. Although, HTML5 is still not fully ready and will take another few years to complete, most of the modern browsers have already implemented many of its feature – and for good! In this article, I am going to discuss about one of the great features of HTML5 which will definitely improve your page loading time and visitor’s experience.

Content Prefetching

Do you know that you can actually prefetch contents of the next page your user is likely to visit? Let me explain how it works. Suppose you have an article divided into several parts. Your visitor comes to the first part, waits the page to load and starts going through the content. At that time the browser is idle because it has already loaded all the contents for this page. But what if after loading the current page, it automatically starts prefetching the contents of next page silently and keeps it in cache. This way, when your visitor clicks on next page, it takes quite lesser time for page to load. Isn’t it great?

html5-prefetching

HTML5 content prefetching does exactly the same. All you have to do is to define the links of the pages which you want the browser to preload. The preloading of the pages is performed in background only after the current page loaded fully. All this is possible just with a single line of HTML code:

<link rel="prefetch" href="http://www.webtutorialplus.com/infinite-scroll-with-jquery/" />

And if you want more, you can even render the pages in advance. You can use HTML5 prerendering feature which will not only preload the contents but will also keep it rendered to the browser making it much faster than prefetching.  This is also because with prefetch, the browser loads only the top level document and not the sub resources like JavaScript files, images and CSS. But with pre-render, the next page is ready to be rendered and will load almost instantly. It is like opening the next page in a hidden tab!

<link rel="prerender" href="http://www.webtutorialplus.com/infinite-scroll-with-jquery/" />

When you should use Content Pre-fetch & Pre-render

Don’t start putting prefetch and pre-render in all your web pages – it may actually annoy your visitor. With every prefetch and pre-render you define, the browser will keep on loading the contents in the background. This will unnecessarily consume the bandwidth and slow down the loading of other web pages.

Prefetch and Prerender features are great – but use it judiciously! It will be great for the contents which are divided in several parts where the user is most likely to click the “next page” link.

 DNS Prefetching

Just like contents, the DNS can also be prefetched saving the time required to resolve the host name. With HTML5, you can direct browsers to prefetch and resolve the DNS of the domains of websites which you have linked to or where you are getting the static contents (like JavaScript, media files, etc.) from.

Many of the modern browsers today (like latest version of Google Chrome & Firefox 3.5 or later) will try to automatically do DNS prefetching, but you can manually define which DNS you want to resolve in advance. For example, if you are using Google Analytics and Google Fonts, it will be a good idea to define the DNS Prefetching for these.

<link rel="dns-prefetch" href="//google-analytics.com">
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//platform.twitter.com">

Same as content prefetching, DNS prefetching happens in background and the DNS is already resolved for the external domains from which you require the resource files. This can greatly reduce the latent time required to resolve various host names.

Will DNS Prefetching increase my current Page loading time?

HTML5 Boilerplate recommends using the codes for DNS prefetching in the head section immediately after Meta Charset element so that browser should act on them as early as possible. That’s true, the domain name resolution occurs in parallel with the fetching of the content of current page. But is it going to slow down the loading time of current page?

The answer is no. This is because DNS requests take very little bandwidth. It is the latency of the domain name resolution process which takes so much time. So, while the DNS is getting resolved, your current page will not load slower. This is because the bandwidth is hardly getting affected.

Conclusion

Content and DNS prefetch can actually boost-up the website speed and improve the visitors’ experience. While you can straightaway implement DNS prefetching, take some care in defining content prefetching and especially content prerendering. Using it for the links which is likely to be clicked by the visitors will highly improve their experience.

There are several innovative features in HTML5 to improve the performance and experience, prefecth is one of these. What is your view on DNS and content prefetching? Are you going to use it in your website?

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>