Wednesday, September 22nd, 2010

HTML5 Link Prefetching

Category: HTML, Performance

a>

From David Walsh comes a good writeup on the HTML5 link prefetch tag:

  1. <!-- full page -->
  2. <link rel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" />
  3.  
  4. <!-- just an image -->
  5. <link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />

You use the link tag to do prefetching, setting the rel to “prefetch” and giving the URL to the resource to prefetch. When should you use link prefetching?

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.

Some things to know about link prefetching though:

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.

Related Content:

Posted by Brad Neuberg at 6:00 am
4 Comments

+++--
3.4 rating from 7 votes

4 Comments »

Comments feed TrackBack URI

Although Firefox is the only major browser, there are about 20 other browsers that support LINK PREFETCH. See the full list on http://Browserscope.org.

Comment by souders — September 22, 2010

Oh man, Ajaxian’s blog still eats HTML tags. The example is gone in the RSS feed too. It’s been so long that it’s funny now, right? I’m laughing out loud over here.

Comment by doublerebel — September 22, 2010

@doublerebel Fixed.

Comment by Brad Neuberg — September 22, 2010

I wrote about this technique half a year ago and am still not convinced (http://devblog.xing.com/frontend/prefetching/)

The effect on the webpage stats is very difficult to justify to the Business Intelligence and Marketing guys.

Besides, when I tested this technique, I had to set some cache header on our html. For a social network with much user stories a tricky task.

And finally: isnt this going to kill the backend ? Image Yahoo! prefetches von yahoo.com the mail.yahoo.com page for every firefox user. All users, who will NOT visit mail.yahoo.com generate unnecessary backend traffic. And those would be millions.

Comment by gekkstah — October 22, 2010

Leave a comment

You must be logged in to post a comment.