InstantClick is a pretty popular JavaScript library (4,344 stars, as I type). This is the gist:
Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). InstantClick makes use of that time to preload the page, so that the page is already there when you click.
You hover a link, it Ajaxs for that page and prerenders it. On click, it replaces the <body> and <title> and changes the URL.
I just heard about it. Seems pretty smart. Progressive enhancement. Increased perceived performance. I can imagine one objection being bandwidth concerns. Downloading every page I hover over seems a bit bandwidth greedy.
It got me thinking though… isn’t there a newfangled prerendering thing? There is:
<link rel="prerender" href="(url)">It’s not that newfangled, actually. Steve Souders wrote about it in 2013:
This is like opening the URL in a hidden tab – all the resources are downloaded, the DOM is created, the page is laid out, the CSS is applied, the JavaScript is executed, etc. If the user navigates to the specified href, then the hidden page is swapped into view making it appear to load instantly.
Can I Use shows decent support:
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 13 | No | 11 | 79 | No |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 123 | No | No | No |
Doesn’t that mean we could do something like this?
var links = document.querySelectorAll('a');
[].forEach.call(links, function(link) {
link.addEventListener("mouseenter", function() {
var newPreLoadLink = document.createElement("link");
newPreLoadLink.rel = "prerender";
newPreLoadLink.href = link.href;
document.head.appendChild(newPreLoadLink);
})
});The question is if dynamically-inserted link elements like that actually trigger the prerendering. I did a fairly primitive test in Chrome, and it didn’t seem to work. Oh well.
If you wanted to be even more predictive than hover, you could try Premonish, “A library for predicting what element a user will interact with next.”
If you’re interested in this kind of thing, prerendering isn’t the only kid on the block. Robin wrote about it all last year.
On the one hand awesome, less perceived wait time. On the other … I spend so much time in limited bandwidth areas its a bit like the video auto play if set to on, it kills all while trying to buffer or play.
I would find it okay if the browser was more automatic, hmm this is taking a bit of time/resources, do you want to …
LOL, and the land and wireless service provider is high bandwidth low data cap to reduced bandwidth.
I have the same concerns. In my opinion the Browser should decide when to preload a site and when he should better not. When you are in a underdeveloped country like Germany (with respect to Internet) this could easily make the experience even worse. Maybe one should consider to make the page load as a progressive web app, so that the (android) user does not have to load things twice.
But whenever you are on Desktop and could figure out how fast the connection is, this lib may be an advantage for the user..
This feature would be a real bandwidth and system resource chugger. If a user hovers on a link but eventually does not click it, the bandwidth spent downloading the page and the resources spent rendering it are a waste.
I say this because more than 60% of the time, I personally hover a link and then look at the status bar to see where the link will take me before I click it. I think a lot of other people do so too.
I’m still glad this feature was created. Kudos to the creator. He’s open the door to awesome possibilities of what can be done to improve it. Even the creator can improve it. Well done.
Ajaxing and replacing the document doesn’t have to be on hover. You can do this on click, and it’s still a dramatic speedup for non-SPA websites. This technique is usually called “pjax”. I wrote a tiny library that does this automatically, been using in production for over a year. Might want to try: https://github.com/Mitranim/simple-pjax
I wrote a Rails gem for adding prerendering tags to your pages last year. Wrote a whole article about it too! https://jack.ofspades.com/prefetching-preloading-and-prerendering-content-with-html/
As always very useful tricks, thanks for sharing
I actually think this is great. I just has to be selectively used. Specifically things that relate to the conversion funnel like checkout, login, signup, wish lists and landing pages with a specific conversion gaining end goal.
This is interesting, this is indeed done some way by browsers
Imagine the effect of this approach when scrolling on a page with multiple links