WordPressで「オフスクリーン画像の遅延読み込み」対策で速度改善

PageSpeed Insights の表示で、「オフスクリーン画像の遅延読み込み」をせよと指示されるケースの WordPress での対策です。

オフスクリーンとは、画面に表示されない部分ということで、表示されない画像のロードを遅れてロードせよという指示になります。

改善対策

この記事では、WordPress の対策をメインにご紹介します。

WordPress では遅延ロードに対応したプラグインを使いましょう。

WordPress の画像遅延読み込みには、lazy load プラグインを使えと PageSpeed の指示があります。
今回は、Autoptimize – WordPress plugin を使ってみます。

WordPress 以外の場合は、JavaScript の Lazy-load プラグインを使うといいでしょう。

プラグイン Autoptimize をインストール＆有効化してください。
設定 > Images と進みます。

ここから Lazy-load images? にチェックを入れます。

「Lazy-load images?」にチェックを入れて 変更を保存 を押せば設定は完了です。

PageSpeed Insights を確認して「オフスクリーン画像の遅延読み込み」という記述が消えていれば OK です。

Autoptimize プラグインなしでは、モバイル38点でした😇

Autoptimize ありではモバイルで点数が改善です。

モバイルで、5点の改善となりました😁
改善の点数はわずかですが、モバイルの点数改善は難易度が高めなので、対応したい項目です。

プラグインを入れるだけなので WordPressはやりやすいですね。

CAMON.TOKYO の吉澤修です。

記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。