画像の読み込みを工夫して、Bloggerの記事をいち早く表示する方法 (LazyLoadプラグイン)

一般的にブラウザでページを表示するとき、ブラウザはサーバーからデータを全てダウンロードしてきます。
それが決して見られることのない画像であってもダウンロードしてきます。
例えば画像が多用されていて、縦に長いページの場合、ブラウザの非表示エリアにも画像はあるわけですが、その画像もダウンロードしてこようとするので表示に時間がかかります。
特に回線が貧弱なモバイル回線などでは表示までにかかる時間の長さが顕著になります。

今回紹介するjQueryプラグインは、ブラウザの非表示エリアにある画像はダウンロードを保留し、 ブラウザをスクロールして初めて画像が表示エリア内へ来た時に画像をダウンロードするというもので、LazyLoadプラグインといいます。

画像が多いページの場合、無駄な画像をダウンロードしないので、ページ表示完了までの時間を劇的に改善できます。

BloggerにLazyLoad Plugin for jQueryを組み込む

LazyLoad Plugin for jQueryを組み込むことにより、画像の遅延読み込みを実装することができます。

まず、BloggerのテンプレートからHTMLの編集をクリックします。

Ctrl+Fで</head>を探したら、直上に下記コードを書き換えてから貼り付けます。
既にjQueryを利用してる場合、下記コードからjQueryのスクリプトタグは削除してください。

<!-- LazyLoad Plugin for jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'></script>
<script src='https://googledrive.com/host/0ByEGaClBNxLRa3NFcm5UY2VQVkE/jquery.lazyload.mini.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
  $(function(){
    $(".post-body img").lazyload({
      effect     : "fadeIn",
      placeholder: "https://googledrive.com/host/0ByEGaClBNxLRa3NFcm5UY2VQVkE/jquery.lazyload.grey.gif"
    });
  });
//]]>
</script>

上記コードの中にある

https://googledrive.com/host/0ByEGaClBNxLRa3NFcm5UY2VQVkE/jquery.lazyload.mini.js
https://googledrive.com/host/0ByEGaClBNxLRa3NFcm5UY2VQVkE/jquery.lazyload.grey.gif

は、ダウンロードして使ってください。
ダウンロード後、自分のウェブスペースにアップロードし、上記コードの該当URLを書き換えて使ってください。

これで作業は終わりです。

＜2014.05.16 追記＞
以下のコードは、LazyLoadのplaceholderをData URI Schemeに変更したバージョンです。
いちいち、画像をアップロードしなくて済むだけでなく、HTTPリクエスト数の削減にもつながるのでお勧めです。
常用するなら、こちらのコードの方ですね。

<!-- LazyLoad Plugin for jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'></script>
<script src='https://googledrive.com/host/0ByEGaClBNxLRa3NFcm5UY2VQVkE/jquery.lazyload.mini.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
  $(function(){
    $(".post-body img").lazyload({
      effect     : "fadeIn",
      placeholder: "data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
    });
  });
//]]>
</script>

---

以下、説明です。
LazyLoadプラグイン本体です。

<script src='https://googledrive.com/host/0ByEGaClBNxLRa3NFcm5UY2VQVkE/jquery.lazyload.mini.js' type='text/javascript'></script> 

そして、これがLazyLoadプラグインを呼び出している部分となります

$(".post-body img").lazyload({
  effect     : "fadeIn",
  placeholder: "https://googledrive.com/host/0ByEGaClBNxLRa3NFcm5UY2VQVkE/jquery.lazyload.grey.gif"
});

簡単に説明すると、".post-body img"のセレクタが遅延読み込みの対象です。
".post-body img"なので、投稿記事の中の画像(i㎎要素)が対象になっています。
もし仮にここを"img"にすると、ウェブページ全体の画像(i㎎要素)が対象になります。

placeholderは遅延中の画像のために、一時的に表示する画像を指定します。
ここでは軽さを優先するために、1pxのgif画像が指定されています。
effectはそのままエフェクト効果で、フェードインが指定されています。

LazyLoadプラグインのベンチマーク

GTmetrixを使ってLazyLoadプラグインの効果をベンチマークしてみます。

GTmetrix | Website Speed and Performance Optimization
http://gtmetrix.com/

 以下のウェブページでベンチマークしてみます。

TRSフォンでバランス伝送ケーブルを自作 (CANARE F-16とL-4E6S) http://saskwave.blogspot.jp/2014/04/trs-canare-f-16-l-4e6s.html

LazyLoadプラグイン組み込み前

LazyLoadプラグイン組み込み後

Page load timeはあんまり当てにならないんですが、Page Speed Gradeは向上してますね。
もしこれがもっとたくさん画像のあるサイトだったら効果はてきめんでしょう。