HTML5 Prefetching - Preloading Documents

Already in 2003, Mozilla introduced a new mechanism for optimizing the loading of pages. And there is a big chance that the technology will go into HTML5.

The essence of the method is that on any page the browser can specify documents (page, style file, picture) that the user may need shortly. And he caches them in advance.

You can mark documents with the link tag with the attribute rel = 'prefetch' :

1. <!-- --> < link rel = "prefetch" href = "http://www.example.com/" > <!-- --> < link rel = "prefetch" href = "/images/big.jpeg" > <!-- meta --> < meta http-equiv = "Link" content = "</images/big.jpeg> ; rel=prefetch">
2. <!-- --> < link rel = "prefetch" href = "http://www.example.com/" > <!-- --> < link rel = "prefetch" href = "/images/big.jpeg" > <!-- meta --> < meta http-equiv = "Link" content = "</images/big.jpeg> ; rel=prefetch">
4. <!-- --> < link rel = "prefetch" href = "http://www.example.com/" > <!-- --> < link rel = "prefetch" href = "/images/big.jpeg" > <!-- meta --> < meta http-equiv = "Link" content = "</images/big.jpeg> ; rel=prefetch">
5. <!-- --> < link rel = "prefetch" href = "http://www.example.com/" > <!-- --> < link rel = "prefetch" href = "/images/big.jpeg" > <!-- meta --> < meta http-equiv = "Link" content = "</images/big.jpeg> ; rel=prefetch">
7. <!-- --> < link rel = "prefetch" href = "http://www.example.com/" > <!-- --> < link rel = "prefetch" href = "/images/big.jpeg" > <!-- meta --> < meta http-equiv = "Link" content = "</images/big.jpeg> ; rel=prefetch">
8. <!-- --> < link rel = "prefetch" href = "http://www.example.com/" > <!-- --> < link rel = "prefetch" href = "/images/big.jpeg" > <!-- meta --> < meta http-equiv = "Link" content = "</images/big.jpeg> ; rel=prefetch">

')

Where can it be used

• When there is a chain of related pages, you can load the page in advance with the next step.
  For example: a slideshow or a checkout form, paginated.
  .
  
• To upload images or styles to be used in a variety of places on the site.
  .
  
• To upload the next page with search results on the site (Google until recently used this feature).

Despite the fact that at the moment the technology works only in Firefox (and there are also certain security problems ), this method seems to be an adequate mechanism for optimizing modern websites and web applications. Personally, I would like this or a similar solution to be included in the booming html5 standard.

______________________

Link prefetching FAQ

Link prefetching (Wikipedia)