大きすぎる画像
画像が読み込まれると、ダウンロードされたファイルの固有サイズがページ上の画像の実際のサイズに対してチェックされます。実際のサイズは、レンダリングされたサイズにCSSが適用された画像のサイズをデバイスピクセル比に掛け合わせた値で計算されます。ダウンロードされた画像が実際のサイズよりも大幅に大きい場合（いずれかの次元に1200px以上大きい場合）、この警告が発生します。大きすぎる画像をダウンロードすると、ページの読み込みが遅くなり、Core Web Vitalsに悪影響を及ぼす可能性があります。
遅延読み込みされたLCP要素
ページの読み込み中の最大のコンテンツ要素は「LCP要素」と見なされ、これはLargest Contentful Paint、つまりCore Web Vitalsの1つに関連しています。LCP要素を遅延読み込みすると、ページのパフォーマンスに大きく悪影響を及ぼします。この戦略では、ブラウザはレイアウト計算を完了して、要素がビューポート内にあるかどうかを判断してから画像のダウンロードを開始する必要があります。その結果、AngularはLCP要素にloading="lazy"属性が与えられたことを検出すると、警告が発生します。
@debugging
コンソール警告に表示されている画像URLを使用して、問題の<img>要素を見つけます。
大きすぎる画像を修正する方法
- より小さいソース画像を使用する
- レイアウトが異なる場合に複数のサイズが必要な場合は、
srcsetを追加します。 - 自動的にsrcsetを生成するAngularの組み込み画像ディレクティブ(
NgOptimizedImage)を使用するように切り替えます。
遅延読み込みされたLCP要素を修正する方法
loading属性を"eager"などの別の値に変更します。- 自動的にsrcsetを生成するAngularの組み込み画像ディレクティブ(
NgOptimizedImage)を使用するように切り替えます。
画像パフォーマンス警告を無効にする方法
両方の警告は、アプリケーションのルートでプロバイダーを使用して、個別にまたはサイト全体で無効にできます。