リンクへのhoverをトリガーにして、非同期でリンク先のファイルをプリロードするようにするプラグインです。クリックの前に次のページを読み込み始めることで体感的にページの表示速度を速めてくれます。
ただしサーバーへの負荷もかかるのでその辺は自分のサイトとサーバーを見て判断する必要がありそうです。
用意するものと基本的な使い方
コアファイルはInstantClickの公式サイトからダウンロードします。
そしてその後に初期化すればプラグインの効果が現れます。
<script src="instantclick.min.js" data-no-instant></script> <script data-no-instant>InstantClick.init();</script>
ただしこのプラグインがオンになっているとサイト内のページ遷移はPjaxのような仕様になるので、
・サイト内でのhead内の仕様は同じする
・DOMContentLoadedやjQuery.ready()などがトリガーになる処理は行えない
・変更されるのはbodyとtitleのみ
といった制限は発生します。
オプションなど
いくつかあるオプションを紹介しておきましょう。
・プリロードの開始タイミングをhoverじゃなくmousedownに変更する
InstantClick.init("mousedown");
・入れたミリ秒の間hoverしていたリンクだけプリロードするように
InstantClick.init(100);
target属性があるリンクや異なるドメインへのリンク、アンカーリンクなどは初めからInstantClickの対象外となっているようです。
それ以外のページでInstantClickを発動したくない場合は下記のようなdata-no-instant属性を付与します。
<a href="/test/" data-no-instant>Blog</a>
・イベントもあります。changeとか何かに使えそうです。
InstantClick.on("change", yourCallback);
InstantClick.init();
細かい制約がいくつかあるので使う時には最初から設計に組み込まないと大変かもしれませんが、ページ高速化には確実に一役買ってくれそうです。
