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

公開日:2014年6月19日
最終更新日: 2015年2月23日

instantclick_photo_01

こんにちは!

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

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

wp

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

そこで今回は「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_photo_02

導入後の結果!

instantclick_photo_03

ただ心無しか体感速度は速くなったような気はします。

最後に!

数値としての結果は出ませんでしたが、こういった作業の積み重ねが速度改善につながると思います。体感速度は速くなったような気がするので、ヨシとしておきます。作業量も少ないので、導入する価値はあると思います。

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

それではまた。

公開日:2014/06/19
最終更新日: 2015年2月23日
カテゴリー:jquery・js

関連記事

新着記事

コメント/トラックバック (4件)

トラックバック用URL:

この投稿のコメント・トラックバックRSS

  1. GTmetrixで数値が変わらないのは当たり前ですね。
    instantclick.min.jsはページ内のリンクにマウスが乗った時にそのリンクのページを先読みするものです。

    あとそもそもですがinstantclick.min.jsのコードの書き方が間違っていて有効になってませんよ。
    あなたのサイトだったら

    InstantClick.init();
    と直前に設置すると良いです。

    私もinstantclickを使ってみましたがページ内の移動が爆速化して驚きました。スマホだとできないのが残念なところですね・

  2. yokudekiruさま

    コメント、有難うございます。

    ご指摘、有難うございます。チェックしてみると「instantclick.min.js」が読み込まれてませんでしたね。

    >>instantclick.min.jsはページ内のリンクにマウスが乗った時にそのリンクのページを先読みするものです。
    ⇒参考になりました。有難うございます。

  3. すいません、ワードプレスの仕様でコードが切れてますね。
    <code>

    InstantClick.init();
    </code>

    これでも表示されなかったらすいません。

  4. やっぱりだめか・・・
    あなたのツイッターに送信しました。文字数制限があるので、少し省いていますがすいません。
    <a href="https://twitter.com/yokudekiru/with_replies" rel="nofollow">https://twitter.com/yokudekiru/with_replies</a>




管理人にのみ公開されます

正しい数値を入力して下さい *
Time limit is exhausted. Please reload CAPTCHA.

最新の記事

カテゴリー

過去の記事

プロフィール

  • 著者:Masaki Yamashita

    大阪でWEB制作の仕事をしています。
    WEBデザイン、コーディング、WordPress・EC-CUBEの設置やカスタマイズなど何でもやっています。

follow us in feedly