Jetpack5.8より Lazy Loading Images 機能が追加されたので使ってみた
Jetpack5.8より Lazy Loading Images 機能が追加されたので使ってみた

Jetpack5.8より Lazy Loading Images 機能が追加されたので使ってみた

Jetpack5.8より Lazy Loading Images 機能が追加されたようです。Lazy Loading Images とは画面が表示された時、ファーストビューで表示されている画像のみ表示し、画面外の画像はスクロールダウン時に順番に読み込んでいく機能です。この機能により、ページのロード時間を高速化しようというものです。
本サイトは Lazy Loading Images 機能を実装していなかったので、試しにこの機能を使って見ようと思います。設定方法は簡単なので、Jetpackをインストールしているサイトはちょっと試してみてはいかがでしょうか。

Jetpackプラグインのインストール

Jetpackをインストールしていない場合は、以下のリンクにインストール手順を記載していますので、ご参照ください。インストール後、Jetpackプラグインを有効化してください。すでにインストールしている場合はこの項目は飛ばしてください。

Lazy Loading Images 機能設定手順

Lazy Loading Images 機能を使うには、まず、WordPress管理画面の [Jetpack] → [設定]を開いてください。

Jetpack設定

設定を開くと、下図のようなJetpackの設定画面が開きますので [Writing] のまま、下方へスクロールしてください。

Jetpack設定画面

下方にスクロールすると、Speed up your site の項目に [Lazy load images] がありますので、ここをポチッとONにしてください。

Lazy Load images Setting

[Lazy load images] をONにすると下図のようになります。これで設定完了です。

Lazy Load images ON

速度計測

とりあえず、Lazy Loading Images 機能を無効と有効で速度を計測してみました。使ったのはChromeのデベロッパーツールです。Webサイトを表示してキーボードのF12キーを押すと表示されます。その中の [Network] でサイトを読み込んでみました。Loadまでの時間を計測します。

Lazy Loading Images 機能無効の場合

Loadされるまで2.40秒かかっています。

Lazy loading 無効時の計測

Lazy Loading Images 機能有効の場合

Loadされるまでの時間が約1.93秒に改善されました。微妙にですが一定の効果はあるようです。

Lazy loading 有効時の計測

Googlebotの画像認識について

Lazy Loading Images 機能を設定した場合、Googlebotに画像が認識されないため、SEOに不向きという噂があったので、Search Console の Fetch as Google で画像を認識できているかチェックしてみました。

Fetch as Google

「Googlebotではこのページを以下のように認識しました。」の項目で、無事画像が表示されているので、Googlebotで画像認識はできているようです。

まとめ

このように、Jetpackの設定で簡単に Lazy load images 機能が実装されました。imgタグの中に、data-lazy-loadedが追加されているはずです。当面このまま様子を見て、良さそうなら今後使っていこうかと思います。何かありましたら、またこのページで報告があるかもしれません。
以上、Jetpackの Lazy load images 機能の紹介でした。


この記事が気に入ったら
JunJunWeb.Netアカウントをフォロー!
タグ :