As developers, we’re constantly trying to make our products perform well. We’ll make your stuff look good, but also aim to make it as fast as possible. Because hey, people don’t like to wait around until your slow clunky page has loaded. Sounds familiar right? That’s the reason we do caching, minifying, image compressing and use CDN services.
Some optimizations however don’t necessarily speed up your site, but improve the overall experience of the user while browsing through pages on your website. A while ago I read an excellent article about link prefetching and pre-rendering content. This HTML5 native technique basically allows you to load content to be used later while the browser is idle. This can be anything, from a JS resource needed in a following page, up to a complete webpage. This results in this prefetched content being almost instantly displayed when needed.
It’s as simple as placing this inside the
<link rel="prefetch" href="http://www.zwaarcontrast.nl">
Or to render a complete page in advance:
<link rel="prerender" href="http://www.zwaarcontrast.nl">
Support for the prefetch feature is actually pretty good, only Apple’s Safari isn’t onboard. (And Opera Mini, but does that browser actually support anything?) Pre-render is currently supported by Chrome, Opera and Edge. It’s worth noting pre-rendering will not work for https pages.
I implemented this feature as a test case in my pet project Katwijk in Oorlog. On the bottom of every article page you will find a link to the next article. When the link almost scrolls into view, the page will be prefetched. You’ll benefit from pre-render if you’re on Chrome or Edge. I chose to implement pre-render and prefetch because the link at the bottom of the page is very likely to be clicked, as it’s the only prominent link at that part of the page. Navigating to the next article will feel almost instant. A slightly adapted version of the code used in this testcase can be found in this Codepen.
- Support table for prefetching:
- Support table for pre-rendering
- Article on perception of time:
- Very elaborate article on prefetching and preloading: