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

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

無料トライアル

Trusted by market leaders

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

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

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

coredash metric table urls

優先順位の階層

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

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

1. Lazy Loaded

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

修正方法： このloading属性を削除する必要があります。LCP要素は決して遅延読み込み（lazy-loaded）させてはいけません。

<!-- 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

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

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

4. High fetchpriority

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

戦略： これは画像ベースのLCPにとっての目標状態です。要素上で直接重要性を示し、手動のプリロードタグという保守のオーバーヘッドなしに、ダウンロードキュー内で他のアセットよりも優先順位を高めます。

5. Not an Image

ステータス： Text Node / SVG

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

最適化： LCPがこのカテゴリにあるにもかかわらず遅い場合、ボトルネックは Render Delay に限定されます。ダウンロードする画像ファイルがないため、クリティカルレンダリングパス（CSS/JSブロッキング）またはフォント読み込み戦略（font-display: swap）を最適化する必要があります。

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

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

Lazy Loadingを排除する： 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 ヘッダーを強制する必要があります。

エンジニアリングの経験則

このディメンションに対する分布の目標は厳格です：

<10% Lazy Loaded
> 90% High fetchpriority（画像LCPの場合）
100% Not an image（テキストLCPの場合）

「Not Preloaded」に分類されるトラフィックは、リソースの優先順位制御をブラウザのデフォルトのヒューリスティックに委ねている、最適化されていない状態を表します。