InstantClick 3.0 is out
InstantClick is a JavaScript library that dramatically speeds up your website, making navigation effectively instant in most cases. There’s more information on the home page.
Today marks the release of InstantClick 3.0, major new features include preloading for mobile devices, and a progress bar.
Preloading for mobile devices
InstantClick preloads pages on hover, but there’s no hover on mobile devices. Until today mobile devices were only getting pjax’s benefits, without preloading.
The solution turns out to be to preload on touchstart. When your finger starts tapping the screen, InstantClick will start preloading the page in the background. When a click is triggered, the page will have had 300 ms (Android) or 450 ms (iOS) to preload.
The 300/450 ms delay that devices impose are there for detecting double taps that are intended to zoom, InstantClick respects that and thus works without having to optimize your site for mobile devices. 1
Because InstantClick preloads only one link at a time and that there’s a pretty good chance that tapping a link means you want to open it, this should not be a problem for your users’ data fees.
Progress bar
If your site’s layout is a bit crowded, chances are users clicking for their first time on an instant link won’t notice that a page change has happened. This problem could obviate the UX benefits you got out of InstantClick; the progress bar solves that. When a page is displayed instantly, the progress bar appears and just fades away instantly, subtly signaling that the page changed.
This progress bar, much like NProgress, is fake. It’s only there to signal users that a page has changed or is being loaded. 2
The progress bar solves a second problem. InstantClick (and pjax in general) hijack the browser’s loading cycle and with it, the browser’s loading indicator. While most links are displayed instantly, networks can be tricky, especially mobile ones. If for some reason a page is taking a long time to load, the progress bar indicates to users that something is happening, and that your website isn’t broken.
The bar is 2 pixels tall on desktop and the double of that on mobiles so that it’s noticeable on tinier screens. When you’re zooming on a mobile device the bar automatically scales to an appropriate size. So even if you don’t have a mobile-optimized website, it just works.
The progress bar comes in with a sensible blue color by default, you can change its color or hide it with a few lines of CSS.
The rest
Tinier new features include new events, asset change detection, the ability to blacklist or whitelist all links in a parent element, and bugfixes. InstantClick is now also available via Bower: bower install instantclick.
A detailed list of changes is available on GitHub.
Footnotes