Jetpack5.8より Lazy Loading Images 機能が追加されたようです。Lazy Loading Images とは画面が表示された時、ファーストビューで表示されている画像のみ表示し、画面外の画像はスクロールダウン時に順番に読み込んでいく機能です。この機能により、ページのロード時間を高速化しようというものです。
本サイトは Lazy Loading Images 機能を実装していなかったので、試しにこの機能を使って見ようと思います。設定方法は簡単なので、Jetpackをインストールしているサイトはちょっと試してみてはいかがでしょうか。
Jetpackプラグインのインストールと有効化
Jetpackをインストールしていない場合は、以下のリンクにインストール手順を記載していますので、ご参照ください。インストール後、Jetpackプラグインを有効化してください。すでにインストールしている場合はこの項目は飛ばしてください。
WordPressプラグインインストールの超基本手順について
Lazy Loading Images 機能設定手順
Lazy Loading Images 機能を使うには、まず、WordPress管理画面の [Jetpack] → [設定]を開いてください。
設定を開くと、下図のようなJetpackの設定画面が開きますので [Writing] のまま、下方へスクロールしてください。
下方にスクロールすると、Speed up your site の項目に [Lazy load images] がありますので、ここをポチッとONにしてください。
[Lazy load images] をONにすると下図のようになります。これで設定完了です。
速度計測
とりあえず、Lazy Loading Images 機能を無効と有効で速度を計測してみました。使ったのはChromeのデベロッパーツールです。Webサイトを表示してキーボードのF12キーを押すと表示されます。その中の [Network] でサイトを読み込んでみました。Loadまでの時間を計測します。
Lazy Loading Images 機能無効の場合
Loadされるまで2.40秒かかっています。
Lazy Loading Images 機能有効の場合
Loadされるまでの時間が約1.93秒に改善されました。微妙にですが一定の効果はあるようです。
Googlebotの画像認識について
Lazy Loading Images 機能を設定した場合、Googlebotに画像が認識されないため、SEOに不向きという噂があったので、Search Console の Fetch as Google で画像を認識できているかチェックしてみました。
「Googlebotではこのページを以下のように認識しました。」の項目で、無事画像が表示されているので、Googlebotで画像認識はできているようです。
まとめ
このように、Jetpackの設定で簡単に Lazy load images 機能が実装されました。imgタグの中に、data-lazy-loadedが追加されているはずです。当面このまま様子を見て、良さそうなら今後使っていこうかと思います。何かありましたら、またこのページで報告があるかもしれません。
以上、Jetpackの Lazy load images 機能の紹介でした。