The typical journey for a person browsing a website: view a page, click a link, browser loads new page. That’s assuming no funny business like a Single Page App, which still follows that journey, but the browser doesn’t load a new page — the client fakes it for the sake of a snappier transition.
What if you could load that new page before the person clicks the link so that, when they do, the loading of that next page is much faster? There are two notable projects that try to help with that:
- quicklink: detects visible links, waits for the browser to be idle and if it isn’t on slow connection, it prefetches those links.
- instant.page: if you hover over a link for 65ms, it preloads that link. The new Version 2 allows you to configure of the time delay or whether to wait for a click or press before preloading.
Combine those things with technological improvements like paint holding, and building a SPA architecture just for the speed benefits may become unnecessary (though it may still be desirable for other reasons, like code-splitting, putting the onus of routing onto front-end developers, etc.).
That’s a great idea.
But what I would do on top of that, is also monitor the usual behavior of users, and preload those that get a high chance of click through based on a number of conditions.
https://guess-js.github.io/docs Can this be something of interest?
This is something really useful. I’ll look onto insta.page and see how well it integrates to simple static websites.
What about huge websites with lots of links in the menu? Won’t this load the complete website and is this really what we want the user to do? Might be super cool for small pages, but not a whole website
For WordPress, check out Tada – it uses intant.page — https://wordpress.org/plugins/tada/ Works great out of the box with most themes.
I have personally used swup.js which works really well. You can see it here if interested http://samenvattingen.woutermissler.nl
What a nice time for this article, 4 days ago, I’ve searched similar solutions like instantClick and other ones, either the library doesn’t work or not working perfectly. I will try these…Thanks so much.
These sentences kind of took me by surprise. Usually every time I see an SPA redesign in the wild it’s markedly laggier and jankier. I thought SPA tech was more for developer convenience, whereas user-end speed was more of a sacrifice willing to be made. After all, loads of javascript is served, then it actually occupies the main thread doing a bunch of CPU-heavy stuff. Very very curious how this is supposedly faster than traditional server-rendered tech.
Would be interesting to combine these techniques with existing SPA architecture to prefetch the next route’s data and allow for truly instant transitions.
Would pre-loading a page cause problems with Google Analytics?
Reminds me on Amazon, prepare shipping, items you have in your shopping card, before you actually buy them.
I currently use Flying Pages (https://wordpress.org/plugins/flying-pages/) and enjoy it a lot.
Agree with Ryan. Flying Pages (https://github.com/gijo-varghese/flying-pages) has the features of both the Quicklink and the Instant.page. If you’ve too many links in the view-port, Flying pages stops preloading if the server is busy and preloads only a few requests per second. So far, it works great on static site as well as on WordPress sites
Gatsby already does it! When user hovers any (internal) link, it prefetches the new page providing great UX.
You can try it on Gatsby website (https://www.gatsbyjs.org/) – open Network tab in Dev Tools and hover on any link to see it in action.