画像の遅延読み込み(Lazy Load)とは|WordPressはプラグインなしで設定できる?表示速度を改善する基本の仕組みと、当サイトの設定

画像を多く使う記事ほど、ページ全体の表示速度が遅くなりがちです。表示速度は読者の使用感だけでなく、検索エンジンからの評価にも関わる要素です。

そこで役立つのが「遅延読み込み(Lazy Load)」という仕組みです。画面に表示される直前まで画像の読み込みを遅らせることで、初期表示を軽くできます。

この記事では、Lazy Loadの基本的な仕組みと、WordPressでの設定方法・注意点を、確認の手順とあわせて解説します。当サイトの遅延読み込みの設定も、実際に調べた結果で紹介します。

Lazy Loadとは何か

画面に入る直前まで読み込みを遅らせる仕組み

通常、ページを開くと画面外にある画像も含めて、そのページに含まれる画像がまとめて読み込まれます。Lazy Loadは、この読み込みタイミングを「読者がスクロールして画面に近づいたとき」まで遅らせる仕組みです。

結果として、最初に表示すべき部分の読み込みが軽くなり、ページが体感的に速く開くようになります。

たとえば、画像が10枚ある記事でも、最初の1〜2枚だけを先に読み込めば、読者はすぐに記事を読み始められます。残りの画像は、スクロールに合わせて順番に読み込まれます。

表示速度が重要視される理由

ページ表示速度とCore Web Vitalsで解説した通り、表示速度は読者の離脱率だけでなく、検索エンジンの評価にも関わる要素です。

画像を多用するブログほど、Lazy Loadによる恩恵を受けやすい傾向にあります。

特に、スマホで読む読者は、通信環境によって画像の読み込みに時間がかかることもあります。読み込む量を減らす工夫は、読者への配慮にもなります。

WordPressでの対応状況

最近のWordPressは標準で対応済み

WordPress本体には、バージョン5.5以降、画像に対する遅延読み込みの機能が標準で組み込まれています。特別なプラグインを入れなくても、多くの場合すでに機能している状態です。

Cocoonテーマ側でも、画像表示に関する最適化がある程度考慮されています。

そのため、初心者の方が、わざわざ追加のプラグインを入れる必要は、ほとんどありません。

設定状況を確認する方法

自分のサイトで実際にLazy Loadが働いているかどうかは、ブラウザの開発者ツールを使って、画面外の画像が後から読み込まれているかを確認することで分かります。

専門的な確認が難しい場合は、無理に確認しようとせず、標準機能を信頼して運用しても問題ありません。

もう少し簡単に確認したいときは、記事のページのソースコードを表示して、画像のタグに「loading=”lazy”」という記述があるかを、検索して探す方法もあります。

導入・運用時の注意点

アイキャッチ画像は対象外にする場合がある

記事の一番上に表示されるアイキャッチ画像は、読者が最初に目にする部分のため、Lazy Loadの対象から意図的に外す設定になっていることがあります。これは、最初の表示をかえって遅らせないための配慮です。

キャッシュプラグインなど他の高速化施策と組み合わせる場合は、設定が重複していないかも確認しておきましょう。

最初の画面に大きく表示される画像まで遅延させてしまうと、表示が遅く感じられることがあります。最初に見える画像は、すぐに読み込む設定が望ましいです。

画像の場所	Lazy Loadの考え方
記事の下のほうにある画像	遅延読み込みの対象にしてよい
アイキャッチなど、最初に見える画像	対象外にするほうが望ましい

画像そのものの軽量化とあわせて行う

画像の圧縮・WebP化による表示速度改善で紹介した通り、Lazy Loadはあくまで読み込みタイミングを調整する仕組みであり、画像そのものの容量を減らすものではありません。

両方を組み合わせることで、表示速度の改善効果をより高めることができます。

画像が重いままだと、Lazy Loadで読み込むタイミングを遅らせても、読み込み自体に時間がかかってしまいます。

Lazy Loadが働いているか確認する手順

確認は、次の手順で、専門的な知識がなくても試せます。表示や名称は、ブラウザによって異なる場合があります。

1. 確認したい記事のページを、ブラウザで開く
2. ページの何もない場所で右クリックし、「ページのソースを表示」を選ぶ
3. 表示された画面で、検索機能を使い、「lazy」という言葉を探す
4. 画像のタグの近くに「loading=”lazy”」があれば、遅延読み込みが働いている

見つからない場合でも、慌てる必要はありません。テーマやプラグインが、別の方法で対応していることもあります。

当サイトの画像の遅延読み込みの設定(実例)

ここでは、当サイト(伸びるSEO入門)の画像の遅延読み込みの設定を、実際に調べた結果を紹介します(2026年10月8日)。記事ページのHTMLを読み取って、画像のタグを確認しました。

調べた結果

項目	確認した内容
確認した記事	ロングテールキーワードの記事
遅延読み込みの指定がある画像	27枚すべてに「lazyload」の指定と、本来の画像のURLを入れる「data-src」がある
仕組み	テーマ(Cocoon)のJavaScriptによる方式(ブラウザ標準の「loading=lazy」ではない)
JavaScriptが使えない環境	代わりに通常の画像を表示するための、noscriptの画像も出力されている
画像の形式	JPEG・PNG(WebPは使っていない)

Googleの公式の説明

Googleの公式ドキュメント(遅延読み込み)には、次のような説明があります。

• Googleは、ページを操作しない。スクロールやクリックをしないと読み込まれない作りだと、内容が見えなくなることがある
• ブラウザ標準の「loading=lazy」や、IntersectionObserver、JavaScriptのライブラリを使う方法が、紹介されている
• Search Consoleの「URL検査」で、画像のURLが、レンダリング後のHTMLのsrc属性に入っているかを確認できる

確認のしかた

1. 確認したい記事を開き、ページのソースを表示する
2. 「lazyload」や「loading」を検索して、画像のタグの指定を見る
3. Search Consoleの「URL検査」→「公開URLをテスト」で、レンダリング後のHTMLを確認する

Lazy Loadでよくある質問

Lazy Loadについて、初心者の方が疑問に思いやすい点をまとめました。

Lazy Load用のプラグインは、入れたほうがよいですか?

多くの場合、必要ありません。WordPress本体とテーマの機能で、すでに対応しているためです。プラグインを追加すると、機能が重複して、不具合の原因になることもあります。

遅延読み込みをすると、画像が検索エンジンに認識されなくなりませんか?

標準的な方法で実装されていれば、Googleは画像を認識できるとされています。WordPressの標準機能を使っている場合は、過度に心配する必要はありません。

当サイトでは、遅延読み込みを、どう設定していますか?

テーマ(Cocoon)の機能を使っています。記事ページの画像27枚すべてに、遅延読み込みの指定があり、JavaScriptが使えない環境向けの、通常の画像も用意されています。プラグインは、追加していません。

遅延読み込みは、SEOに悪影響がありませんか?

Googleは、正しく実装された遅延読み込みを、問題なく扱えるとしています。確認するときは、Search Consoleの「URL検査」で、画像のURLが、レンダリング後のHTMLに入っているかを見ます。

WordPress標準の遅延読み込みと、テーマの機能は、どちらを使えばよいですか?

WordPressは、バージョン5.5から、画像の遅延読み込みに、標準で対応しています。テーマ(当サイトのCocoonなど)にも、遅延読み込みの機能があるため、まず、自分のサイトの設定で、すでに有効になっていないかを確認しましょう。

当サイトは、テーマの機能で、記事ページの画像27枚すべてに、遅延読み込みが設定されていました。プラグインを足して、二重に設定する必要は、ありません。

遅延読み込みしないほうがよい画像は、ありますか?

Googleの公式ドキュメントでは、ページを開いてすぐに見える範囲のコンテンツは、遅延読み込みしないよう、注意されています。表示が遅くなり、読者にも分かりやすいためです。

Lazy Loadでよくある失敗例は?

よくある失敗は、次の3つです。

• 複数のプラグインで、同じ機能を重ねてしまう
• 最初に見える大きな画像まで、遅延読み込みの対象にしてしまう
• 画像そのものが重いまま、Lazy Loadだけに頼ってしまう

画像を軽くすることと、Lazy Loadを組み合わせるのが、基本の考え方です。

まとめ:標準機能を理解し、画像の軽量化とあわせて活用する

Lazy Loadは、意識しなくても既に働いていることが多い、縁の下の力持ちのような機能です。

まずは画像そのもののファイルサイズを見直すところから、表示速度改善に取り組んでみましょう。

取り組むときは、次の順番がおすすめです。

1. 画像のファイルサイズを、圧縮して小さくする
2. Lazy Loadが標準で働いているかを確認する
3. 重複する高速化の設定がないか確認する

SEOを基礎から順番に学びたい方は、SEO入門の進め方(はじめに)と学習ステップもあわせてご覧ください。