Frequent visitors to this site friends may find that the site page links to open the speed of a lot faster, many times click on a link can even achieve the effect of a second to open, without any waiting, the experience is very acidic. Today we will introduce the black technology to achieve this effect - InstantClick.

How InstantClick accelerates the opening speed of links on your site.

InstantClick is a JavaScript library that speeds up the opening of pages within a website.The library utilizes the short time before the mouse clicks on a link to preload itThe result is a quick opening of the page in a perceptual way.

Despite the fact that the network bandwidth has increased considerably, the website has not become faster, this is because the biggest average when loading web pages is the network latency. And latency is an unavoidable physical limitation, so InstantClick uses preloading to achieve speedup by trickery.

Before a visitor clicks on a link, the mouse hovers over the link. Hover (mouseover) or press (mousedown) and click (click, press and release the mouse) events usually have 200ms ~ 300ms between the interval, InstantClick use this time interval to preload the page. So when you open the page, the page has already been loaded locally, and the rendering will be completed very quickly.

InstantClick setting method

Download the instantclick.js file

Download the minimized js file from the InstantClick download page, it's only 1.6kb.

Download link:http://instantclick.io/v3.1.0/instantclick.min.js

Introduce the instantclick.js file and initialize it.

Load the js in the theme's footer.php and initialize it.

...
<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>
</body>
</html>

Now that InstantClick is activated on your site, click on a few links to try it out.

Disabling InstantClick on certain links

Disabling InstantClick on a link

The above code enables InstantClick on all links by default, saving time and effort. In some cases, InstantClick may disable certain functional links, such as the slider's navigation buttons. In this case, we just need to disable InstantClick on these links using the blacklist.

To disable InstantClick on a link, we just need to add adata-no-instantattribute on it.

<a href="/en/blog/" data-no-instant>Blog</a>

Disabling InstantClick on a set of links

Sometimes we may want to disable InstantClick on links within a certain area of the site, which is also very convenient, we just need to add adata-no-instantThat's all.