概要
InstantClickというツールは、ユーザがハイパーリンクにマウスオーバした段階でページの先読みを行います。 これによりユーザの体感速度が改善するというので、実際にこのブログでも導入してみました。
仕組み
InstantClickが行っているのはページの先読みですが、公式サイトの説明によると、ユーザがリンクにマウスカーソルを当ててから実際にリンクするまで、大体200〜300ミリ秒かかっているそうです。
そこでその間にページを先読みしちゃえばいいよね？という発想になるわけですね。もちろん、マウスオーバしただけでクリックされなかった分は無駄になりますが、そのあたりも設定によって
- 特定ミリ秒マウスオーバしてから読み込み
- 特定リンクのみ先読みする／しない
といったような調整が可能です。
内部的にはpushStateとAjax(いわゆるpjax)で実現されています。
導入方法
導入方法は簡単です。ページ末尾の方に2行追加するだけ。(jsファイルはダウンロードしておきます)
<script src="instantclick.min.js" data-no-instant></script> <script data-no-instant>InstantClick.init();</script> </body> </html>
このブログはslimテンプレートを用いていますので
= javascript_include_tag 'instantclick.min' script data-no-instant='' InstantClick.init();
こんな感じになります。
確認
Firebugなどで確認すると、実際にマウスオーバしただけでページの読み込みが行われることが確認できました。 コンテンツサイズが大きくないので実際の体感速度はそんなに変わりませんが、他のWebにも簡単に適用できそうだということがわかりました。
一方、異なるドメインへのリンクなどは先読みされませんでした。 公式にも書いてありますが、先読み可能に設定することはできないようです。 まぁ、そういうものですかね。
まとめ
InstantClickを用いることで、同一Webサイト内のコンテンツを先読みすることができるようになりました。
MoinMoinや他に管理しているサイトなんかでも、がんばって数十ミリ秒での応答などをやっているので、先読みができればさらに嬉しいなと思います。