InstantClick

 

InstantClick.io

All the informations you need to use InstantClick are on the link above. This ReadMe’s purpose is about how to use and contribute to a development version of InstantClick.

Tests

Tests (in the tests folder) are PHP-generated HTML pages with which to check how InstantClick behaves on different browsers. That’s what I use before releasing a new version to make sure there are no obvious regressions.

To access the suite of tests, run php -S 127.0.0.1:8000 from the tests folder and head to http://127.0.0.1:8000/.

from https://github.com/dieulot/instantclick

------

How does it work

Latency is inevitable with today’s internet architecture so InstantClick cheats by preloading links you are likely to click on.

Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). InstantClick makes use of that time to preload the page, so that the page is already there when you click.

On mobile devices, preloading starts on “touchstart”, letting 300 ms (Android) to 450 ms (iOS) for preloading the page.²

If you want your website to not be flooded by requests, you can set a delay before preloading starts when users hover a link. It will still feel instant.

If you don’t want any wasted requests, you may preload on “mousedown”. This is when you press your mouse button (a click is when you release it).

When loading pages with InstantClick, the browser doesn’t show its standard loading indicators anymore. To make sure the user knows a page has changed, InstantClick includes a (customizable) progress bar.³ The bar automatically scales to appropriate size on mobile devices, so it works even when your site isn’t optimized for mobile.

InstantClick uses pushState and Ajax (a combo known as pjax), replacing only the body and the title in the head.

Ajax brings two nice benefits in and of itself:

• Your browser doesn’t have to throw and recompile scripts and styles on each page change anymore.
• You don’t get a white flash while your browser is waiting for a page to display, making your website feel faster.

InstantClick supports the following browsers’ versions:

IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Chrome for Android
10+	4.0+	5+	5.0+	11.5+	5.0+	4.4+	18+

According to Can I use, over 80% of the world supports InstantClick. When a browser doesn't support it, InstantClick fully degrades.

Getting started

Head to the Download page and follow the instructions.

You can follow InstantClick’s news on Twitter, or participate in InstantClick’s development on Github.

Footnotes

1. Check out Latency: The New Web Performance Bottleneck for a good summary about bandwidth vs. latency effects on web pages. ↩
2. On 3G, requests usually take 200 ms. ↩
3. The progress bar is fake, much like NProgress. Though it seems possible that a future version of InstantClick could show real progress by checking the HTTP Content-Length header. ↩

from http://instantclick.io/ 

( http://instantclick.io/documentation ,

http://instantclick.io/download)