Core/Dash ディメンション: LCP Priority

最大コンテンツ要素の特定の読み込み戦略を監査し、LCPのLoad Delayを修正します。

無料トライアル

Trusted by market leaders · Client results

ディメンション: リソース: LCP Priority

LCP Priorityディメンションは、ブラウザがLCPリソースをどのように発見し、優先順位を付けたかに基づいてパフォーマンスデータをセグメント化します。「要素タイプ (Element Type)」ディメンションが要素の種類（テキストか画像か）を示すのに対し、このディメンションはブラウザが読み込みを遅らせた理由を示します。

これはLoad Delayの主要な監査ツールです。LCPアセットが帯域幅を競合しているのか、それとも不適切なHTML属性によって人為的に遅延させられているのかを明らかにします。

coredash metric table urls

優先度の階層

ブラウザはすべてのリソースにダウンロード優先度を割り当てます。このディメンションは、LCP要素を5つの特定の読み込み状態のいずれかにマッピングし、最も破壊的な状態（遅延読み込み/Lazy Loaded）から最も最適な状態（テキスト/高優先度/High Priority）までランク付けします。

背景: ユーザーが「戻る」または「再読み込み」ボタンでページに戻ったとき、ほとんどのブラウザはユーザーを以前の垂直位置に戻します。この位置がファーストビューより下にある場合、最適化されたヒーロー画像はもはやLCPではありません。代わりに、ブラウザは現在のビューポート内の最大要素を測定します。これにより、データセット内に避けられない一連の「Not Preloaded（プリロードなし）」イベントが生成されます。そして、これは全く問題ありません！

1. Lazy Loaded

LCP要素の10%以上がこのバケットに表示される場合、問題が特定されています。遅延読み込み（Lazy loading）画像は、（高速なプリロードスキャナではなく、低速なDOMパーサーによって）はるかに遅くキューに入れられます。loading="lazy"属性は、レイアウトが計算され要素がビューポートに近づくまで、ダウンロードを待機するようブラウザに指示します。

修正方法: この読み込み属性は削除する必要があります。LCP要素を遅延読み込みしてはいけません。

<!-- INCORRECT -->
<img src="hero.jpg" loading="lazy" alt="Hero Image" />

<!-- CORRECT -->
<img src="hero.jpg" fetchpriority="high" alt="Hero Image" />

2. Not Preloaded

これはブラウザのデフォルトの動作を表します。ブラウザは初期解析中にHTML内で画像を発見しましたが、他の画像よりも優先して処理するためのシグナルが与えられていませんでした。

ページ速度への影響は、Webページの複雑さに依存します。LCP画像はリソース競合キューに入ります。ページに多くのスクリプト、フォント、他の非遅延画像、またはダウンロードすべきスタイルがある場合、ブラウザはこの画像のダウンロードを遅らせる可能性があり、Load Delayが増加します。

3. Preloaded

これは、ドキュメントのhead内にある<link rel="preload">タグを通じてリソースが発見されたことを示しています。このプリロードリンクは、画像への参照がDOMの奥深くに埋もれていたり、CSSファイルに隠されていたり（背景画像）しても、基本的には早期発見を意味します。

プリロードは早期ダウンロードを強制する最も効果的な方法ですが、プリロードには画像URLと完全に一致する個別のlinkタグを維持する必要があります。これらがずれると、アセットを二重にダウンロードすることになります。

4. High fetchpriority

これは現代のエンジニアリング標準です。ブラウザはfetchpriority="high"属性を通じて、この特定の画像をクリティカルなリソースとして扱うよう指示されました。

戦略: これは画像ベースのLCPの目標状態です。要素に対して直接重要性をシグナルとして送り、手動のプリロードタグのようなメンテナンスのオーバーヘッドなしで、ダウンロードキュー内の他のアセットよりも優先度を引き上げます。

5. Not an Image

ステータス: テキストノード / SVG

LCP要素がテキストのブロック (h1, p) または生のSVGです。テキストはLoad Delayがゼロになるため（すでにHTMLドキュメントに存在するため）、これは理想的なアーキテクチャの状態です。

最適化: LCPがこのカテゴリーに属しているにもかかわらず遅い場合、ボトルネックは排他的にRender Delayにあります。ダウンロードする画像ファイルがないため、Critical Rendering Path（CSS/JavaScriptのブロッキング）またはフォントの読み込み戦略（font-display: swap）を最適化する必要があります。

ワークフロー: Load Delayの最適化

このディメンションを使用して、フロントエンドのリソース戦略を検証します。

遅延読み込みの排除: Lazy Loadedでフィルタリングします。この値が0%より大きい場合は、ヒーロー画像にloading="lazy"を追加しているコンポーネントを見つけて削除します。これは、すべてのメディアに遅延読み込みをグローバルに適用するCMSテンプレートでよく見られます。
Fetchpriorityへの移行: Not PreloadedおよびPreloadedからHigh fetchpriorityにトラフィックを移行させます。<link rel="preload">をfetchpriority="high"に置き換えることで、<head>がクリーンアップされ、優先度ロジックがコンポーネントに直接結合されます。
背景画像の監査: Not Preloadedのボリュームが多く、LCPが背景画像である場合、ブラウザの発見が遅すぎます（CSSが解析された後にのみ発見されます）。これをfetchpriority="high"を持つHTMLの<img>タグにリファクタリングするか、Preloadヘッダーを強制する必要があります。