If your blog feels like it opens the next page the moment someone clicks, that effect is not coming only from a CDN or a fast host. One small script can make a surprisingly big difference: InstantClick.
The idea behind it is simple. There is always a tiny gap between the moment a visitor points at a link and the moment they actually complete the click. InstantClick uses that gap to preload the target page in advance. When the click finally happens, the page is already ready to display, so navigation feels nearly instantaneous.
Why it feels so fast
By default, InstantClick begins preloading when the cursor hovers over a link. On a decent connection and with reasonably fast page generation, the next page can appear immediately after the click.
It also offers other preload strategies:
- On hover: starts preloading as soon as the user hovers over a link. This gives the strongest “instant” feeling, but it creates more requests.
- On mousedown: starts preloading when the mouse button is pressed, before the click is completed on release. This adds almost no extra load to the server while still making navigation feel much faster.
- Delayed hover: preloading starts only if the user keeps hovering for a short period. Recommended delays are around 50 ms or 100 ms. Going beyond 100 ms can actually be worse than preloading on mousedown, while anything below 50 ms may not be noticeable.
For mobile devices, preloading starts on touchstart regardless of which option you use.
If the site is optimized for mobile, the click is triggered when the visitor lifts their finger from the link, so preloading gets roughly a 100 ms head start.
If the site is not optimized for mobile, the delay depends on the platform: about 300 ms on Android and 450 ms on iOS. Since a same-site request over 3G often takes around 200 ms, that head start can matter quite a bit.
Which mode to choose
That depends on how much extra traffic your server can handle.
If your server has room to spare, preloading on hover gives the quickest result.
If you are worried about extra load, preloading on mousedown is the safer choice. Even then, your site can still feel faster than the vast majority of websites.
A practical way to test this is to start with mousedown, which puts almost no additional pressure on the server. If things look good, move to a 100 ms hover delay, then 50 ms, and eventually full hover preloading if your setup can handle it.
There is one more consideration: if server-side analytics are important to you, mousedown is the only option that will not distort those numbers. Other preload modes can affect your statistics because requests may be made before a real click is completed.
One downside I ran into
This approach is not perfect in every setup.
My blog uses an EXIF-related plugin that needs the article images to load before it can display image metadata. After enabling InstantClick, that EXIF information would not appear until the page was refreshed once. It is a flaw, but a minor one compared with the benefit: readers reach the page they want much faster, and that improvement in browsing experience is worth a lot.
How to use it
- Go to the InstantClick website and download the JS file.
- Upload it to your blog hosting space or a CDN.
- Add the following code to
foot.php:
// src后面填写文件路径
<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>
If you want a different preload behavior, you can initialize it with another parameter, such as mousedown or a delay value like 50.
What to expect
In practice, this works on websites that support JavaScript and can noticeably speed up page-to-page browsing. It is a very small change, but the effect on perceived performance is obvious: readers spend less time waiting and move through the site more smoothly.