instant.page

Technical details

Preloading is done with <link rel="prefetch" href="url">.

The source code is 200 readable lines.

Browser support

instant.page is progressive enhancement — there’s no impact on browsers that don’t support it.

Chrome and Chromium-based browsers have full support since version 61 (shipped in September 2017).

Firefox supports <link rel="prefetch"> (since 2006!) but will redownload the page if it’s not cached (it’s a open bug).

Incompatible browsers

Safari 13.0 has support for <link rel="prefetch"> but it’s disabled by default. Hopefully it will be enabled at the end of March 2020 in Safari 13.1.

UC Browser doesn’t support modules as it’s based on Chromium 57. A new version based on Chromium 69 which supports modules was announced in October 2018 but it has yet to ship.

Secure CDN

instant.page’s script is hosted serverless with Cloudflare Workers so that there’s no server to hack into.

Cloudflare provided me with free Workers in order to be able to securely serve the script to a very large number of people.

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 only browser versions that implement modules without implementing subresource integrity are Edge 16, Safari 10.1 and Safari 11.0. They account for 0.5% of page views.

Self-hosting

Hosting the script yourself is also possible. Download the latest version then add a module script tag just before </body>:

<script src="instantpage-3.0.0.js" type="module" defer></script>

You can also install it via npm: npm i instant.page

History

The idea of preloading web pages on hover and touchstart comes from an older library of mine, InstantClick, launched in January 2014, 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 just a proof of concept as it doesn’t have good documentation.

Google’s release of quicklink in December 2018, 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, launched in February 2019.

Future related project

InstantClick provides the smoothest experience possible, while still not requiring as much work as a framework (who give lesser results), so I’m considering working on it again later in 2020. It will be renamed to “instant.page extra”.

Put this HTML snippet just before </body>:
<script src="//instant.page/3.0.0" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>
Copied. Now place it just before </body> on your pages.