サイト表示速度

オフスクリーン画像の遅延読み込みは今や不要?WordPress標準機能で対応済みの理由【2026年版】

  • 登録：
  • 更新：

サイトの表示速度はユーザビリティだけでなくSEOにも直結する重要な要素です。Googleの計測ツール「PageSpeed Insights」で診断すると、改善項目として「オフスクリーン画像の遅延読み込み」が表示されることがあります。結論から言うと、WordPress 5.5以降は画像の遅延読み込みが標準機能として組み込まれているため、基本的にプラグインを追加する必要はありません。この記事では、現在のWordPressにおける正しい対処法と、かつてプラグイン「BJ Lazy Load」で検証した際の実測データをあわせて紹介します。

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

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

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

ブラウザはページを表示する際、HTML・CSS・JavaScript・画像などのファイルを順に読み込みます。なかでも画像はファイルサイズが大きくなりやすく、画面に表示されていない部分の画像までまとめて読み込もうとすると、ページ全体の表示開始が遅くなってしまいます。

そこで使われるのが「遅延読み込み(Lazy Load)」です。画面外にある画像の読み込みをいったん後回しにし、その間にページの骨組みとなるHTMLなど優先度の高いリソースを先に読み込みます。読者がスクロールして画像の位置に近づいたタイミングで、はじめてその画像が読み込まれる仕組みです。これにより、ページが表示され始めるまでの時間を短縮できます。各指標の詳しい意味については、オフスクリーン画像の遅延読み込みとは?WordPress・JavaScriptでの改善方法を解説【PageSpeed Insights】でもまとめています。

現在のWordPressは遅延読み込みが標準搭載済み

かつては遅延読み込みを実現するためにプラグインの導入が必須でした。しかしWordPress 5.5(2020年8月リリース)以降は、対応する画像タグに自動でloading="lazy"属性が付与されるようになり、遅延読み込みが標準機能として有効になっています。さらにWordPress 6.4以降では仕組みが少し進化し、すべての画像にdecoding="async"(非同期でのデコード)が付与されるとともに、最初に表示される1枚目の画像にはfetchpriority="high"(読み込み優先度を上げる指定)が付くようになりました。これらは画像の読み込み方をブラウザ側で最適化するための仕組みで、設定不要で自動的に適用されます。

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

  • テーマやプラグインが古い書き方で画像を出力しており、loading="lazy"などの属性が付かない
  • 画像タグにwidth・height属性が指定されておらず、自動付与の対象外になっている
  • 背景画像(CSSのbackground-image)など、標準の遅延読み込みが効かない方法で画像を表示している
  • スライダーやサムネイルをJavaScriptで動的に生成している

多くの場合、WordPress本体とテーマを最新版に更新し、画像をメディアライブラリから通常どおり挿入していれば解決します。背景画像やJavaScript生成の画像が原因の場合は、該当箇所のコードを個別に見直す必要があります。

ファーストビューの画像は遅延させなくてよい

注意したいのは、ページを開いてすぐ見える「ファーストビュー」の画像(アイキャッチ画像など)です。この部分の画像まで遅延読み込みにしてしまうと、表示の体感速度を示す重要な指標「LCP(Largest Contentful Paint)」がかえって悪化することがあります。WordPressはこの点を踏まえ、ページ上部の画像には自動でloading="lazy"を付けず、先述のfetchpriority="high"で優先的に読み込む調整を行っています。基本的には標準機能に任せておけば問題ありません。

【検証記録】かつて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のスコアを大きく改善できた手順は、サイトの表示速度が改善した4手順!初心者でもPage Speed Insightsが7倍に!でまとめているので、あわせて参考にしてください。

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

あわせて読みたい記事

まとめ

  • 「オフスクリーン画像の遅延読み込み」とは、画面外の画像の読み込みを後回しにして表示開始を速くする仕組み
  • WordPress 5.5以降は遅延読み込みが標準搭載されており、6.4以降はdecoding="async"やfetchpriority="high"でさらに最適化されている
  • そのため基本的にプラグインは不要で、BJ Lazy Loadのような古いプラグインの新規導入は推奨されない
  • 遅延読み込み単体ではスコアの改善幅は小さく、画像圧縮・キャッシュ・サーバー環境など複数の対策を組み合わせることが重要

まずはWordPress本体とテーマを最新版に保ち、それでもPageSpeed Insightsで改善項目が残る場合に、個別の原因を確認しながら対処していくのがおすすめです。

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