Instant.page is a free and open source library that uses instant preloading, which means it preloads the page before the user clicks on it. Preload pages only when there is a good chance a user will visit the page, and only preload HTML, respecting your user and server bandwidth and CPU. It uses passive event listeners so that your page stays fluid and doesn’t preload when the user enables the data saver.

The Instant Pages feature lets you automatically prefetch URLs in the background after the user hovers over a link. This results in almost instantaneous load times and improves user experience and perceived performance (how fast the website feels). We utilize the Instant.page library developed by Alexandre Dieulot.

How to use Instant Page to improve page loading speed

How Prefetching Works

The above is the best combination in terms of performance gains and low utilization of servers and mobile devices. The feature respects whether your mobile device (Android, iPhone) has data saver or low data mode enabled. If on, nothing will be preloaded.

Since this function works on mouseover, it won’t show up on the speed test tool. But we encourage you to click through to your site after enabling it. You should feel the difference!

Amazon and others have found that eliminating 100 milliseconds of latency can increase sales by 1%. But latency on the network is hard to overcome.

Instant.page uses instant preloading – it preloads the page before the user clicks on it.

(1) Desktop side

Before the user clicks the link, they hover over the link. When the user hovers for 65 milliseconds, there is a 1 in 2 chance of clicking on the link, so instant.page starts to preload at this point, and the page preloads average more than 300 milliseconds.

Another option is to load the page when the user starts to press the mouse without preloading. This resulted in zero unused requests, while still improving page loads by an average of 80ms.

You can also preload immediately on hover or when a link is visible, and trigger a click when the user starts pressing the mouse, making your page the fastest in the world.

(2) Mobile terminal

Users start touching their monitors before releasing, allowing an average of 90ms for the page to preload.

Another option is to preload links as soon as they are visible.

trick the brain

The human brain treats actions of less than 100 milliseconds as instantaneous. So instant.page makes your page feel instant even on 3G (assuming your page renders fast).

Easy access to your servers and users’ data plans

Preload pages only when there is a good chance a user will visit the page, and only preload HTML, respecting your user and server bandwidth and CPU.

It uses passive event listeners and requestIdleCallback to keep your page fluid. It respects the data protection model. It’s 1kB and loads after everything else. It is free and open source (MIT license).

Additional options with data attributes

You can enable additional options for instant pages using the following data-instant properties. Just add any of these attributes to the <body> tag in your document and we’ll do the rest.

You can learn more about what these different properties do at instant.page. See below for some ways to add some of these attributes to the <body> tag.

Preload time settings

By default, instant.page is preloaded for 65ms after hovering a link and when mobile users start touching their display. There are other options.

Preload when mouse is pressed

To load the page when the user starts pressing the mouse button, add data-instant-intensity=”mousedown” as an attribute to the <body> before releasing it.

Page preloading takes an average of 80ms.

To use this way on desktop instead of preloading on mobile, use data-instant-intensity=”mousedown-only”.

Adjust Hover Delay

For some sites with a lot of hits, like some e-commerce sites, the 65ms rule doesn’t apply: it preloads more than twice for each page visited.

To increase the hover delay, pass the number of milliseconds in the property, for example 150ms: data-instant-intensity=”150″.

Or if you don’t care about making a lot of requests, you can reduce it.

Preload links as soon as they are visible

On small mobile devices (such as smartphones), if you want your pages to be instant in more situations, you can preload links as soon as they are visible.

To do this, add data-instant-intensity=”viewport” as an attribute to <body>.

“viewport-all” You can also use to do this on other form factors if you’re not worried about making a lot of requests.

Note that if the user is on 2G or has the data saver enabled, it will fall back to using the default options.

How to use Instant Page to improve page loading speed

Trigger a click when the mouse is pressed

If you want to trigger clicks faster, add data-instant-mousedown-shortcut as an attribute to <body>. Note that this may conflict with existing scripts.

(This feature is optional since v5.1, enabled by default in 5.0, you need to use data-instant-no-mousedown-shortcut to disable it.)

page not preloaded

By default, pages with a query string (“?”) in the URL are not preloaded because they sometimes trigger actions (such as logging out or deleting something).

technical details

Preloading is done using <link href=”url “>.

The source code is 200 lines readable.

Browser support

Instant.page is progressive enhancement – has no effect on browsers that don’t support it.

Chrome and Chromium-based browsers are fully supported starting with version 61 (released in September 2017).

Firefox supports <link> (since 2006!), but will redownload the page if it is not cached (which is an open bug).

incompatible browser

Safari 13.0 supports <link> but it is disabled by default. Hopefully it will be enabled in Safari 14.0 in September 2020.

UC Browser does not support modules as it is based on Chromium 57. A new version of the Chromium 69-based support module was announced in October 2018, but has yet to be released.

Secure CDN

Instant.page’s scripts are hosted by Cloudflare Workers, so there are no servers to hack into.

Additionally, it uses subresource integrity to let modern browsers verify that the file has not been tampered with. It’s loaded as a module, so most older browsers won’t implement it.

Recommended reading:

Will GB WhatsApp show deleted messages?

If someone is typing someone else, can you see it on Yo WhatsApp?

Will Fouad WhatsApp tell you when someone takes a screenshot?

Leave a Reply

Your email address will not be published. Required fields are marked *