「instantclick.min.js」でページの読み込みを高速化してみる！
公開日：2014年6月19日
最終更新日: 2015年2月23日
こんにちは！
6月15日にブラジルに日本対コートジボワールの試合を観戦しにいっていたので、ブログをしばらく更新できませんでした。今日からまた気合いを入れて頑張りたいと思います。
試合には負けましたが、本田の先制点が決まった時の興奮と感動は忘れられないものになりました。そして負けた後の落胆も。
ワールドカップの余韻はここまでにして話を戻します。当サイトを見て頂いた方は、ご存じだと思いますが、当サイトのページ表示速度はかなり遅いです。すでに私の中でサーバーの変更は決定事項なのですが、サーバーを変えるまでに、少しでもサイトの速度が改善されるように、色々と試してみたいと思います。
※すでに「エックスサーバー」にサーバーを変更しました。
そこで今回は「instantclick.min.js」を使用してページの読み込みを高速化してみたいと思います。
どこまで効果がでるのかは未知数ですが、できることは全てやってみます。
目次！
1.「instantclick.min.js」とは？
2.導入手順！
3.実際の効果は？
「instantclick.min.js」とは？
「instantclick.min.js」とは、ページ内にあるリンクを先読みすることで、ページの遷移を高速化できるJavaSciptライブラリです。「HTML5」で導入された「pushState」の「History API」と「Ajax」を合わせて使用した「pjax」と呼ばれる技術です。
ユーザーがリンクにマウスオーバーした時点でページの先読みを行います。それにより表示の体感速度が改善されるとのことです。簡単に導入できますので、次の項で実際に導入してみたいと思います。
導入手順！
以下のコードを</body>の直前に設置してください。
「ドメイン名」の部分は各ドメインを記述してください。
<script src="http://ドメイン名/instantclick.min.js" data-no-instant="data-no-instant"></script> <script data-no-instant="data-no-instant">InstantClick.init();</script>
「instantclick.min.js」は以下よりダウンロードできます。
これだけです。簡単ですね。
実際の効果は？
実際に導入した効果はどうだったのかといいますと、「GTmetrix」で計測してみた結果、特に変わりませんでした。
導入前の結果！
導入後の結果！
ただ心無しか体感速度は速くなったような気はします。
最後に！
数値としての結果は出ませんでしたが、こういった作業の積み重ねが速度改善につながると思います。体感速度は速くなったような気がするので、ヨシとしておきます。作業量も少ないので、導入する価値はあると思います。
以上「「instantclick.min.js」でページの読み込みを高速化してみる！」でした！
それではまた。
.htaccessに3行付け加えただけで表示速度がアップ！
「TinyPNG」を使用してpngファイルを圧縮した！ほんとに70%近く圧縮された！
「JPEGmini」を使用してjpegファイルを圧縮した！ほんとに80%近く圧縮された！
WordPressの高速化！JetpackのPhotonは絶対導入すべき！
公開日：2014/06/19
最終更新日: 2015年2月23日
カテゴリー：jquery・js
関連記事
-
-
2014/07/17
jqueryのスライドショー「bxSlider」の設置方法！
カテゴリー：jquery・js
最終更新日: 2015年2月27日
-
-
2014/07/01
画像を背景にフルスクリーンで表示させる「Fullscreen Background for jQuery」！
カテゴリー：jquery・js
最終更新日: 2015年2月28日
-
-
2014/06/24
私が大抵いつも使うギャラリーjs！使い勝手がいいんですよね！
カテゴリー：jquery・js
最終更新日: 2015年2月23日
-
-
2014/05/17
Googleマップをちょっとカッコよくカスタマイズ！
新着記事
-
-
2016/01/27
クロームでムームードメインにログインしようとするとログインエラーが起こった！
カテゴリー：その他
-
-
2016/01/26
これは便利！公開前の記事をプレビューできる「Public Post Preview」プラグイン！
カテゴリー：WordPress
-
-
2016/01/07
Flashの元データがないswfファイル内のリンクを編集する方法！
カテゴリー：お勧めツール・ソフト
-
-
2016/01/02
2016年も宜しくお願いします！
カテゴリー：独り言
-
-
2015/10/14
WP BASIC AuthプラグインでBasic認証を設定！
カテゴリー：WordPress
最終更新日: 2016年1月3日
GTmetrixで数値が変わらないのは当たり前ですね。
instantclick.min.jsはページ内のリンクにマウスが乗った時にそのリンクのページを先読みするものです。
あとそもそもですがinstantclick.min.jsのコードの書き方が間違っていて有効になってませんよ。
あなたのサイトだったら
InstantClick.init();
と直前に設置すると良いです。
私もinstantclickを使ってみましたがページ内の移動が爆速化して驚きました。スマホだとできないのが残念なところですね・
yokudekiruさま
コメント、有難うございます。
ご指摘、有難うございます。チェックしてみると「instantclick.min.js」が読み込まれてませんでしたね。
＞＞instantclick.min.jsはページ内のリンクにマウスが乗った時にそのリンクのページを先読みするものです。
⇒参考になりました。有難うございます。
すいません、ワードプレスの仕様でコードが切れてますね。
<code>
InstantClick.init();
</code>
これでも表示されなかったらすいません。
やっぱりだめか・・・
あなたのツイッターに送信しました。文字数制限があるので、少し省いていますがすいません。
<a href="https://twitter.com/yokudekiru/with_replies" rel="nofollow">https://twitter.com/yokudekiru/with_replies</a>