「instantclick.min.js」でページの読み込みを高速化してみる！

こんにちは！

6月15日にブラジルに日本対コートジボワールの試合を観戦しにいっていたので、ブログをしばらく更新できませんでした。今日からまた気合いを入れて頑張りたいと思います。

↓試合には負けましたが、本田の先制点が決まった時の興奮と感動は忘れられないものになりました。そして負けた後の落胆も。

ワールドカップの余韻はここまでにして話を戻します。当サイトを見て頂いた方は、ご存じだと思いますが、当サイトのページ表示速度はかなり遅いです。すでに私の中でサーバーの変更は決定事項なのですが、サーバーを変えるまでに、少しでもサイトの速度が改善されるように、色々と試してみたいと思います。

※すでに「エックスサーバー」にサーバーを変更しました。

そこで今回は「instantclick.min.js」を使用してページの読み込みを高速化してみたいと思います。

どこまで効果がでるのかは未知数ですが、できることは全てやってみます。

「instantclick.min.js」とは？

「instantclick.min.js」とは、ページ内にあるリンクを先読みすることで、ページの遷移を高速化できるJavaSciptライブラリです。「HTML5」で導入された「pushState」の「History API」と「Ajax」を合わせて使用した「pjax」と呼ばれる技術です。

ユーザーがリンクにマウスオーバーした時点でページの先読みを行います。それにより表示の体感速度が改善されるとのことです。簡単に導入できますので、次の項で実際に導入してみたいと思います。

導入手順！

↓以下のコードをの直前に設置してください。「ドメイン名」の部分は各ドメインを記述してください。

<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」でページの読み込みを高速化してみる！」でした！

それではまた。