CSSサイズバジェットとクリティカルCSS戦略
クリティカルCSS抽出、未使用CSS削除、メディアクエリ分割を含むCSSパフォーマンスバジェットを定義。レンダーブロッキングスタイルシートの削減戦略でCSSサイズをバジェットに対して追跡。
Asset Budgets
詳細な説明
CSSパフォーマンスバジェット
CSSはデフォルトでレンダーブロッキングです — ブラウザはドキュメントheadのすべてのCSSをダウンロードしてパースするまで何も描画できません。これにより、CSSバジェット管理はFirst Contentful Paint（FCP）とLCPに直接関連します。
CSS バジェット推奨
| サイトタイプ | CSSバジェット | クリティカルCSS |
|---|---|---|
| ブログ/コンテンツ | 30-50 KB | < 14 KB |
| ランディングページ | 40-60 KB | < 14 KB |
| Eコマース | 60-100 KB | < 14 KB |
| SPA | 50-80 KB | < 14 KB |
| ダッシュボード | 80-150 KB | < 14 KB |
14 KBのクリティカルCSS制限は、TCP初期輻輳ウィンドウに由来します — 最初のラウンドトリップで約14 KBのデータを配信できます。
最適化戦略
- クリティカルCSS — ファーストビューのCSSを
<style>タグにインライン化（< 14 KB） - 非同期読み込み — 非クリティカルCSSを
media="print"+onloadで読み込み - 未使用CSS削除 — PurgeCSSなどで未使用ルールを除去
- CSS-in-JSバジェット管理 — styled-components、Emotionで生成されるランタイムCSSを追跡
- ユーティリティフレームワーク最適化 — パージ設定済みのTailwind CSS
メディアクエリ分割
メディアクエリでCSSを分割して条件付き読み込み：
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="desktop.css" media="(min-width: 768px)">
<link rel="stylesheet" href="print.css" media="print">
モバイルではbase.cssのみがレンダリングをブロックします。
ユースケース
CSSバジェット追跡は、CSSフレームワークやデザインシステムを使用するサイトに特に重要です。適切なパージなしのTailwind CSSプロジェクトは3+ MBのCSSを出荷する可能性があります。リソース追加時にCSSサイズを追跡することで、チームは肥大化を早期にキャッチしFCPの高速化を維持します。