オフスクリーン画像の遅延読み込みとは？WordPress・JavaScriptでの改善方法を解説
GoogleのWebサイト診断ツール「PageSpeed Insights」でスコアを確認すると、「オフスクリーン画像の遅延読み込み」という改善提案が表示されることがあります。この記事では、その意味と具体的な対応方法をWordPress・JavaScriptの両面から解説します。
「オフスクリーン画像の遅延読み込み」とは何か
PageSpeed Insightsが示す「オフスクリーン画像の遅延読み込み」とは、「画面に映っていない画像はすぐに読み込まずに後回しにしましょう」という提案です。
Webページは縦長であることが多く、ユーザーはスクロールしながら読み進めます。ページを開いた瞬間に全画像を一括で読み込もうとすると、最初に見える領域（ファーストビュー）の表示が完了するまでの時間が長くなってしまいます。
スクロールに応じて画像を順番に読み込む「遅延読み込み（Lazy Load）」を実装することで、初期表示を高速化し、Core Web VitalsのLCP（最大コンテンツの描画）改善にもつながります。
遅延読み込みの改善方法
HTML標準のloading属性を使う（最もシンプルな方法）
現在の主要ブラウザはすべて loading="lazy" 属性をネイティブでサポートしています。JavaScriptもプラグインも不要で、imgタグに属性を一つ追加するだけです。
<img src="image.jpg" alt="説明文" loading="lazy">WordPressは5.5以降、投稿エディターから挿入した画像に loading="lazy" を自動で付与するようになっています。特別な設定を行わなくても対応済みです。
WordPressならプラグインで一括対応も可能
アイキャッチ画像や背景画像など、エディターを通さない画像にも遅延読み込みを適用したい場合は、「a3 Lazy Load」などのプラグインを活用する方法があります。インストールして有効化するだけで自動的に全画像へ適用され、プログラミングの知識は一切不要です。
JavaScriptライブラリを使う（エンジニア向け）
WordPressを使わない環境や、細かい制御が必要な場合はJavaScriptライブラリが選択肢になります。代表的なライブラリを3種類紹介します。
lazysizes.js
初めてJavaScriptライブラリに挑戦する方に向いています。豊富なAPIとプラグインによる機能拡張が可能で、scriptやCSSの遅延読み込みにも対応しています。汎用性が高く、多くのプロジェクトで採用されています。
Lazyestload.js
超軽量で高性能なライブラリです。<head> 内に外部ファイルを読み込み、対象画像に .lazyestload クラスを追加して src を data-src に変更するだけで動きます。古いブラウザへの対応にはpolyfillが別途必要です。
jquery.lazyload.js
jQueryのプラグインとして広く利用されています。jQueryと組み合わせて読み込み、対象画像に短いコードを追記するだけで導入できます。jQueryをすでに使っているプロジェクトとの相性が良いです。
注意点：ファーストビューの画像は遅延読み込みにしてはいけない
全画像を遅延読み込みに設定してしまうと、ページを開いた直後に表示されるはずの画像まで遅れて読み込まれるようになります。これは逆にCore Web VitalsのLCPスコアを悪化させ、SEOにも悪影響を及ぼします。
また、PCではファーストビューに表示される画像でも、スマホでは画面外になるケースがあります。現在のWeb閲覧はスマホが主流であるため、スマホ表示を基準としてファーストビューの画像を判断するのが現実的なアプローチです。
サーバー自体の応答速度が遅い場合は、画像の遅延読み込みだけでは改善に限界があります。高速サーバーへの乗り換えも検討してみましょう。
まとめ
「オフスクリーン画像の遅延読み込み」はページ表示を高速化するために有効な手法です。対応方法を状況別にまとめます。
- WordPressをバージョン5.5以降で使用している → 自動対応済み
- アイキャッチや背景画像も含めて一括設定したい → プラグイン（a3 Lazy Loadなど）
- WordPress以外の環境や細かい制御が必要 → JavaScriptライブラリ（lazysizes.jsなど）
- ファーストビューの画像は遅延読み込みから必ず除外する
