HTML5 Link Prefetching (or “The Most Dangerous Tag”)

Posted on June 3, 2010 by Tim Rosenblatt

Check this out!

<link rel="next" href="page2.html">

With HTML5, that’s all you’ve got to do to preload a page. Hat tip to Conner over at keyboardy for pointing this out. It’s like cheating on behalf of your users, to get them faster page loads. Of course, this is what “web accelerators” have done for years, so it’s good of the W3C to add this feature to the spec.

He mentions a few example use cases to get the creative juices flowing, and more importantly, points out that this technique can dramatically change your server stats. So, if you’re using a package to analyze web server logs, you’ll need to account for pages being preloaded. Right now only Firefox supports this next/preload feature, and it sends a custom header with the request. I imagine other browser makers will too. Still — use of this feature could mean all old and unmaintained stats packages are useless — aren’t you glad you use open source and can edit the package to account for the new header? :D

One thing that he didn’t mention is the implications for your server. Let’s say every page has a single “next” page referenced — just one and no more. If you’ve got a bounce rate of 50%, you’ll be serving a lot of pages that no one will ever see. Static sites don’t have to be concerned — serving flat files is a no-brainer. But, if you’ve got a dynamic site, lots of uncached data, and a service that’s routinely around 60-70% capacity on a normal day, you could overload a web or DB server. Put more than one prefetch instruction per page, and the load goes up even more. Ops teams take note — a bad template or front-end decision could easily double your traffic overnight, without the upside of gaining additional users. This potential for crashing means we could be talking about the single most dangerous HTML tag  — worse than <blink> and <marquee>.

Edit: mcotton, a Hacker News commenter pointed out that a nice solution is to configure your server to ignore requests with the preload header if they are above a certain load.

Be Sociable, Share!
This entry was posted in Uncategorized and tagged , , , , , , , . Bookmark the permalink.
  • http://parastudios.de Christian Engel

    An Idea that came to my mind:
    What about using JavaScript to add the “rel='next'” dynamically to links which are being hovered by a user. If the browser already starts loading the page while I'm just hovering the link before klicking it I could save up to one second of loading time.

    Okay, that's not much and propably users are going to hover some links that they will never visit but I think this approach would be better than blindly adding the rel-attribute to links you think the user might visit next.

    Also it might be a good idea to observe the user's behavior to check out which pages he's using more often and adding the rel-attribute to this links.

    • http://www.cloudspace.com Tim Rosenblatt

      Those are some clever ideas. I bet that could be made as a generic plugin — after the document loads, grab all the link tags, and put onhover events on them.

      I think you could put a short timer — if someone is over a link for more than 50 ms, or so. That way it won't get triggered just from a mouse passing over it, but if they actually pause, to add that.

  • csulok

    I agree that this is a dangerous tag but I believe in it. I think the danger comes from having to change so many areas in the stack.
    If the browser sends this special header, depending on the type of request, the webserver should ignore the request in case of high CPU/disk IO/net load. There's also a possibility of serving partial content for static files where the range header is supported.
    The browser has responsibilities too in treating a feature like this very carefully. You don't want to slow down the network, you don't want to cause noticable CPU or memory increase.

    For what it's worth, I read about this feature a week ago even though it's been in gecko for like 7 years and tried it with static content (load the css and javascript file for the data page when viewing the frontpage of this search engine I have) and interestingly, the css file was applied to the current page I viewed.

  • Anon

    >Right now only Firefox supports this next/preload feature

    well, opera atleast also has a forward button. maybe it actually was the first browser, but not sure if it also preloads..

  • Pingback: Note : Aujourd’hui, je suis tombé par hasard sur un arti […] | Les intégristes