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 — JS library to make your website instant

リンクにマウスオーバーしてからクリックするまでには200msから300msほど時間がかかるそうです。実際このテストページでクリックしてみるとMacのタッチパッドだとさらに遅く500msくらいかかってました。

InstantClick.ioはその間に裏でリンク先ページをロードして勝手にリンクをpjax化してしまうという高速化ライブラリです。
やってることはRails4のturbolinksと似てますが、マウスオーバーで先読みするってところがさらなる高速化を実現しています。2行でどんなサイトにも適用できるのもおもしろいですね。

pjaxはpushStateとAjaxを組み合わせたテクニックで、Ajaxで次のページを取得し、document.bodyの中身を丸ごと入れ替えて、画面遷移をせずにページが変わったように見せます。体感的にとても高速に画面が変わります。Githubのリンクもpjaxです。

設定方法

以下の2行をの前に入れるだけ。 それで全リンクを先読みpjax化します。

<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>
</body>

なお、JavaScriptはダウンロードして適切なところに置いてください。

試してみた

これはJekyllやMiddlemanといった静的サイトの高速化にいいんじゃないかと試してみました。

• 適用していないサイト：
  • http://atskimura.github.io/my-first-prose/
• 適用したサイト：
  • http://atskimura.github.io/jekyll-with-instantclick/

おー！速い。おもしろい！
静的サイトでもけっこう体感速度変わりますね。
それに画面遷移がないと今風な感じになる。

WordPressとかのCMSの体感速度向上に使えそうですね。

補足

クリックが速くて読み込み終わってない場合は普通に画面遷移します。

pjax化して欲しくないリンクは以下のように指定します。

<a href="/blog/" data-no-instant>Blog</a>

逆にホワイトリストモードもあって特定のリンクだけpjax化することもできます。こっちの方が使いやすいかも。

詳しくはこちら：InstantClick: Getting started

---

InstantClick — JS library to make your website instant