InstantClick: library to improve site responsiveness

When you click on a link or a button on a web page, from the moment when the cursor is over the element to trigger the click event, it usually takes several hundred milliseconds. First, the user needs to make sure that the cursor is in the right place — this process takes the most time. Secondly, the click event is triggered only after the mouse button is released, and this happens several tens of milliseconds after clicking. In mobile browsers, there is a 300 ms delay between the touchscreen touch moment and the click event - this is done in order to avoid false positives.

The InstantClick library (1.6 kB compressed, no dependencies) allows you to improve the perceived page response time per click due to the fact that the necessary information starts to load from the server at the moment when the cursor is over the active element, at the mouseover event. This saves a few hundred milliseconds and the response of the application may be almost instantaneous.

Naturally, the acceleration of the client interface has to be paid for by an increase in the load on the server due to false positives, when the cursor doesn’t follow a click on the element. To reduce the likelihood of this, InstantClick allows you to set a small delay or no risk, and use the mousedown event. This can be useful when a lot of active elements are concentrated in a small area, for example in the menu. In addition, you can enable and disable InstantClick separately for each item.

To upload content, InstantClick uses AJAX queries and pushState to ensure that the browser history and the Back button work normally. We can say that this library combines the ideas of jQuery-pjax (or Turbolinks ) and Fastclick , only, unlike Fastclick, it is intended not for mobile, but for desktop browsers. However, the author promises to implement and support the event touchstart for touchscreen devices.
')
You can see how the library works on the project website by clicking on the links in the header. In addition, on a separate page, you can measure the time intervals between mouseover , mousedown and click events by clicking the test button .