Introduction to how to use the InstantClick plug-in to improve page loading speed

This article mainly introduces the plug-in InstantClick that improves page loading speed. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

Usually, in order to reduce the query time of DNS, we can use dns prefetch to parse the links in the page and improve the loading speed of the page. Similarly, we can load the page during the time between when the mouse slides over the link and when it is clicked. This gap usually lasts a few hundred milliseconds. Using InstantClick, we can make full use of these hundreds of milliseconds to allow the website to display a new page instantly, almost No delays.

Installation of InstantClick

Installing InstantClick is very simple. Just download InstantClick and put it in a certain directory, and then quote the code before 36cc49f0c466276486e50c850b7e4956 However, for example:

<script src="//img.ezloo.com/static/instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

InstantClick may cause a white screen. The official gave an example to resolve the conflict with Google Adsense. I found that Baidu Statistics can also cause a white screen. Adding data-no-instant to 3f1c4e4b6b16bbbd69b2ee476dc4f83a will solve this problem, just like the example above. Since I don’t understand JS, I don’t know if this will affect the statistics.

InstantClick working principle

InstantClick uses pushState and Ajax (pjax) to implement, only replacing the 6c04bd5ca3fcae76e30b72ad730ca86d and the b2386ffb911b14667cb8f0f91ea547a7 in the head, the browser does not need to Re-parse and compile the page, so that the browser will not flash a white screen during the page jump, and it will appear that the page is loaded in an instant.

InstantClick’s progress bar

By default, InstantClick will display a progress bar at the top of the page when loading the page. The default color is #29d , you can change the color:

#instantclick-bar {
  background: white;
}

You can also hide the progress bar:

#instantclick {
  display: none;
}

WordPress Plugin

If you are using a WordPress blog, you can search and install the InstantClick plug-in https://wordpress.org/plugins/instantclick/. After the installation is completed, under the settings menu of the WordPress background, a InstantClick option.

The above is the detailed content of Introduction to how to use the InstantClick plug-in to improve page loading speed. For more information, please follow other related articles on the PHP Chinese website!