[試] 画像遅延ロード対象の最適化で体感表示速度向上! WordPressプラグイン Unveil Lazy Load

[試] 画像遅延ロード対象の最適化で体感表示速度向上! WordPressプラグイン Unveil Lazy Load
photo credit: Tambako the Jaguar via photopin cc

遅延ロードさせる対象画像を最適化して体感表示速度を改善!

WordPressプラグイン Unveil Lazy Loadアップデート(Version 0.3.0)のお知らせです。

一般的なWordPressの画像遅延ロードプラグイン(Lazy Loadプラグイン)の弱点を克服すべく、新機能を追加しました。その概要と利用法を紹介します。

SPONSORED LINK

アウトライン

WordPressプラグイン Unveil Lazy Loadとは

WordPress › Unveil Lazy Load « WordPress Plugins

WordPressにおける画像遅延ロードを行うためのプラグインです。画像の読み込みを遅延させることにより、ページの表示速度を高速化します。

Unveil Lazy Loadは、一般的なLazy Loadのプラグインと比較して、遅延ロード用jQueryライブラリの軽量化とリクエスト数削減のための施策を行っています。詳細は、以下のエントリを参照して下さい。

[試] 速いは正義!WordPressプラグイン Unveil Lazy Load | 表示速度改善のためのこだわり施策を適用
[試] 表示速度でお悩みの方に。WordPressプラグイン Unveil Lazy Loadアップデートのお知らせ

WordPressのLazy Loadプラグインの理想と現実

今回の機能追加の背景です。

画像の遅延ロードの理想

表示速度の改善効果を最大化する点で画像遅延ロードの理想の姿は、「閲覧者からの視点」と「ページ全体(画像リクエスト数、読み込みデータ量)の観点」で対応のバランスが取れた状態といえます。

具体的には、以下の対応が実現できている状態です。

ファーストビュー内の画像は、遅延ロードされずにそのまま表示される。
閲覧者が最初に目にする範囲(ファーストビュー)の画像を遅延ロードさせてしまうと、ページの表示そのものが遅いと感じさせてしまうためです。
ファーストビュー外の画像は、遅延ロードされる。
最初に目にする範囲外は遅延表示されても影響は少ないので、ページ全体の表示高速化を目的として遅延ロードさせます。一度に読み込む画像の数(リクエスト数)とデータ容量を最小限に抑えることで、表示速度の改善をはかります。

ブログ等のトップページを例に理想の姿を補足すると以下の図の通りとなります。

announcement-update-wordpress-plugin-unveil-lazy-load-02

WordPressの一般的なLazy Loadプラグインを使用した場合の現実

先述の姿が理想ではあるものの、一般的なWordPressのLazy Loadプラグインは、以下図の通りファーストビュー内の画像も遅延ロード対象とするよう実装されてしまっています。

announcement-update-wordpress-plugin-unveil-lazy-load-03

これによりページ全体としての表示速度が高速化していても閲覧者が最初に目にする画像が遅延表示されてしまうため、改善効果が十分に感じられない場合が発生します。

画像遅延ロード範囲を制御するための仕組み

ということで理想と現状のギャップを克服すべく、Unveil Lazy Loadの新バージョンには、画像遅延ロード範囲を制御するための新たな仕組みを導入しました。

遅延ロードの対象画像を制御するための新機能

画像のimgタグ内にdata-lazy属性を付加することで、遅延ロードの対象からはずせるようにしました。

以下は、サンプルコードです。このように「data-lazy=”false”」を属性として追加された画像は、遅延されずに読み込まれるようになります。

ファーストビューの画像に対する新機能の適用と理想形の実現

ファーストビューとなりえる画像にdata-lazy属性をあらかじめ付与します。これによりファーストビュー内の画像は、遅延表示の対象外とできます。

残りのdata-lazy属性がついていない画像は遅延ロード対象のままなので、先述の理想の形に近づけることができます。

テンプレートタグ使用時のdata-lazy属性追加方法

WordPress管理のサムネイルは、テンプレートタグを使用して参照コード(imgタグ)を出力する必要があるため、上記サンプルコードのように直接data-lazy属性を追記することができません。

テンプレートタグにてdata-lazy属性を追加するためには、引数にオプションとして指定する必要があります。

以下、テンプレートタグget_the_post_thumbnailを使用した場合の例になります。data-lazy属性を追加するためには、引数にarray('data-lazy' => 'false')を渡します。

念のための補足ですが、テンプレートタグthe_post_thumbnailを使用している場合も同様の対応となります。

まとめ

遅延ロードさせる対象画像を最適化して体感表示速度を改善!

WordPressプラグイン Unveil Lazy Loadのアップデート内容のお知らせでした。

他プラグインを利用していてファーストビュー内の画像の遅延ロードが気になる方は、本プラグインとdata-lazy属性を試してみて下さい。