ヒーロー画像パフォーマンスバジェット
最も一般的なLCP要素であるヒーロー画像の具体的なパフォーマンスバジェットを設定。ファーストビューヒーロー画像のフォーマット選択、レスポンシブサイジング、プリロード、圧縮目標をカバー。
Asset Budgets
詳細な説明
ヒーロー画像パフォーマンスバジェット
ヒーロー画像はほとんどのページで最大のファーストビュー視覚要素であり、Webページの70%以上でLCP要素です。
ヒーロー画像バジェット目標
| 接続 | 最大サイズ | 最大寸法 |
|---|---|---|
| 低速3G | 50 KB | 800px幅 |
| Fast 3G | 80 KB | 1200px幅 |
| 4G | 100 KB | 1600px幅 |
| デスクトップ | 120 KB | 2000px幅 |
ヒーロー画像のフォーマット比較
典型的な1200x600pxヒーロー画像（品質80）の場合：
| フォーマット | サイズ | JPEG比の節約 |
|---|---|---|
| JPEG | 120 KB | ベースライン |
| WebP | 75 KB | 38%小さい |
| AVIF | 50 KB | 58%小さい |
重要：ヒーローを遅延読み込みしない
ヒーロー画像はLCP要素です。loading="lazy"を追加するとIntersection Observerのしきい値分LCPが遅延します。代わりにfetchpriority="high"とプリロードを使用してください。
ユースケース
ヒーロー画像バジェットは、ランディングページ、ニュース記事、Eコマース商品ページなど、主要なビジュアルが大きな画像であるページに重要です。1つの最適化されていないヒーロー画像がページバジェット全体を消費する可能性があります。具体的なヒーロー画像バジェットを設定し個別に追跡することで、チームは最もインパクトのある画像が常に最適化されていることを保証します。