Instant.page is a free open source library that uses instant preloading, which means that it preloads the page before the user clicks on it. The page is preloaded only when users are likely to visit the page, and only HTML is preloaded, respecting the bandwidth and CPU of your users and servers. It uses passive event listeners so that your page remains smooth and does not preload when the user enables the data protector. The
Instant Page feature allows you to automatically prefetch URL in the background after the user hovers over the link. This results in almost instantaneous loading time and improves user experience and perceived performance (how fast the site feels). We use the Instant.page library developed by Alexandre Dieulot.
prefetching works
on the server and In terms of performance improvement and low utilization of mobile devices The above is the best combination. This feature respects whether your mobile device (Android, iPhone) has a data protector or low data mode enabled. If on, nothing will be preloaded.
does not appear on the speed test tool because this feature is suitable for mouse hover. However, we encourage you to click on your website after enabling it. You should feel the difference!
Amazon and other companies have found thateliminating 100ms of latency can increase salesby 1 per cent. But delays on the network are difficult to overcome.
Instant.page usesto instantly preloadMurray-it preloads the page before the user clicks on it.
(1) desktop side
before users click on the link, they hover the mouse over the link to. When the user hovers 65 milliseconds, there is a 1/2 chance to click on the link, so the instant.page starts preloading at this time, and thepage preloading averages more than 300ms. Another option for
is forto load the page when the user starts pressing the mousewithout preloading. This results in zerofor unused requests from, while still increasingpage load by an average of 80 milliseconds.
you can also preload immediately when hovering or when the link is visible, and trigger the click when the user starts pressing the mouse, making your page the fastest in the world.
(2) Mobile
userstarts to touch their displaybefore release, setting aside an average of 90 milliseconds forto preloadon the page. Another option for
is to preload links as soon as they are visible.
deceives the brain
the human brain regards an action of less than 100 milliseconds as an instant. Therefore, instant.page makesyour page feel real-timeeven on 3G (assuming your page renders quickly).
easily uses your server and users' data plan
to preload pages only when users are likely to visitpages, and to preload only HTML, respecting the bandwidth and CPU of your users and servers.
it uses passive event listeners and requestIdleCallback to keep your page smooth. It respects the data protection model.it is the 1kBand loads after everything else.it is freeand open source (MIT license).
has additional options for data attributes
you can use the followingdata-instantproperty to enable other options for real-time pages. Just add any of these attributes to the
tag in the document and leave the rest to us.
you can learn more about the role of these different properties at instant.page. See below for ways to add some of these attributes to the
tag. The first way to add a JavaScript
data-instant-allow-query-string data-instant-allow-external-links data-instant-whitelist data-instant-intensity="mousedown" data-instant-intensity="mousedown-only" data-instant-intensity="150" data-instant-intensity="viewport" data-instant-intensity="viewport-all" data-instant-mousedown-shortcut
after a
page loads is to trigger the JavaScript at the end of the page load. You can add the following code to the footer code box in WPTurbo.
assumes that you want to change how long the script waits (in milliseconds) before it is preloaded. You can add it like this:
document.body.setAttribute('data-instant-intensity', '150');
can only use onedata-instant-intensityattribute at a time, but you can mix it with other attributes. So, for example, this will work:
document.body.setAttribute('data-instant-intensity', '150');
document.body.setAttribute('data-instant-allow-external-links', 'true');
Note: the above method adds an additional request to your site. The second way to merge
with
and body tags is to merge attributes in existing body tags when the page is rendered. No additional request is required. You can add the following code to the footer code box in WPTurbo. This is an example:
preload time setting
by default, instant.page preloads 65 milliseconds after hovering over the link and when mobile users start to touch their display. There are other options. Preload the
when the
presses the mouse to load the page when the user starts pressing the mouse button and add itsdata-instant-intensity="mousedown"to the
as an attribute before releasing it. Preloading
pages takes an average of 80 milliseconds. To use
in this way on the desktop instead of preloading on mobile devices, usedata-instant-intensity="mousedown-only".
to adjust hover latency
for sites with a large number of click targets, such as some e-commerce sites, the 65-millisecond rule does not apply: it preloads more than twice for each page visited. To increase the hover delay for
, pass the number of milliseconds in the property, such as 150ms:data-instant-intensity="150".
or, if you don't care about making a lot of requests, you can reduce it.
preloads links
on small mobile devices (such as smartphones) as soon as the links are visible, and if you want your pages to be instant in more cases, you can preload them as soon as the links are visible.
to do this, adddata-instant-intensity="viewport"to
as an attribute.
"viewport-all"if you are not worried about making a large number of requests, you can also use to do this on other form factors.
, please note that if the user uses 2G or has the data protector enabled, it will fall back to using the default option.
triggers click
when the mouse is pressed. If you want to trigger the click faster, adddata-instant-mousedown-shortcutas an attribute to
. Note that this may conflict with existing scripts.
(this feature is optional from V5.1, enabled by default in 5.0, and you need to usedata-instant-no-mousedown-shortcutto disable it. )
unpreloaded pages
by default, URL is not preloaded with a query string ("?" Because they sometimes trigger actions (such as logging out or deleting something)
whitelists pages using query strings
if you want all pages with query strings to be preloaded,data-instant-allow-query-stringadd an attribute to
.
if you only want to allow preloading of selected links with query strings, please add adata-instantattribute:
Page 2
blacklist page
to manually blacklist the links that trigger the operation,data-no-instantplease add attributes:
Log out
this mainly usesdata-instant-allow-query-stringwhen you use it, otherwise links with query strings are blacklisted by default.
external links
does not preload external links by default to allow them all todata-instant-allow-external-linksto add attributes to the
. For
to allow only some external links,data-instantplease add attributes to them.
preloads only partial links (whitelist mode)
if you only want to preload specific links,data-instant-whitelistadd a to
and mark the links to be preloaded by adding thedata-instantattribute to the links.
content interceptor
for suspicious reasons, prefetching is considered an invasion of privacy by some content interceptors, such as uBlock Origin. Be sure to disable the content blocker on your site to see the preload requests being made. UBlock Origin in
Firefox disables prefetching completely; if you use it, you need to disable the extender completely for the time being, not just turn it off for your site.
this only affects users who use the content blocker for EasyPrivacy lists. It is suitable for AdBlock; while uBlock Origin users are in the minority. If you want instant.page to work for users on your site who have private content blockers, you can host the script yourself.
Technical details
uses url "& gt; to complete the preload. The
source code has 200 lines to read.
browsers support
Instant.page is a gradual enhancement-- no impact on browsers that don't support it.
Chrome and Chromium-based browsers have been fully supported since version 61 (released in September 2017).
Firefox support (since 2006! But if the page is not cached (this is an open error), it will download the page again
incompatible browsers
Safari 13.0 is supported but disabled by default. It is hoped that it will be launched in Safari 14.0 in September 2020. The
UC browser does not support the module because it is based on Chromium 57. A new version of the support module based on Chromium 69 was announced in October 2018, but has not yet been released. The script for
security CDN
Instant.page is hosted by Cloudflare Workers, so there is no server to invade. In addition,
uses sub-resource integrity to allow modern browsers to verify that files have not been tampered with. It loads as a module, so most older browsers don't execute it.
self-hosted
can also host scripts on its own. Download the latest version and add a module script tag before it:
you can also install it through npm: the idea of
npm i instant.page
History
preloading web pages on hover and touchstart comes from one of my old libraries, InstantClick, which was launched in January 2014. it uses Ajax and history.pushState instead of turning the site into a single page application. It makes the site smoother, but requires extra work.
unfortunately, InstantClick is primarily a proof of concept because it is not well documented. The quicklink released by
Google in December 2018 will preload the link as soon as the link is displayed, which clearly indicates that I should focus on building a "lean", easier-to-use version of InstantClick, or Instant.page, which will be launched in February 2019.
InstantClick, a future project related to
, provides the smoothest experience, while still not requiring as much work as the framework (providing fewer results), so I am considering developing it again later in 2020. It will be renamed "instant.page extra".
