HTML5 – Link and DNS prefetching

link and dns prefetching

In a world where instant gratification is paramount, it is imperative that our web applications are optimized for speed and performance. HTML5 has two features that many developers are unaware of, namely prefetch and prerender. ‘Excuse-moi?’ I hear you say. Well maybe not in French, but you know what I mean. Let me elaborate.

Link prefetching and prerendering

The prefetch HTML5 feature allows the developer to silently fetch a page or asset as soon as the page loads. This page or asset will therefore instantly load when the user makes the request via a designated link. This feature only fetches that exact specified resource (URL).

Content prefetching and prerendering can be invaluable in dramatically speeding up your website by shaving off valuable milliseconds on http latency.

This dramatically improves load speeds of your pages and is especially useful for mobile applications.

Prerender on the other hand will render the whole page in the background albeit with some limitations. Use these features sparingly however, as over use can prove counter productive (Well, like anything in life, too much of anything is…). Only prerender pages that are likely to be visited by the user. And the code? In the head section of your web page, add the following code replacing the href values with your own.

Prefetch and Prerender examples


<link rel="prerender" href="http://www.webdevhub.co.uk/about-me.html" />
<link rel="prefetch" href="http://www.webdevhub.co.uk/assets/my_logo.png" />

Adding the code above to the head section will prerender the about-me.html and prefetch my_logo.png in the background as soon as the page loads making those two items available as soon as they are requested. Since a round trip to the server is not required when the user clicks on the about me link, the page will load almost instantaneously.

DNS Fetching

In order to reach a given hostname, the browser needs to do some work to resolve the underlying domain or DNS. This has a speed overhead. DNS prefetching allows you to manually specify which domains to prefetch and here is the magic:

DNS prefetching


<link rel="dns-prefetch" href="http://www.asp.net/ajaxlibrary/cdn.ashx" />
<link rel="dns-prefetch" href="//ajax.googleapis.com/ajax/libs" />

In the code above we are explicitly telling the browser to resolve the two domains. This is all done in the background unobtrusively and in turn improving HTTP latency.

Google uses prefetching on its results page to provide instant pages. As soon as you enter your search query and Google is fairly certain of what you are looking for, it starts prerendering the pages using the techniques above. So when you click on any of the results, the page appears to load almost instantaneously.

Support and implementation of the above features is still in flux but, here is a simple guide to follow;

Chrome

prerender – resolves DNS, loads URL, loads whole page.
DNS-prefetch – resolves DNS.

Firefox

prefetch – resolves DNS, loads URL
DNS-prefetch – resolves DNS.

IE9+

DNS-prefetch – resolves DNS.

If you want to prerender a page in browsers that support this feature (Chrome), and prefetch in other browsers (Firefox and IE9+), you can pass both features in the rel attribute.
  <link rel=”prefetch prerender” href=”…” />

In conclusion, patchy support should not stop you from using these and other HTML5 features in your projects, as long as you provide a fall back where possible for browsers that do not support a given feature.

Happy coding!

Leave a Reply

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