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. The same principle works InstantClick, but it is provided as a separate library on pushState and Ajax, with additional modules like a preload progress bar.
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. In addition, the super popular but controversial quicklink from Google is already in the form of a module.
Different studies have 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 has a completely insane trigger for maniacs (and quicklink lovers) that loads the page when the link falls into sight… Fortunately, there is a whitelist mode as well.
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.
- White list: preload only works for links with the attribute
data-instant(for this, add the attribute to the body
- Black list: links with the attribute will not load
- External links are not loaded by default, you can change this by adding
- Question mark links are not loaded by default because they can cause unwanted actions. To resolve them, you need to add
- uBlock Origin and other blockers using the EasyPrivacy rule list block the script as a potential privacy threat. The author tried to convince his maintainers to remove instant.page from the list, but in the end he was refused and the issue was closed. When using a script on your site, you can simply host it, which will allow you to bypass such locks. However, users on Firefox with uBlock Origin enabled will not have any preloads at all, so this solution will not help them.
- In Safari 13, support is turned off by default. Should be fixed in 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 declares (with reference to builtwith) about more than 7000 sites using instant.page, with a total audience of over 76 million monthly users.
VDS for sites of any scale – 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!