instant.page

Technical details

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

The source code is 330 lines with lots of comments.

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 has support for <link rel="prefetch">, disabled by default, since 13.0.

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 make sure the file hasn’t been tampered with. It’s loaded as a module so that most old browsers won’t execute it.

Browser versions that implemented modules but not subresource integrity were Edge 16, Safari 10.1 and Safari 11.0 from 2017. They account for less than 0.1% of page views today.

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-5.2.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 code just before </body>:
<script src="//instant.page/5.2.0" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>
Copied. Now place it just before </body> on your pages.