Webフォント読み込みパフォーマンスバジェット
合計フォント重量、フォントファイル数、読み込み戦略を含むWebフォントのパフォーマンスバジェットを設定。最適化技法によるCLS、FCP、LCPへのフォントサイズ影響を追跡。
Asset Budgets
詳細な説明
Webフォントパフォーマンスバジェット
Webフォントはビジュアルデザインを強化しますが、大きなパフォーマンスコストを伴います。多くのブラウザではフォントはデフォルトでレンダーブロッキングです。
フォントバジェット推奨
| シナリオ | フォントバジェット | 最大ファイル数 |
|---|---|---|
| 最小（1フォント） | 20-30 KB | 2 |
| 標準（2フォント） | 40-60 KB | 4 |
| リッチタイポグラフィ | 60-100 KB | 6 |
サブセットによるバジェット適合
完全な文字セットには数千のグリフが含まれます。サブセットは使用する文字のみを保持します：
- ラテンのみ — 200 KBのフォントを約20 KBに削減
- ラテン + 拡張 — 約30 KB
- ラテン + キリル — 約40 KB
可変フォント
1つの可変フォントファイルで複数のウェイト/スタイルファイルを置き換え可能：
- 4つの個別ファイル：4 x 25 KB = 100 KB
- 1つの可変フォント：45-60 KB
3つ以上のウェイトやスタイルが必要な場合、可変フォントはほぼ常にバジェット効率が高くなります。
ユースケース
フォントバジェット追跡は、デザイナーが複数のフォントファミリーとウェイトを指定し、合計で500+ KBになるという一般的なパフォーマンスの落とし穴を防ぎます。トラッカーでフォントバジェットを設定し各フォントファイルをエントリとして追加することで、チームは累積的な影響を確認し、タイポグラフィの品質と読み込み速度のトレードオフを情報に基づいて行えます。