画像サイズバジェットと最適化追跡
異なるページタイプの画像パフォーマンスバジェットを設定。フォーマット（WebP、AVIF、JPEG）と解像度ごとの画像サイズを追跡し、レスポンシブ画像、遅延読み込み、CDN最適化の戦略。
Asset Budgets
詳細な説明
画像パフォーマンスバジェット
画像は通常、合計ページ重量の40-60%を占めます。画像バジェットの設定と追跡は、利用可能な最もインパクトの大きいパフォーマンス最適化の一つです。
ページタイプ別画像バジェット
| ページタイプ | 画像バジェット | 画像あたり最大 |
|---|---|---|
| ブログ記事 | 200 KB | 80 KB |
| 商品ページ | 300 KB | 100 KB |
| ランディングページ | 250 KB | 120 KB |
| ポートフォリオ | 400 KB | 150 KB |
| トップページ | 200 KB | 100 KB |
バジェットへのフォーマットの影響
モダンフォーマットは画像重量を劇的に削減します：
| フォーマット | 品質80 | 圧縮率 |
|---|---|---|
| JPEG | 100 KB | ベースライン |
| WebP | 60-70 KB | 30-40%減 |
| AVIF | 40-50 KB | 50-60%減 |
WebPフォールバック付きのAVIFを使用すると、視覚品質を維持しながら画像バジェットを半分に削減できます。
バジェットトラッカーでの画像追跡
各重要な画像をリソースエントリとして追加：
- ヒーロー画像 — ファーストビューのLCP候補画像
- 商品画像 — Eコマースページの複数の商品ショット
- サムネイル — ギャラリーやグリッドのサムネイル
- アイコンとロゴ — SVG推奨（「other」タイプとして追加）
- 背景画像 — スタイルシート経由で読み込まれるCSS背景
最適化戦略
- レスポンシブ画像 —
srcsetとsizes属性で異なるサイズを配信 - 遅延読み込み — ファーストビュー以下の画像に
loading="lazy"を追加 - アスペクト比のヒント —
widthとheight属性でCLSを防止 - CDN最適化 — 画像CDN（Cloudinary、imgix）で自動フォーマットネゴシエーション
- プレースホルダー戦略 — 知覚パフォーマンス向上にBlurHashまたはLQIPを使用
LCPとの接続
Largest Contentful Paint（LCP）要素はしばしばヒーロー画像です。LCP画像を100 KB（圧縮済み）以下に保ち、<link rel="preload">でプリロードすることは、2.5秒のLCPしきい値を満たす最も効果的な方法の一つです。
ユースケース
画像バジェット追跡は、Eコマース、メディア、ポートフォリオサイトなどコンテンツの多いサイトに不可欠です。2 MBの最適化されていない画像を読み込む商品ページは、モバイルでCore Web Vitalsに失敗します。各画像をバジェットに対して追跡することで、本番環境に到達する前にオーバーサイズの画像をキャッチできます。