Making websites faster is something both developers and browsers are constantly working on. There are plenty of well-known techniques for this — CDNs, minified JavaScript and CSS, image sprites, smart caching headers in .htaccess, and so on. But one lesser-known technique that most developers overlook entirely 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.

In simple terms: you hint to the browser which page the user is likely to visit next, and the browser quietly downloads it in the background during idle time. When the user clicks through, the next page loads nearly instantly because it’s already cached.

How to implement it

It’s just a <link> tag with rel="prefetch" or rel="next":

<!-- Prefetch a full page -->
<link rel="prefetch" href="https://ankurm.com/lab/blog/api/using-localhost-for-facebook-app-development/1091/" />

<!-- Prefetch an image -->
<link rel="prefetch" href="https://ankurm.com/wp-content/uploads/2012/03/logo.png" />

If you’re using WordPress, you can add link prefetching to your header.php file just before the closing </head> tag:

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

A few things to keep in mind

• Prefetching works across domains.
• It can skew your analytics, since the browser fetches the page even if the user never visits it.
• It only works with <link> tags, not <a> tags.
• The browser only prefetches when it’s idle, so it won’t slow down the current page.

For more details, check out the MDN prefetching FAQ.