Trusted by market leaders · Client results
ディメンション：リソース：要素タイプ LCP (lcpet)
要素タイプ（LCP）ディメンション（lcpet）は、LCPのノードをtext、image、background-image、またはvideoの4つのアーキテクチャクラスのいずれかに分類します。
アトリビューション要素ディメンションが正確なDOMノードを特定するのに対し、要素タイプディメンションはハイレベルなエンジニアリング戦略を決定します。LCPは、TTFB、ロード遅延、ロード時間、レンダリング遅延の4つの時間間隔の合計です。要素タイプは、これらの時間間隔のどれがスコアを悪化させているかを示し、推測に頼ることなく正しい最適化プロトコルを選択できるようにします。
LCPの要素タイプ別のCore Web Vitals最適化
LCPの要素タイプに依存しないTTFBを改善した後は、LCPの要素タイプに応じた異なるアプローチでLCPを最適化します。
1. テキスト
CoreDashが要素タイプとしてテキストを報告する場合、静的ネットワークリソースの帯域幅がボトルネックになることはほとんどありません。テキストはHTMLドキュメントに直接存在するため、最初のサーバーレスポンス（TTFB）の直後にコンテンツを利用できます。ここでLCPが遅い場合、問題はほぼ例外なくレンダリング遅延です。
これを改善するには、クリティカルレンダリングパスに完全に集中してください。ブラウザは、<head>内の重いCSS計算や同期JavaScriptによって、テキストの描画をブロックされている可能性が高いです。また、フォントの読み込み戦略を確認してください。font-display: swapやoptionalを使用していない場合、ブラウザはフォントファイルのダウンロードを待つ間、テキストを人為的に非表示にします（FOIT）。
2. 画像 (<img>)
このタイプは、検出、ダウンロード、デコードというリソースパイプラインの全工程をトリガーします。テキストとは異なり、画像のLCPはロード遅延とロード時間に大きく依存します。ここでは物理的な制約やネットワークレイテンシとの戦いになるため、アセットを軽量化し、より早く検出できるようにすることが目標です。
ここでの最適化には、厳格なアセット管理が必要です。ロード遅延を最小限に抑えるため、初期HTMLソース（サーバーサイドレンダリング）に<img>タグが存在することを確認してください。ブラウザのリクエストを遅らせる原因となるため、fetchpriority="high"を追加し、loading="lazy"属性は確実に削除します。最後に、次世代フォーマット（AVIF/WebP）の提供や、srcsetの使用によってモバイルデバイスがデスクトップ用のファイルをダウンロードするのを防ぎ、ロード時間を改善します。
3. 背景画像
この分類は、アーキテクチャの非効率性を示しています。画像がCSSで定義されているため（例：background-image: url(...)）、スタイルシートが完全にダウンロードされて解析されるまで、ブラウザはURLを検出できません。これにより、プレロードスキャナーがアセットを事実上認識できなくなり、深刻なロード遅延が発生します。
唯一の確実な対策はリファクタリングです。ビジュアルアセットをCSSから標準的なHTMLの<img>タグに移行し、ブラウザが即座にURLを検出できるようにします。マークアップをリファクタリングできない場合は、ドキュメントのhead内で<link rel="preload">を使用して強制的に早期検出させますが、これはネイティブ画像要素を使用する場合と比べてメンテナンスの負担になることがよくあります。
4. ビデオ
LCP要素がビデオの場合、ブラウザはポスター画像または最初のフレーム（自動再生時）の描画時間を測定します。これは画像（Image）タイプと同様の挙動を示しますが、ビデオアセットのファイルサイズが大きいため、より重くなる傾向があります。
これは完全に画像最適化タスクとして扱ってください。最初の1ピクセルを描画するためにビデオセグメントのダウンロードが発生しないよう、HTMLに軽量なposter属性を設定します。ポスター画像は、通常のLCP画像と同様に徹底的に圧縮してください。
ワークフロー：LCP要素タイプに基づくLCP問題の特定
LCP要素タイプは固定されたものではなく、すべての訪問者で同一でもありません。ユーザーのデバイスによって頻繁に変化し、レスポンシブデザインの根本的な欠陥を浮き彫りにします。
CoreDashのDevice Form Factorフィルターを使用して、モバイルとデスクトップの間で要素タイプを比較します。デスクトップユーザーのLCPが画像（例：ヒーローバナー）であるのに対し、モバイルユーザーはテキストLCPになっているケースがよくあります。これは、モバイルのCSSレイアウトによってヒーローバナーがファーストビュー外（フォールド以下）に押し下げられているか、あるいはテキストの段落が「最大」要素になるほど極端に画像が縮小されていることを示しています。
このシナリオで、モバイルのLCP改善のためにヒーロー画像を最適化しているなら、その努力は無駄になります。ブラウザは画像自体をカウントすらしていません。レイアウトを調整して画像をメイン of 表示領域に戻すか、フォーカスを切り替えてモバイルユーザー向けのテキストレンダリング（フォント/CSS）を最適化してください。
