[試] 速いは正義！WordPressプラグイン Unveil Lazy Load | 表示速度改善のためのこだわり施策を適用

サイト表示の速さは正義です。Webサイトの表示速度改善方法の一つとして、画像の遅延読込があります。

WordPressでは、プラグインのLazy LoadやBJ Lazy Loadが有名ですが、より表示速度の改善にこだわったプラグインUnveil Lazy Loadの紹介をします。

アウトライン

速いは正義

サイト表示の速さは正義です。Yahoo!では、0.4秒遅くなるだけでページトラフィックが5-9%落ちたそうです。逆にShopzillaでは、6秒から1.2秒に表示時間を改善したところ、PVが25%増加したそうです。（出典:The performance business pitch ）。

また、Googleが検索順位を決定する一指標としてサイトの表示速度を採用しているため、SEOの観点でもパフォーマンス最適化（サイト表示速度の高速化）は重要と言えます。

表示速度を改善するための画像遅延読込

Webサイトの表示速度改善方法の一つとして、画像の遅延読込という技術があります。

これは、ページロード時に画像を一度に読み込むのではなく、ページロード後にスクロールによって画像が表示領域に入った段階で順次読み込むテクニックです。

一度に取得する画像の抑制によりサーバとクライアント間を往復するHTTPリクエスト数と読込データ容量が削減できるため、表示速度の高速化につながります。

これを実現する方法としては、WordPressではLazy LoadやBJ Lazy Loadのプラグインが有名です。

もっと表示時間短縮の工夫できるよね

というわけで、より表示時間の短縮にこだわったプラグインを作成したので紹介します。工夫した点は、以下の通りです。

読込データ量の最小化

画像遅延読込を実現するためのjQueryプラグインとして、より軽量なUnveil.jsを採用しています。

Unveil.jsのデータ量は、1ファイルで約0.87KByteです。上記Lazy Loadが使用しているjQueryプラグインは、2ファイルで約2.2KByteなので半分以下に削減できています。

また、画像をHTMLに直接埋め込むData URI Schemeの適用により、ダミー画像分のデータ容量削減に成功しています。（画像指定時のURLとBase64でテキスト化した画像の長さがほぼ同様のため、画像データ分の容量削減ができています。）

HTTPリクエスト数の削減

ダミー画像（1x1pxの透過gif）読込のために、Lazy LoadはHTTPリクエストを個別に発生させてサーバにアクセスしています。たった2Byte程度のデータにHTTPリクエストを発生させるのは、通信のオーバーヘッドが大きく不効率です。

このプラグインでは、Data URI Scheme適用によりHTMLに直接画像を埋め込むことで、このHTTPリクエストを削減しています。

また、Unveil.jsの採用によるファイル数削減でもHTTPリクエストを削減できています。

ダウンロード方法

このプラグインは、Unveil Lazy Loadと命名しました。以下wordpress.orgからダウンロードできます。

WordPress › Unveil Lazy Load « WordPress Plugins

利用方法

ダウンロードしたZipファイルをWordPress管理画面の[プラグイン]→[新規追加]→[アップロード]から選択インストールします。

または、[プラグイン]→[新規追加]→[検索]より「Unveil Lazy Load」を検索し、プラグインのインストールリンクから直接インストールすることもできます。

インストール完了後、有効化してご利用下さい。設定項目はありません。

まとめ

表示速度改善のための施策（読込データ量の最小化とHTTPリクエスト数削減）にこだわったWordPressプラグイン Unveil Lazy Loadを紹介しました。