クリティカルレンダリングパスパフォーマンスバジェット
高速な初回描画のためにクリティカルレンダリングパスをバジェット管理。レンダーブロッキングCSS、同期JavaScript、フォント読み込み、ファーストビューリソース優先順位の各パイプラインステージにバジェットを設定。
Advanced
詳細な説明
クリティカルレンダリングパスバジェット
クリティカルレンダリングパス（CRP）は、ブラウザがHTML、CSS、JavaScriptを画面上のピクセルに変換するために行うステップのシーケンスです。
CRPバジェットテンプレート
| リソース | バジェット |
|---|---|
| HTML（ファーストビュー） | < 14 KB |
| クリティカルCSS（インライン） | < 14 KB |
| head内同期JS | 0 KB |
| プリロードフォント | < 30 KB |
| レンダーブロッキング合計 | < 28 KB |
14 KB制限はTCPスロースタートに由来します — 初期輻輳ウィンドウでは最初のラウンドトリップで約14 KBを許可します。
14 KBが重要な理由
最初のTCP接続で、サーバーは約10のTCPセグメント（14,600バイト）を送信できます。クリティカルリソースがこのウィンドウに収まれば、最初のレンダリングは1回のラウンドトリップで発生できます。
最適化戦略
クリティカルCSSのインライン化：
- CriticalやCrittersなどのツールでファーストビューCSSを抽出
<head>内の<style>タグにインライン化- フルスタイルシートは非同期に読み込み
レンダーブロッキングJSの排除：
- すべてのスクリプトを
<body>の最下部に移動 - DOM アクセスが必要なスクリプトには
deferを使用 - 独立したスクリプトには
asyncを使用
ユースケース
CRPバジェットは1秒未満のFCPが必要なサイトに不可欠です。ニュースサイト、コンテンツアグリゲーター、知覚速度で競合するサイトは、レンダーブロッキングリソースを明示的にバジェット管理することで恩恵を受けます。クリティカルリソースを14 KB以下に保つことで、最初の描画が1回のネットワークラウンドトリップで発生し、ほぼ瞬時の知覚読み込みを実現します。