HTML5 Prefetching Api

One common effort done by browser as well as developer is making the browsing experience faster by any means. To achieve this there are several known techniques such as Using CDN (Content Delivery Network), using minified Java Scripts and CSS, using image sprites and even by setting file header for longer caching in .htaccess and so on. There are still thousands of ways, in fact many of them are still unknown. One of all those unknown way is ‘Link Prefetching’.

What is link prefetching?

According to MDN:

Link prefetching is a browser mechanism, which utilizes browser idle time to download or prefetch documents that the user might visit in the near future. A web page provides a set of prefetching hints to the browser, and after the browser is finished loading the page, it begins silently prefetching specified documents and stores them in its cache. When the user visits one of the prefetched documents, it can be served up quickly out of the browser’s cache.

That simply means, ask user browser to download next page which user will visit likely after the current page. With this prefetching API you can prefetch content to <link> tag which may be a document, image etc.

How to implement it?

Implementing prefetching API is simple. Just you have to mention rel=”prefetch” or rel=”next” in <link> tag as follow

<!-- full page --> <link rel="prefetch" href="https://ankurm.com/lab/blog/api/using-localhost-for-facebook-app-development/1091/" /> <!-- An image --> <link rel="prefetch" href="https://ankurm.com/wp-content/uploads/2012/03/logo.png" />

If you are using wordpress then you can implement link prefetching by adding following code in your header.php file just before closing of <head> tag.

<link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>">

Some notes on Link Prefetching

  • Prefetching content does works across domains.
  • It may lead to wrong website statistics as user doesn’t visit the page.
  • Link prefetching works only with <link>. You cannot use it with <a>.
  • Prefetching works only when your browser is idle.

For more information you can visit MDN

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.