instant.page

instant.page 2.0 — Preload pages when the user is sure to click

instant.page makes your site’s pages instant — in 1 minute of effort — by preloading pages right before a user clicks on them: when they hover over a link for 65 ms; there’s one chance out of two that they will click then. On mobile, it preloads when they start touching their display, before releasing it.

Preloading when the mouse is pressed

Version 2.0 introduces a new option: preloading when they start pressing their mouse (mousedown), right before they release it.

This makes pages load on average 80 ms faster with virtually zero unused requests.

To enable it on your site:

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.

Then add data-instant-intensity="mousedown" as an attribute to the <body>. If you want to preload only on PC and not on mobile on touchstart, use data-instant-intensity="mousedown-only".

Adjusting the delay on hover

Another option in 2.0: set a custom delay before preloading on hover. It’s useful to increase the delay on some sites with a lot of huge click targets (like some e-commerce sites) where the 65 ms rule doesn’t apply. Or you can reduce it if you don’t care about making a lot of requests.

Just pass the number of milliseconds to wait in the attribute, like so for 150 ms: data-instant-intensity="150".

Conclusion

100 ms of reduced wait can increase your conversion rate by 1% (see the footnote on the home page), so any speed improvement is good to take.

There was little reason not to use instant.page before, there is even less now.

Trusted by:

Adidas Spotify Rakuten Interflora PepsiCo islam.com APKMirror 000webhost Lifehack Android Police Сноб Yoast AS Saint-Etienne SmashingConf Hodinkee And thousands of others…
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.