HTTPリクエスト数バジェット
Webページのhttpリクエスト数バジェットを設定・追跡。HTTP/1.1 vs HTTP/2でのリクエスト数がパフォーマンスに与える影響、ウォーターフォール効果、バンドリングとスプライトによるリクエスト削減戦略。
Network Budgets
詳細な説明
HTTPリクエスト数バジェット
HTTP/2マルチプレキシングはHTTP/1.1と比較してリクエストあたりのオーバーヘッドを削減しましたが、リクエスト数は依然として重要です。各リクエストはDNS、TCP、TLSのオーバーヘッドを追加し、低速接続では多すぎる同時リクエストが帯域幅を飽和させます。
リクエスト数推奨
| サイトタイプ | 最大リクエスト数 |
|---|---|
| ブログ/コンテンツ | 20-30 |
| ランディングページ | 15-25 |
| Eコマース | 30-50 |
| SPA（初期） | 25-40 |
| ダッシュボード | 30-60 |
リクエスト削減戦略
- バンドリング — 複数のJS/CSSファイルを結合（コード分割の利点は維持）
- 画像スプライト — 小さなアイコンを1つのスプライトシートに結合
- クリティカルリソースのインライン化 — クリティカルCSSと小さなSVGアイコンをインライン化
- データURI — 小さな画像（< 2 KB）をCSS内でbase64として埋め込み
- プリコネクト — 既知のオリジンに対して接続オーバーヘッドを排除
ユースケース
リクエスト数バジェットは、多くのサードパーティ統合を持つサイトに特に重要です。各アナリティクススクリプト、広告ネットワーク、ソーシャルウィジェットは独自のサブリクエストのカスケードをもたらします。1つのチャットウィジェットが独自のスクリプト、スタイル、API呼び出しのために10以上の追加リクエストをトリガーする可能性があります。