パフォーマンスバジェットとは？
パフォーマンスバジェットとは何か、なぜUXとSEOに重要か、Webページに意味のある制限をどう設定するかを学びます。総ページウェイト、リクエスト数、タイミング指標をカバー。
Fundamentals
詳細な説明
パフォーマンスバジェットを理解する
パフォーマンスバジェットとは、Webページリソース（総ページウェイト、HTTPリクエスト数、インタラクティブになるまでの時間、その他の指標）に対する事前定義された制限のセットで、チームが超えないことに合意するものです。デザイナー、開発者、ステークホルダー間の、サイトを高速に保つための契約として機能します。
パフォーマンスバジェットが重要な理由
ページに追加するすべてのキロバイトには実際のコストがあります：
- ユーザー体験 — 遅いページはユーザーをイライラさせます。調査では、モバイルで3秒以上かかるページは約50%の訪問者を失うことが一貫して示されています。
- コンバージョン率 — ECサイトの調査では、読み込み時間が1秒改善するとコンバージョンが7%以上増加することがわかっています。
- SEOランキング — GoogleはCore Web Vitals（LCP、FID、CLS）をランキングシグナルとして使用しています。パフォーマンスバジェットの超過は、Core Web Vitalsスコアの低下と相関することが多いです。
- 公平性とアクセス — 全員が高速接続を持っているわけではありません。バジェットにより、3Gネットワークや低スペックデバイスのユーザーにもサイトが機能することが保証されます。
パフォーマンスバジェットの種類
3つの一般的なアプローチがあります：
- 数量ベースのバジェット — 総ページウェイト（例：最大500 KB）、リクエスト数（例：最大30）、または個別アセットサイズ（例：JS 200 KB以下）の制限。
- タイミングベースのバジェット — Time to Interactive（TTI < 5秒）、First Contentful Paint（FCP < 1.5秒）、Largest Contentful Paint（LCP < 2.5秒）などの指標の制限。
- ルールベースのバジェット — Lighthouseスコア（例：パフォーマンススコア >= 90）や特定のチェック（レンダーブロッキングリソースなし、すべての画像を遅延読み込み）。
最初のバジェットの設定
競合分析から始めましょう：同じ分野の上位3社の読み込み時間とページウェイトを測定します。バジェットは最速の競合より少なくとも20%高速にすることを目指すべきです。
または、逆算方法を使用します：
総バジェット（KB）= 接続速度（Mbps）× 読み込み時間（秒）× 125
3Gユーザー（1.6 Mbps）で3秒の目標の場合：1.6 × 3 × 125 = 合計600 KB。
バジェット配分
総ウェイトバジェットが決まったら、アセットカテゴリに配分します：
| カテゴリ | 一般的な割合 |
|---|---|
| HTML | 5-10% |
| CSS | 5-15% |
| JavaScript | 30-45% |
| 画像 | 25-40% |
| フォント | 5-15% |
| その他 | 5-10% |
これらの割合はサイトタイプによって異なります。ブログは画像に多く配分し、SPAはJavaScriptに多く配分します。
ユースケース
パフォーマンスバジェットの設定は、Webパフォーマンス最適化プロジェクトの最初のステップです。プロダクトマネージャーはバジェットを使用してエンジニアリングチームとの明確な期待値を設定します。開発者はコードレビュー中にバジェットを参照して、新機能や依存関係の追加コストを評価します。パフォーマンスバジェットは、ページウェイトが明示的な制約なしに大幅に増加する傾向があるリデザインやプラットフォーム移行時に特に重要です。