How HTML 5 link prefetching can make your site load faster with one line of code

[begood]

One of the lesser-known jewels of HTML 5 is link prefetching. The idea is to extend the time-honored concept of image preloading to HTML content (and without any messy AJAX code).

Here’s how it works: You add a line like this to your page:

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

Then the browser automatically downloads page2.html in a background process as soon as the user’s computer is idle. When the user finally clicks a link to page2.html, the browser serves it from the cache, and so it loads significantly faster.

Link prefetching is currently only supported by Firefox. But since Firefox is the second most popular web browser in the world, you can noticeably decrease load times for a significant chunk of your users just by adding one line of code to your HTML. Pretty cool, huh?

Here are some ways you could use link prefetching:

* Anytime you split content across multiple pages, as in large articles, online tutorials, image slideshows, etc.

* On your homepage to preload whatever page your users tend to click on next. (That could be the “features” page on a product site or your most recent entry on a blog.)

* On a search engine to prefetch the top result.

You can also use it for static content using the prefetch rel:

<link rel="prefetch" href="/images/big.jpeg">

A couple other interesting points:

* Link prefetching will probably pop up in Opera, Chrome and Safari soon, and in Internet Explorer sometime around 2020.

* If this becomes popular it has the potential to skew logs and stats. Consider what happens when a bunch of prefetch requests are made to one of your pages, but the user never actually visits the page. The server (or stats package) doesn’t know the difference.

To clear this up, Firefox sends along an HTTP header, X-moz: prefetch, but you need some logic on the server side to detect it.

To learn more about link prefetching and see other examples, see the article about it on Mozilla’s site: https://developer.mozilla.org/en/link_prefetching_faq

http://keyboardy.com/programming/html5-link-prefetching/

[sevex]

FF bun articol! Asa da ! Bravo begood

[begood]

* Link prefetching will probably pop up in Opera, Chrome and Safari soon, and in Internet Explorer sometime around 2020.

ahahahahahahahaha !

[cigraphics]

e rau ca ne tine in urma IE

oricum nu o sa mai suport IE 6 in urmatoarele situri

[Flubber]

[...]and in Internet Explorer sometime around 2020.

pwned xD

interesant articolul, multumesc

//LE:

* Link prefetching will probably pop up in Opera, Chrome and Safari soon, and in Internet Explorer sometime around 2020.

ahahahahahahahaha !

mi-ai luat-o inainte, sparg seminte

[Fitty]

E naspa pentru ca trebuie sa bagi o mie de hacks-uri in CSS pentru IE Si nu prea se intelege cu transparenta...