Boost Website Speed with InstantClick Preloading

InstantClick is a JavaScript library that significantly accelerates your website speed by preloading links you are likely to click. For example, if you want to click the "Next Page" button on "Xiao Z Blog," InstantClick has already preloaded the content of the next page, making the speed increase noticeable.

Installing InstantClick

• InstantClick Official Website: http://instantclick.io/

The usage of InstantClick is very simple. You only need to download the corresponding JS library from the official website and include it at the bottom of your website (before </body>).

<script src = 'https://libs.xiaoz.top/instantclick/instantclick.min.js' data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

User Experience

Currently, Xiao Z Blog uses InstantClick for preloading. Although the speed improvement is significant, some side effects still occur. For instance, when accessing the website backend, CSS may fail to load, causing layout issues, as shown below.

Refreshing the page again can resolve this issue. Although the impact is minimal, it still affects the user experience. The solution is discussed further below.

Issue with CSS Not Preloading on Some Pages

Xiao Z Blog uses the WordPress program. By checking the source code, it can be seen that some CSS is dynamically rendered through PHP code. After using InstantClick, CSS fails to load on the first visit to pages like the backend, causing layout chaos. According to the InstantClick documentation, this problem is solvable. InstantClick provides a blacklist feature that allows you to set specific URL links as blacklisted, meaning these links will no longer use InstantClick preloading. To set a blacklist, simply add the data-no-instant attribute to the link.

Resolving highlight.js Conflicts

In this article WordPress Code Highlighting Without Plugins, Xiao Z shared using the highlight.js library for code highlighting. highlight.js defaults to using the following function for rendering:

<script>hljs.initHighlightingOnLoad();</script>

Using InstantClick revealed a conflict where code on preloaded pages could not be highlighted. The rendering function needs to be changed to:

$('pre code').each(function(i, block) {
	try{
		hljs.highlightBlock(block);
	}catch(e){

	}
});

Summary

If your server is located overseas or your website loading speed is inherently slow, InstantClick is highly recommended. For more usage methods, please refer to: InstantClick Chinese Documentation