HTML5 Prefetching Api
Note: This post was written in 2012. Link prefetching is still valid, but modern browsers now support more targeted hints like rel="preload", rel="preconnect", and rel="prefetch" — each serving a different purpose. The MDN docs are still the best reference. 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" />
