オフスクリーン画像の遅延読み込みとは？WordPress・JavaScriptでの改善方法を解説【PageSpeed Insights】

Googleが提供する無料のWebページ診断ツール「PageSpeed Insights」を使うと、ページ表示速度の改善ヒントが得られます。その中のひとつ「オフスクリーン画像の遅延読み込み」について、意味と具体的な改善方法を解説します。

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

PageSpeed Insightsの診断項目「オフスクリーン画像の遅延読み込み」は、「画面外にある画像をすぐに読み込まないようにしましょう」という改善提案です。

一般的なWebページは縦に長く、ユーザーはスクロールしながら読み進めます。ページを開いた瞬間にすべての画像を一括で読み込むと、ファーストビュー（最初に表示される領域）の表示完了が遅れてしまいます。

スクロールに合わせて画像を順次読み込む「遅延読み込み（Lazy Load）」を導入すると、初期表示を速くしてユーザー体験と Core Web Vitals の評価を改善できます。

現在のブラウザは loading="lazy" 属性をネイティブでサポートしています。JavaScriptやプラグイン不要で、画像タグに属性を追加するだけで遅延読み込みが有効になります。

<img src="image.jpg" alt="説明文" loading="lazy">

WordPressは5.5以降、投稿内の画像に自動で loading="lazy" を付与します。追加の設定は不要です。

WordPress 5.5未満のサイトや、アイキャッチ・背景画像なども含めて一括で遅延読み込みを設定したい場合は「a3 Lazy Load」などのプラグインが便利です。プログラミング知識不要で、インストールするだけで自動的に適用されます。

WordPressを使わない環境や、細かく挙動をカスタマイズしたい場合はJavaScriptライブラリが選択肢になります。代表的なものを紹介します。

初めてJavaScriptライブラリを使う方におすすめ。APIが豊富でプラグインによる機能拡張も可能です。scriptやCSSの遅延読み込みにも対応しており、汎用性が高い選択肢です。

超軽量・高性能なライブラリ。<head> に外部ファイルを記述し、対象要素に .lazyestload クラスを付けて src を data-src に書き換えるだけで動作します。古いブラウザ対応にはpolyfillが別途必要です。

jQueryのプラグインとして広く普及しています。jQueryと合わせて読み込み、対象画像に数行のコードを追加するだけで導入できます。

すべての画像を遅延読み込みにすると、ページを開いてすぐ表示されるファーストビューの画像まで遅れてしまいます。ファーストビューの画像が遅くなると Core Web Vitals（LCP）の評価が下がり、SEOにも悪影響が出ます。

PCでファーストビューに表示される画像でも、スマホでは画面外になるケースもあります。現在はスマホ閲覧が主流のため、スマホ表示を基準に遅延読み込みの対象を判断するのが現実的です。

「オフスクリーン画像の遅延読み込み」は、スクロール前に見えない画像の読み込みを後回しにしてページ表示を速くする手法です。WordPressなら5.5以降は自動対応済みで、それ以外の環境ではプラグインやJavaScriptライブラリで対応できます。

ファーストビューの画像だけは即時読み込みのままにしておくことを忘れずに、表示速度とユーザー体験の両立を目指しましょう。