LCP重視パフォーマンスバジェット戦略
Largest Contentful Paint（LCP）最適化に特化したパフォーマンスバジェットを構築。リソース優先順位付け、プリロード、サーバータイミング、LCPの4フェーズと各フェーズのバジェット配分をカバー。
Timing Metrics
詳細な説明
LCP重視パフォーマンスバジェット
Largest Contentful Paint（LCP）は、SEOとユーザーエクスペリエンスにとって最も重要なCore Web Vitalであることが多いです。
LCPの4フェーズ
LCPは4つの連続したフェーズに分解でき、各フェーズに独自のバジェットがあります：
| フェーズ | 目標 | バジェット配分 |
|---|---|---|
| 1. Time to First Byte | < 800ms | サーバー + ネットワーク |
| 2. リソース読み込み遅延 | < 100ms | ディスカバリー時間 |
| 3. リソース読み込み時間 | < 800ms | ダウンロード時間 |
| 4. 要素レンダリング遅延 | < 100ms | レンダリング時間 |
| 合計LCP | < 2500ms |
フェーズ2：リソース読み込み遅延
LCPリソースは即座に発見される必要があります：
- LCP画像をプリロード：
<link rel="preload">でディスカバリー遅延を排除 - LCP要素の前にレンダーブロッキングリソースなし
- LCP画像を遅延読み込みしない — 即座に読み込むべき
デバイス別LCPバジェット
| デバイス | LCP目標 | ファーストビュー合計 |
|---|---|---|
| モバイル3G | < 2500ms | < 150 KB |
| モバイル4G | < 2000ms | < 200 KB |
| デスクトップ | < 1500ms | < 300 KB |
ユースケース
LCP重視バジェットは、LCP要素が大きなヒーロー画像やビデオサムネイルであるサイトに重要です。Eコマース商品ページ、ニュース記事ページ、ランディングページはすべて、LCPリソースとその依存関係を明示的にバジェット設定することで恩恵を受けます。