画像を後から読み込んでサイトを高速化するWordPressプラグイン「Lazy Load」

WEBサイトの表示速度は、ユーザーにとっては早ければ早いほどいいですよね。

当ブログももっと高速化しなければと思っていて、キャッシュ系プラグインを色々試してはいるのですが、なかなかいいものに巡り会えないでいます。今のところお気に入りはDB Cache Reloaded Fixくらいです。

さて、同じ高速化プラグインでも今回はキャッシュとはちょっと異なる特色を持った「Lazy Load」を紹介します。Lazy Loadは、画像の読み込みを遅延させるWordPressプラグインです。後から画像を読み込むことでサイトの表示を高速化します。

Lazy Loadのインストール

1. Lazy Loadをダウンロードします。
2. ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。
3. 管理画面の[プラグイン]ページで、Lazy Loadプラグインを有効化します。

Lazy Loadは、有効化するだけで機能します。そのため、特に設定をする必要はありません。

ただ、素早く下にスクロールしたときに画像の読み込みが追いつけず、ちょっと動きがぎこちなくなることがあります。

その場合は、/lazy-load/js/lazy-load.js を編集します。デフォルトだと以下の箇所が「distance: 200」となっており、ファーストビューの200px下まで読み込んでおく、という設定になっています。


function lazy_load_init() {
 $( 'img[data-lazy-src]' ).bind( 'scrollin', { distance: 200 }, function() {
 lazy_load_image( this );
 });

この値を増やすことで、素早く下にスクロールした時の動きもスムーズになります。ちなみに当ブログでは以下のように400に指定しています。色々と試して自分のサイトに最適な値を見つけて設定しましょう。

function lazy_load_init() {
$( 'img[data-lazy-src]' ).bind( 'scrollin', { distance: 400 }, function() {
lazy_load_image( this );
});

プラグインの実際の効果が気になるところだと思いますが、プラグイン導入前と後で測定ツールを使って表示速度を測ってみました。測定ツールはGTmetrixを使い、対象ページは画像が多い「Google Readerからの乗り換え用にチェックしておきたいRSSリーダーまとめ」にしました。

スコアはCとDで、ロード時間は5.40秒です。

スコアはCとDで変わらず、と思いきや値は上昇していますね。ロード時間は5.98秒と遅くなっています。ただ、ページサイズとクエリ数は減っています。

プラグインの効果は、数値的にはあると言ってもいいでしょう。体感的にも少し速くなった気がします。

劇的に速くなるということはないようですが、画像を多用しているサイトだともっと効果があるかもしれません。