Alexandre Dieulot (@dieulot) makes instant.page.
Despite having more bandwidth than ever, web pages don’t load much faster. That’s because the bottleneck is latency, and unfortunately it’s here to stay due to the limitations of physics.
Cheating latency
We can actually bypass latency — with preloading. More specifically with the prefetch resource hint, .
Last year in Performance Calendar, Katie Hempenius gave a tour of prefetching, with two interesting tools: quicklink which preloads all visible links in the page as the user scrolls, and Guess.js which preloads pages that are often visited according to your analytics.
There are problems with both of these tools though, quicklink makes an enormous amount of requests and Guess.js is intensive to set up.
A better solution: just-in-time preloading
Ideally we’d want to preload a page only when there’s a good chance that the user is going to visit that page.
On desktop, before a visit happens there is another action that happens: hovering over a link. When the user has hovered for 65ms, there is one chance out of two that the user is going to click (usually; it depends on the site’s layout). And when they have hovered for 65ms, there is on average over 300ms to preload the page. Enough to make a page instant, minus the time to render.
On mobile, before tapping a link the user starts touching their display (touchstart). There is on average 90ms to preload the page there. Because actions taking less than 100ms feel instant to the human brain preloading there feels instant on good 3G (assuming your pages are fast to render).
If you want to be virtually sure that a click is going to happen before preloading, there is another event before a click: mousedown, when the user starts pressing their mouse button (a click is when they release it). This leaves on average 80ms to preload the page, making pages that are fast to render feel instant too.
You can now have that behavior enabled on your site in just 1 minute with instant.page, which weighs just 1kB.
The future
This isn’t a new idea. Back in 2014 I released InstantClick which similarly made pages instant but used Ajax and pushState instead of prefetch, making a site a single page application and cutting down on scripts and styles reevaluation as well as avoiding the browser’s chrome jumping around on page change on mobile, making a site feels faster than any other.
Unfortunately InstantClick is mostly a proof of concept because it lacks good documentation. But I do plan to reboot it in 2020, rebranding it as “instant.page extraâ€.
When instant.page extra rolls out, you’ll be able to have the fastest-loading pages in the world. Until then, take one minute to enable instant.page on your site to have near-instant page loads thanks to just-in-time preloading.