Preloading

InstantClick has different options for preloading, use one or the other depending on what your server will allow.

In any case, not recalculating scripts and styles on every page change will already make your pages up to twice as fast (measured with Turbolinks, another project using this technique).

Default: on mouseover (hover)

Preloading kicks in when a user hovers over a link. If the user has a decent connection and your pages don’t take too long to be served, pages will display instantly.

Just initialize InstantClick as described in Get started and you’re set.

With no additional load on the server: on mousedown

Preload when the user presses his mouse button (the click happens on release). This brings nearly zero overhead to your server and still brings a “magical” speed boost.

To use, pass 'mousedown' as an argument to InstantClick.init.

InstantClick.init('mousedown');

Between the two: on mouseover with a delay

If the user is still hovering over a link after a delay of your choice has passed, the page will start preloading.

Recommended delays are 100 ms and 50 ms. More than 100 ms may actually be worse than on mousedown (below), less than 50 ms likely won’t be perceptible.

To make InstantClick preload after a delay, pass the delay in milliseconds as an argument to InstantClick.init.

InstantClick.init(50);

What about mobile

With any of these options, preloading starts when the visitor’s finger touches the link (touchstart).

If your site is optimized for mobile (device width viewport on Android, using FastClick on iOS), the “click” happens when the visitor releases his finger from the link, giving approximately 100 ms of delay for preloading.

If your site isn’t optimized for mobiles, it depends on the OS. Android gives 300 ms, iOS gives 450 ms.

A 3G request on the same site usually takes about 200 ms.

Which one to choose

If your site can handle the additional load, preload on mouseover.

If your site likely can’t, preload on mousedown. Your site will still be faster than 99% of websites anyway.

If you’d like to determine if your server can, start with mousedown which will put virtually zero additional stress on your server. Then use mouseover with a 100 ms delay. Then with a 50 ms delay (or go by smaller decrements, if you’re patient). Then with mouseover directly.

If server-side analytics are important you are limited to mousedown, as using anything else would skew the data.

Blacklisting How InstantClick works