HTML5 Link Prefetching

Posted (Updated ) in Uncategorized

Here’s another little gem for you HTML5 fans out there – link prefetching. Adding the following HTML meta or link tags will result in the target being loaded in the background after your current page.

<link rel="prefetch" href="/images/big.jpeg">
<link rel="next" href="2.html">
<meta http-equiv="Link" content="/images/big.jpeg" rel=prefetch">

Both prefetch and next are accepted in the rel attribute.

Here are a few advantages of using this method:

  • It’s HTML compliant
  • It’ll dramatically speed up the resulting page/file if successfully prefetched
  • It doesn’t slow current page load
  • No same-origin restriction – any domain is accepted

There are also several limitations that should be noted:

  • Firefox only (for now)
  • Only HTTP protocol is accepted
  • No URLs with querystrings accepted

To learn more about link prefetching check out the Link Prefetching FAQ at Mozilla Developer Center