instant.page

Technical details

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

The source code is 130 readable lines.

Browser support

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. The popular extension uBlock Origin disables prefetching.

Incompatible browsers

Safari doesn’t support <link rel="prefetch">. The upcoming version 13 supports it, but it’s disabled by default. Hopefully it will be enabled in March 2020.

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.

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 potentially 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 about 1% 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-1.2.2.js" type="module"></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, 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 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.)

Changelog

1.2.2 — March 16, 2019

- Don’t preload when data saver is enabled.

1.2.1 — February 26, 2019

- Fix HTTP links not being preloaded.

1.2.0 — February 23, 2019

- Preload external urls if a data-instant-allow-external-links attribute is present in the <body>, or with a data-instant attribute on the <a> element.
- Only preload HTTPS links, and HTTP if not on HTTPS.

1.1.1 — February 23, 2019

- Fix an error on <a> elements without a href attribute.

1.1.0 — February 10, 2019

- Add ability to whitelist a link with a data-instant attribute.

1.0.0 — February 7, 2019

Initial release.

Put this HTML snippet just before </body>:
<script src="//instant.page/1.2.2" type="module" integrity="sha384-2xV8M5griQmzyiY3CDqh1dn4z3llDVqZDqzjzcY+jCBCk/a5fXJmuZ/40JJAPeoU"></script>
Copied. Now place it just before </body> on your pages.