WordPress・ブログ

オフスクリーン画像の遅延読み込みをBJ Lazy Loadで解決した結果【現在はWordPress標準機能でOK】

  • 登録：
  • 更新：

ブログの表示速度は、ユーザビリティにもSEOにも関わる重要なポイントです。Googleの速度計測ツール「PageSpeed Insights」でサイトを計測すると、改善すべき課題のひとつとして「オフスクリーン画像の遅延読み込み」が表示されることがあります。
結論から言うと、現在のWordPress（5.5以降）では画像の遅延読み込みが標準機能として備わっており、基本的にプラグインなしで対処できます。この記事では、現在の正しい対処法を中心に、かつて筆者がプラグイン「BJ Lazy Load」で検証したときの実測データもあわせて紹介します。

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

PageSpeed Insightsに表示される「オフスクリーン画像の遅延読み込み」の改善アドバイス画面
「オフスクリーン画像の遅延読み込み」の改善アドバイス

「オフスクリーン画像」とは、ページを開いた時点ではまだ画面に表示されていない画像のことです。記事の下のほう、スクロールしないと見えない位置にある画像が該当します。

ブラウザはページを表示する際、HTML・CSS・JavaScript・画像などを順番に読み込みます。なかでも画像は容量が大きくなりがちです。さらに、画面に表示されていない画像まで含めてすべてを最初に読み込もうとすると、ページ全体の表示が遅くなってしまいます。

そこで「遅延読み込み（Lazy Load）」を使います。これは、画面に表示されていない画像の読み込みをいったん後回しにし、その間にHTMLなど重要なリソースを先に読み込む仕組みです。読者がスクロールして画像の位置までたどり着いたときに、はじめてその画像を読み込みます。これによって初回表示が速くなる、というわけです。

PageSpeed Insightsの改善項目に出てくる各指標の意味は、オフスクリーン画像の遅延読み込みとは？WordPress・JavaScriptでの改善方法を解説でより詳しくまとめています。

【現在の対処法】WordPressは遅延読み込みが標準搭載

かつては遅延読み込みを実現するためにプラグインが必要でした。しかしWordPress 5.5（2020年8月）以降は、画像タグに自動で loading="lazy" 属性が付与されるようになり、遅延読み込みが標準機能として有効になっています。

つまり、現在のWordPressを使っているなら、特別な設定をしなくても画像の遅延読み込みはすでに効いているのが基本です。そのうえで、それでもPageSpeed Insightsに「オフスクリーン画像の遅延読み込み」が表示される場合は、次のような原因が考えられます。

  • テーマやプラグインが古い書き方で画像を出力していて、loading="lazy" が付いていない
  • ファーストビュー（最初に見える範囲）の画像にまで遅延読み込みがかかってしまっている
  • 背景画像（CSSのbackground-image）など、標準のlazyloadが効かない方法で画像を表示している
  • スライダーやサムネイルをJavaScriptで生成している

多くのケースは、テーマを最新版に更新し、画像をWordPressの「メディア」から通常どおり挿入していれば解決します。背景画像やJavaScript生成の画像が原因の場合は、その箇所のコードを見直す必要があります。

ファーストビューの画像は遅延させない（注意点）

ひとつ注意したいのが、ファーストビューにある画像（アイキャッチなど）は、むしろ遅延読み込みを外したほうが速く見えるケースがあることです。最初に見える画像まで遅延させると、表示の核になる指標「LCP（Largest Contentful Paint）」が悪化することがあります。WordPress自体もこの点を考慮し、ページ上部の画像には自動でlazyを付けない調整を行っています。基本は標準機能に任せておけば問題ありません。

【検証記録】かつてBJ Lazy Loadで対策したときの結果

ここからは参考情報として、WordPressに遅延読み込み機能がまだ標準搭載されていなかった頃に、筆者がプラグイン「BJ Lazy Load」を使って検証したときの記録を残しておきます。

※注意：BJ Lazy Loadは現在、長期間更新されておらず、新規導入は推奨しません。現在のWordPressでは前章のとおり標準機能で対応できるため、わざわざこのプラグインを入れる必要はありません。あくまで「当時こういう検証をした」という記録としてお読みください。

対策前のスコア

当ブログのある記事をモデルケースとして、対策前のスコアをPageSpeed Insightsで計測しました。

  • モバイル：30
  • パソコン：62
対策前のモバイル表示速度スコア（30点）のキャプチャ画面
対策前のモバイル表示速度のスコア
対策前のパソコン表示速度スコア（62点）のキャプチャ画面
対策前のパソコン表示速度のスコア

BJ Lazy Loadの設定方法（当時）

当時は「プラグイン＞新規追加」から「BJ Lazy Load」を追加して有効化していました。

BJ Lazy Loadをプラグイン新規追加で検索した結果画面
BJ Lazy Load の検索結果画面
BJ Lazy Loadの設定画面
BJ Lazy Load の設定画面（基本はデフォルトで使用）

設定は基本的にデフォルトのままで、画像・iframeの遅延読み込みが有効になりました。

対策後のスコア

同じページを再計測した結果が下記です。

  • モバイル：30 → 31
  • パソコン：62 → 64
対策後のモバイル表示速度スコア（31点）のキャプチャ画面
対策後のモバイル表示速度のスコア
対策後のパソコン表示速度スコア（64点）のキャプチャ画面
対策後のパソコン表示速度のスコア

スコアはわずかに改善し、PageSpeed Insightsの改善項目から「オフスクリーン画像の遅延読み込み」の表示も消えました。ただし数値の上がり幅は小さく、遅延読み込み単体ではスコアへの影響は限定的だったことがわかります。表示速度を本気で上げるには、画像圧縮・キャッシュ・サーバー環境など複数の要素をあわせて改善する必要があります。

表示速度をさらに上げるには

今回の検証でもわかるとおり、遅延読み込みだけでは表示速度は劇的には改善しません。スコアを大きく伸ばすには、複数の対策を組み合わせるのが効果的です。当ブログでは、PageSpeed Insightsのスコアを大きく改善した手順をサイトの表示速度が改善した４手順！初心者でもPage Speed Insightsが７倍に！でまとめているので、あわせて参考にしてください。

また、画像やキャッシュをいくら最適化しても、土台となるサーバーそのものの処理速度が遅いと表示速度には限界があります。表示速度に伸び悩んでいる場合は、サーバー環境の見直しも有効な選択肢です。WordPressが速いサーバーの比較は、レンタルサーバー速度比較｜WordPressが速いサーバーおすすめ5選で詳しく解説しています。

まとめ

  • 「オフスクリーン画像の遅延読み込み」は、画面外の画像を後回しに読み込んで表示を速くする仕組み
  • 現在のWordPress（5.5以降）は遅延読み込みが標準搭載なので、基本はプラグイン不要
  • BJ Lazy Loadは更新が止まっており、新規導入は非推奨
  • 遅延読み込み単体ではスコアの改善幅は小さく、画像圧縮・キャッシュ・サーバーなど複数の対策を組み合わせるのが効果的

まずはお使いのWordPressとテーマを最新版に保ち、それでも改善項目が残る場合に個別の対処を検討するのがおすすめです。

このテーマの関連記事はこちら