「InstantClick」 先読みしてページ遷移を高速化するJavaScriptライブラリ

リンクを先読みしてページ遷移を高速化することができるというJavaSciptライブラリ InstantClick をご紹介。

実装してみたいけど、どの程度サーバーに負荷が掛かるのかという不安もあるので、導入するかどうしようか悩んでます。
デモを見ると結構いい感じなので導入したいんですけどねぇ。

InstantClick
InstantClick

どういうライブラリなのかと言いますと、ページ内のリンク先をJSが先読みしてあらかじめロードしておくことで、ページ遷移のスピードを爆速化しちゃおうというもの。

といっても無作為に全てのリンクを先読みしてしまうと、それこそとんでもない負荷がかかるので、「InstantClick」ではリンクに対して、マウスがホバーした時のみ先読みするように作られています。

またホバー時に先読みするかどうかは、用意されている独自データ属性を付与して決定することが可能です。
data-instant」が割り当てられた<a>タグのみ先読みさせるホワイトリスト方式。あるいは「data-no-instant」が割り当てられた<a>タグは先読みさせないというブラックリスト方式の2パターンがあります。

現在のバージョンはブラックリスト方式がデフォルトになっているようです。

導入はそんな難しくはありません。
「InstantClick」をダウンロードしたら、解凍した中身をFTPでアップロードし、あとは</body>直前に、以下の2行を記述すればOK。

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

パスはライブラリをアップしたディレクトリに合わせてください。

なお、実装したら先読み対象は自分のサイト内のみに限定するようにしましょう。

「javascript / jQuery」新着記事

Google AdsenseのA/Bテストを非同期コードで実装する方法

ホシナ カズキ

HTML5で組んでるならこの魔法のjsも入れておけっていう話

ホシナ カズキ

もっと見る

モバデビはモバイルやウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく