Frequent visitors to this site may have noticed that internal pages open much faster than before. In many cases, clicking a link now feels almost instant, with little or no waiting. The technology behind that effect is InstantClick.
How InstantClick speeds up internal links
InstantClick is a JavaScript library that speeds up navigation inside a website. It uses the very short time between hovering over a link and actually clicking it to preload the target page, which makes the page feel as though it opens immediately.
Even though network bandwidth has increased significantly over the years, websites have not become proportionally faster, because the main bottleneck during page loading is often network latency. Latency is a physical limitation that cannot be avoided, so InstantClick works around it by preloading.
Before a visitor clicks a link, the mouse pointer usually pauses over that link for a short time. The interval between mouseover or mousedown and the final click event is often around 200ms to 300ms. InstantClick uses that tiny window to preload the next page. By the time the user actually clicks, the browser has already fetched the page locally, so rendering finishes much faster.
How to set up InstantClick
Download the instantclick.js file
Download the minified JavaScript file from the InstantClick download page. The file is only about 1.6 KB.
Download URL: http://instantclick.io/v3.1.0/instantclick.min.js
Include instantclick.js and initialize it
Load the script in your theme’s footer.php file and initialize it:
...
<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>
</body>
</html>At that point, InstantClick is active on your site. Click around on a few internal links and you should notice the difference immediately.
Disable InstantClick on certain links
Disable InstantClick on a single link
The code above enables InstantClick on all links by default, which is the easiest setup. In some cases, however, InstantClick can break more interactive links, such as slider navigation buttons. When that happens, all we need to do is blacklist those links.
To disable InstantClick on a single link, just add the data-no-instant attribute to that link:
<a href="/blog/" data-no-instant>Blog</a>Disable InstantClick on a group of links
Sometimes you may want to disable InstantClick for an entire area of the site rather than one individual link. That is also easy: add the data-no-instant attribute to the parent element that contains those links.
