HTML 5 LINK PREFETCHING

One effort shared by both browsers and developers is making the web browsing experience faster.  There are many common-known ways to keep your websites fast:  using CSS spritesand image optimization, using .htaccess to set file headers for longer caching, javascript file compression, using CDNs, and so on.  I've even detailed some of the website optimization efforts used on this website.  Firefox introduces a new strategy for website optimization:  link prefetching.

What is link prefetching?  From the MDN:

Link prefetching is a browser mechanism, which utilizes browser idle time to download or prefetch documents that the user might visit in the near future. A web page provides a set of prefetching hints to the browser, and after the browser is finished loading the page, it begins silently prefetching specified documents and stores them in its cache. When the user visits one of the prefetched documents, it can be served up quickly out of the browser's cache.

Simply put: the browser downloads designated documents (pages, images, etc.)  the user will likely visit after the current page.  It's even super easy to implement!

HTML5 Link Prefetch Tag

 rel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" />


 rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />

HTML5 prefetching is done via the LINK tag, specifying "prefetch" as the rel and the hrefbeing the path to the document.  Mozilla also answers to a few differently named LINK relattributes:

 rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css" />
 rel="next" href="2.html" />

HTTPS  fetches are also supported.

When to Prefetch Content

Whether prefetching is right for your website is up to you.  Here are a few ideas:

• When a series of pages is much like a slideshow, load the next 1-3 pages, previous 1-3 pages (assuming they aren't massive).
• Loading images to be used on most pages throughout the website.
• Loading the next page of the search results on your website.

Preventing Prefetching

Firefox allows you to disable link prefetching with the following setting snippet:

user_pref("network.prefetch-next", false);

Prefetching Notes

A few more notes about link prefetching:

• Prefetching does work across domains, including pulling cookies from those sites.
• Prefetching can throw off website statistics as the user doesn't technically visit a given page.
• Mozilla Firefox, currently the only browser to support prefetching, has actually supported prefetching since 2003.

So what do you think?  Using spare time to download extra files seems both dangerous and exciting.  Let me know your thoughts!