Page Speed Insights を使用していると、『オフスクリーン画像の遅延読み込み』という指摘項目が出てくることがあります。

e7b307415b9389b19a944bb0ca717cd1

これはいったい、どういうことなのでしょうか？説明と解決につながる手法をお伝えします。

とにかくざっくり意味を知って、すぐに対応したい方向け

初めに、すぐに対応を進めたい方向けに簡潔にまとめておきます。

  • 指示内容は、「表示されているページの画像を優先して読み込んでんでね」
  • WordPress.ver5.5ではデフォルトで対応済み
  • プラグイン「Lazy Loader」や「Autoptimize」などで簡単対応
  • 「Autoptimize」は有効化して、「設定」▷「画像の遅延読み込み」にチェックを入れて保存でOK！

ワードプレスをアップデートできる方は、バックアップをとりつつプラグインなどの互換性を確認して、アップデート対応するのも手です。

プラグインを入れて指示に従って設定を進めたり、その手のプラグインには「画像の遅延読み込み」などにチェックを入れることができるので、そこで対応することができると思います。

しっかりと理解したい方向け

こちらでは、指示内容の意味や、細かな言葉についても触れておきます。

丁寧に対応したい方はこちらをご覧ください▼

オフスクリーン画像の遅延読み込みとは

オフスクリーン画像の遅延読み込みとは、ページ内の画像を一度に読み込まないことで表示速度を高速化するための技術です。「画像の遅延ロード」「lazyload」などとも呼ばれます。

基本的に、画像のファイルはサイズが大きいので、一度に全ての画像を読み込もうとすると時間がかかってしまい、表示速度への影響が懸念されます。

ユーザーが最初に見るファーストビューの時点で、ページ内の全ての画像を読み込むことはせず、スクロールするごとに画像を少しづつダウンロードしていきます。

デメリットもある？

遅延読み込みも内容を知ると、非常に便利な対応方法だと感じます。

しかし、サイトの容量がそこまで大きくないのにもかかわらず、むやみに遅延読み込みを試みてしまうと逆効果になってしまいます。

画像の遅延読み込みにはライブラリを使用するので、外部との通信に時間がかかってしまうからです。

もともと大きな原因もない状態で無理して画像の遅延読み込みをしてしまうと、反対に表示速度の低速化につながるリスクも覚えておいてください。

プラグインで対応できる？

一番操作が簡単でお勧めしたいのは、「Autoptimize」のプラグインです。

5486ba3c85b811592e9ea8932862f624

Autoptimizeの良いところは、とにかく設定が簡単な部分です。

インストールして、有効化します。

「設定」▷「画像」▷「画像の遅延読み込み」にチェックを入れます。

これで設定は完了です。

プラグインを使わない方法

主にimgタグへの追記と、ライブラリの読み込みと2ステップあります。

imgタグの変更

遅延読み込みをするimgのsrc属性をdata-originalに換え、クラス属性としてclass=”lazy”を追加します。

<img data-original="sample.jpg" class="lazy">
Code language: JavaScript (javascript)

ライブラリの読み込み

ファーストビュー高速読み込みの観点から</body>の直前に読み込みます。ここでは、CDN（Contents Delivery Network）にホストされているjQuery.jsとlazyload.jsを読み込みます。lazyloadの起動は、ライブラリ読み込み後に記述します。

<!-- jQueryライブラリの読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- lazyloadライブラリの読み込み -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lazyload.min.js"></script>


<!--Lazy Loadの起動 -->
<script>
$(function() {
    $("img.lazy").lazyload();
});
</script>
Code language: HTML, XML (xml)

Lazyload.Jsをダウンロードしてサーバー上に置いてから読み込む場合は、Lazyload.Jsライブラリの読み込み部を下記と差し替えます。





<script src="js/lazyload-min.js"></script>

Code language: HTML, XML (xml)




※リンクは下にあります。
※パスは自分の環境に合わせて変更してください。





ライブラリのダウンロード





lazyload.jsは、1.x系と2.x系の2種類があります。1.x系がJqueryを必要とするのに対し、2.x系は単独で動作します。ここでは、1.x系を使用する方法で実装します。





GitHubのMika Tuupola氏のプロジェクトページよりlazyload.js（1.x）をダウンロードします。Zipファイルを解凍後、「lazyload.min.js」（4KB）を自分サイトのjsファイル庫に格納します。





まとめ





今回の実装を終えた後に、もう一度速度を計測してみてください。





ファイルを触る場合は、バックアップをとりながら、細かく動作を確認しつつ対応しましょう。





この記事が多少なりとも、お役に立てばと思います。
記事を読んで不明な点等がありましたらお気軽にTwitter（@kaznak_com）などでご質問ください。





ではまた。