「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>

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

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

「Hacks」新着記事

カスタムブロックを追加するなら「Block Lab」プラグインを導入すると幸せかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

「Password Checkup」がChromeユーザーのセキュリティを守ってくれるかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

Facebookアプリで3D写真投稿機能をONにするには? 試してみたら本当にできた件

Avatar for ホシナ カズキ

ホシナ カズキ

Twitterアプリに搭載されたデータセーブ機能をONにする方法

Avatar for ホシナ カズキ

ホシナ カズキ

大規模・広範囲にわたるクラッキングによるWordPress改ざん事案が発生中

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

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

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