Lighthouseの「Largest Contentful Paint image was lazily loaded」を修正する

Largest Contentful Paint image was lazily loaded：要約

「Largest Contentful Paint画像を遅延読み込みすると、Lighthouseの警告が発生します。」遅延読み込み（lazy loading）された画像は、即時読み込み（eager loading）された画像よりもダウンロードキューに入るのがはるかに遅くなり、LCP指標を遅延させます。 

最終レビュー：Arjen Karel（2026年2月）

「ブラウザはこれを自動的に判断できるほど賢いのではないですか？はい、ブラウザはかなり優秀ですが、このケースでは違います！」

「画像要素を遅延読み込みさせることは、この画像の優先度を下げるようブラウザに明示的に指示することになります。」

これは、遅延読み込みされない画像が先にスケジュールされることを意味します。遅延読み込みされる画像がLCP要素である場合、LCPは遅延し、その遅延はかなりの量になる可能性があります！lazysizes.jsのようなJavaScriptベースの遅延読み込みライブラリは、遅延読み込みが始まる前にJSのダウンロードと実行を必要とするため、この問題をさらに悪化させます。

2025 Web Almanacによると、モバイルページの10.4%が依然としてLCP画像をネイティブの遅延読み込みで処理し、さらに5.9%がJavaScriptベースの遅延読み込みを使用しています。これは、およそ6ページに1ページが最も重要なコンテンツの表示を意図的に遅らせていることになります。

LCP画像からloading="lazy"属性を削除するか、プラグインのフィルターを更新してLCP画像の遅延読み込みをバイパスすることで、Lighthouseの警告を修正してください。

「Largest Contentful Paint image was lazily loaded」の警告とは何ですか？

この警告は、Largest Contentful Paint画像が遅延読み込みされている場合に表示されます。ページ速度の観点から、「この要素は可能な限り早く読み込む必要があります。この要素を遅延読み込みすると、Largest Contentful Paintが遅延する可能性があります。」

簡単な復習：遅延読み込み（lazy loading）

「遅延読み込みとは、要素（多くの場合画像）がページロード時にブラウザによってすぐにダウンロードスケジュールに入れられるのではなく、画面の表示領域に近づいたときにスケジュールされる仕組みです。」2つの方法が存在します。

ネイティブの遅延読み込み

「ネイティブの遅延読み込みは、ブラウザのネイティブ遅延読み込みAPIを使用します。画像の場合、画像タグにloading="lazy"を追加するだけです。」これはすべてのモダンブラウザでサポートされています。

<img loading="lazy"
     src="image.png"
     width="123"
     height="123"
     alt="遅延読み込みされた画像"
>

JavaScriptベースの遅延読み込み

「JavaScriptベースの遅延読み込みは、Intersection Observerと呼ばれるJavaScript APIを使用して、画像が表示ビューポート内にあるか、または近づいているかを判断します。」検出されると、srcが切り替わります。data-src属性でこれを見分けることができます。広くサポートされていますが、「JavaScriptを使用する」ため、遅延読み込みが始まる前にダウンロードが必要になり、ネイティブなアプローチよりも遅くなります。

<img data-src="image.png"
     src="small-placeholder.png"
     width="123"
     height="123"
     alt="遅延読み込みされた画像"
>

「遅延読み込みされたLargest Contentful Paint画像」はページ速度にどう影響しますか？

「Largest Contentful Paint要素は、ページロード中に表示ビューポート内の画面上に描画された最大の要素です。」これは、ページが視覚的に準備完了したと認識されるタイミングを示します。この要素を遅延読み込みすると、その認識が遅れ、訪問者に読み込みが遅いと感じさせてしまいます。

最も重要な画像は、最速の描画のために即座に読み込まれるべきです。しかし、明示的な遅延読み込みは優先度を下げ、他のリソースを先にキューに入れます。JavaScriptによる遅延読み込みの場合、スクリプトの実行を待つというさらなる遅延が加わります。

画像にloading="lazy"を追加すると、ブラウザのpreload scannerはそれを完全にスキップします。通常、preload scannerはHTMLの解析中に画像を発見し、早期にフェッチを開始します。遅延読み込みはこの早期発見をオプトアウトするため、まさにこれがLCPリソース読み込み遅延（resource load delay）を増加させる理由です。

1つの遅延読み込みされるLCP画像と6つの即時読み込みされる画像があるChromeのネットワークタブの例では、遅延読み込み画像は最後にダウンロードを開始して終了し、現実世界での影響を明確に示しています。

もう少し詳しく

ブラウザは遅延読み込みの指示を自動的に上書きすることはできません。LCP遅延の技術的な理由には以下が含まれます：

• 「遅延読み込み画像は、遅延読み込みされない（即時読み込みの）画像よりもはるかに遅れてダウンロードキューに入ります。」
• 遅延読み込み画像は通常、低い優先度でダウンロードされます。
• 「通常の画像、遅延スクリプト、フォントなどの他の要素は、遅延読み込み画像よりも早くダウンロードスケジュールに入れられる可能性があります。」
• JavaScriptによる遅延読み込みは、スクリプトのダウンロードと実行のオーバーヘッドに依存します。

「Largest Contentful Paint image was lazily loaded」の修正方法

「警告の修正は簡単です。この画像を遅延読み込みさせないでください。」

理論上は

• ネイティブの遅延読み込みの場合、loading="lazy"を削除するか、loading="eager"に変更します。
• JavaScriptによる遅延読み込みの場合、ネイティブなアプローチに切り替えるか、LCP画像を除外します。
• Next.jsのnext/imageの場合、priorityを設定してpreloadヒント付きで画像を即座に読み込みます。

LCP要素がヒーロー画像の場合は、preload、fetchpriority、レスポンシブ画像などの追加の最適化技術について、遅いヒーロー画像を修正する方法の完全なガイドを参照してください。

現実では

最適化プラグインは多くの場合、重要度を区別せずにすべての画像を自動的に遅延読み込みさせます。ほとんどのプラグインは、ファイル名、クラス、または属性を介して遅延読み込みをバイパスすることを許可しています。プラグインのドキュメントを確認し、それに応じてテンプレートを更新してください。

WordPress 6.3以降では、最初のいくつかの画像は遅延読み込みされなくなり、LCP画像になりそうなものには自動的にfetchpriority="high"が追加されます。WordPressサイトで依然としてこの警告が表示される場合は、サードパーティの最適化プラグインがこの動作を上書きしている可能性が高いです。2022 Web Almanacのパフォーマンスの章によると、遅延読み込みされたLCP画像を持つページの72%はWordPressサイトです。

「Largest Contentful Paint image was lazily loaded」の回避策

CMSの制限により遅延読み込み設定を変更できない場合、回避策によって影響を最小限に抑えます：

• すべての画像を遅延読み込みさせることで、スクロールせずに見える範囲より下にある即時読み込み画像が先にダウンロードされないようにする
• 背景画像を避けることで、ダウンロードの競合を防ぐ
• LCP要素をpreloadすることで、早期のダウンロードをスケジュールする
• JavaScriptによる遅延読み込みを無効化する代わりに、ネイティブな方法を使用する
• fetchpriority="high"を追加することで、LCP要素を早期にスケジュールする。ブラウザがリソースを優先順位付けする方法の詳細については、リソースの優先順位付けに関するガイドを参照してください。
• すべての画像を最適化することで、レスポンシブな手法や次世代フォーマットを使用してダウンロード時間を短縮する。

LCP画像から遅延読み込みを削除した後、Real User Monitoringで改善を検証してください。Lighthouseの警告はラボベースですが、Googleはランキングシグナルとして実際のユーザーのフィールドデータを使用します。CoreDashで追跡されているサイト全体において、遅延読み込みされたLCP画像がないページのLCPの「良好」スコアは79%ですが、LCP要素を遅延読み込みしているページのスコアは52%です。