Instant download from instant.page

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.

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. In addition, the super popular but controversial quicklink from Google is already in the form of a module.

Desktop

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.

Telephone

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

  • White list: preload only works for links with the attribute data-instant (for this, add the attribute to the body data-instant-whitelist)
  • Black list: 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-links in body
  • Question mark links are not loaded by default because they can cause unwanted actions. To resolve them, you need to add data-instant-allow-query-string in body

Problems

  • 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.

Conclusion

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.


Advertising

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!

Similar Posts

Leave a Reply

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