読者です 読者をやめる 読者になる 読者になる

atskimura-memo

あまり仕事とは関係なく適当に書きます。開発ネタが多いかもしれません。

2行追加するだけでWebサイトを高速化するInstantClick.io

f:id:a_kimura:20140218211442j:plain

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行を</body>の前に入れるだけ。 それで全リンクを先読みpjax化します。

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

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

試してみた

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

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

それよりもWordPressとかのCMSの体感速度向上の方が効果があるかもですね。*1

補足

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

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

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

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

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

追記

質問があったので別に作者じゃないけど追記します。(2014/02/19 2:25)
でも、みんなここ(InstantClick: Getting started)に書いてあります。

Analyticsはどうなるの?

そのままだとカウントされないので、以下のようにするといいそうです。試してはいません。

<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>
/* Google Analytics code here, without ga('send', 'pageview') */
 
InstantClick.on('change', function() {
  ga('send', 'pageview', location.pathname + location.search);
});
 
InstantClick.init();
</script>

マウスオーバーしてクリックしなかったらどうなるの?

裏でロードだけして、無駄になります。

ただ、無駄になったり負荷が上がるのが嫌な場合はdelayの設定かmouseoverじゃなくてmousedownを使用するようにする設定がありました。

マウスオーバーから50ms後に先読み開始。

InstantClick.init(50);

mousedownで先読み開始。

InstantClick.init('mousedown');

InstantClick — JS library to make your website instant

*1:「んーよくわからん。どっちなの >> 静的サイトの高速化にいいんじゃないかと試してみました。WordPressとかのCMSの体感速度向上に使えそうですね」というコメントいただいたので修正しました。ごめんなさい。校正ミスです。こういうことが言いたかったのでした。(2014-02-19 10:34)