instant.page is a small script that allows you to speed up your site navigation using just-in-time preloading. When the user hovers over the link, the page is preloaded in the background, and when clicking on the link, it opens instantly. InstantClick works by the same principle , but it is provided as a separate library on pushState and Ajax, with additional modules like a preload progress bar.
Installation
Just add a script to the end of the body:
<script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>It may seem that on the modern web it makes no sense to distribute your solution through a script instead of placing it in npm, but this is not JQuery and all the code literally fits into a little more than 200 lines, so even the most lightweight application can afford to connect it. Besides, in the form of a module there is already a super popular but controversial quicklink from Google.
Desktop
Different studies get different values, so it is impossible to say for sure with what probability a person will click on the link that he hovered over, and how quickly it will happen. The author of the script claims that if the pointer is already hovering over the link for more than 65 milliseconds, the user will follow it half the time.
To reduce the number of false positives, both instant.page and InstantClick offer to optionally trigger a preload at the moment of pressing (mousedown), which should speed up loading by 80 milliseconds on average. True, the script only loads HTML, and other fat resources will still load normally.
Instant.page also has a completely insane trigger for maniacs (and quicklink lovers), which loads the page when the link is visible.... Fortunately, there is a whitelist mode as well.
Phone
There is no hover in the mobile version, so preloading starts at the moment you start clicking on the link, which gives an increase of about 90 milliseconds, or you can also choose a trigger for hitting the viewport, but for this you need to have either very thin pages or a minimum and known number of links (for example, you can preload the next page after submitting the form), or set up a whitelist.
Setting up
- Whitelist : preloading works only for links with an attribute
data-instant(for this, add an attribute to the bodydata-instant-whitelist) - Blacklist: links with the attribute will not load
data-no-instant - External links are not loaded by default, you can change this by adding
data-instant-allow-external-linksto the body - , . ,
data-instant-allow-query-stringbody
- uBlock Origin , EasyPrivacy, . instant.page , issue. , . Firefox uBlock Origin , .
- Safari 13 . Safari 14.
In less than a year (and instant.page became popular even less than half a year ago), the technology has gained a foothold in the market, acquired large clients like Spotify and Pepsico, and is matched by the number of stars on GitHub to InstantClick, which has been there since 2014. The author claims (with reference to builtwith ) over 7000 sites using instant.page, with a combined audience of over 76 million monthly users.
Advertising
VDS for sites of all sizes - this is about our epic servers ! They are free of charge protected from DDoS attacks, the speed of the Internet channel is 500 Megabits. We provide the ability to automatically install a convenient VestaCP control panel for hosting sites. Hurry up to order!
