Preloading is done with <link rel="prefetch" href="url">.
The source code is 125 readable lines.
Star on GitHub
instant.page is progressive enhancement — there’s no impact on browsers that don’t support it.
Chrome has full support.
Firefox supports <link rel="prefetch"> but will redownload the page if it’s not cached.
Safari doesn’t support <link rel="prefetch">.
UC Browser doesn’t support modules, but it should support them later this year as a new version based on Chrome 69 is in preparation.
Edge doesn’t support <link rel="prefetch"> but is going to adopt Chrome’s engine which does.
instant.page’s script is hosted serverless with Cloudflare Workers so that there’s no server to hack into.
Additionally, it uses subresource integrity to let modern browsers verify that the file hasn’t been tampered with. It’s loaded as a module so that most old browsers won’t execute it.
The idea of preloading web pages on hover and touchstart comes from an older library of mine, InstantClick, which uses Ajax and history.pushState instead of <link rel="prefetch">, transforming a site into a single-page application. It makes a site even smoother but requires additional work.
InstantClick is unfortunately mostly a proof of concept as it doesn’t have good documentation.
Google’s recent release of quicklink, which preloads links with <link rel="prefetch"> as soon as they are shown, made it clear that I should focus on building a “lite”, easier to use version of InstantClick, which is instant.page.
Future related projects
InstantClick provides one of the smoothest experiences possible, while still not requiring as much work as a framework (who give lesser results), so I’m considering working on it again later on.
I also plan to research how this just-in-time preloading concept might fit into React/Vue/Angular, as those are popular and incompatible with InstantClick’s simplified SPA model. (I currently have no experience with those frameworks.)