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" />

Continue reading HTML5 Prefetching Api →

Whether you’re a web developer or just an everyday user, you’ve probably encountered Drag-and-Drop file uploading. You use it when tossing photos onto Facebook or attaching files in Gmail. Drag-and-Drop isn’t exactly a new concept—it’s how we’ve been moving files around our desktops for decades. But while there are thousands of tutorials covering how to build Drag-and-Drop uploads for the web, very few talk about Drag-and-Drop downloads. Let’s take a quick look at how to implement this cool HTML5 feature.

What exactly is Drag-and-Drop Download?

If you’ve ever used a cloud service like Box, you might have noticed that you can drag a file directly from your web browser and drop it onto your desktop to download it. You can even drag a file straight into your printer’s queue or drop it into a messaging app to send it to a friend. It completely eliminates the tedious “Right-Click -> Save As” workflow and saves you from having to dig through your file system.