CSSバジェットとクリティカルCSS戦略
クリティカルCSS抽出、未使用CSS削除、コンポーネントスコープスタイルでCSSパフォーマンスバジェットを計画。リッチなデザインシステムを維持しながらCSSを60 KB以下に抑える方法を解説。
Category Budget
詳細な説明
CSSバジェットとクリティカルCSS
CSSはデフォルトでレンダーブロッキングです — ブラウザは<head>内のすべてのCSSをダウンロードしてパースするまで何も描画できません。これによりCSSサイズはFirst Contentful Paint（FCP）とLargest Contentful Paint（LCP）に直接影響します。
CSSバジェットガイドライン
| サイトの複雑さ | CSSバジェット | アプローチ |
|---|---|---|
| シンプル（ブログ） | 15-30 KB | 単一スタイルシート、ユーティリティクラス |
| 中程度（EC） | 30-60 KB | クリティカルCSS + 遅延メインシート |
| 複雑（SPA） | 60-100 KB | CSS-in-JSまたはCSS Modules、コード分割 |
クリティカルCSS
クリティカルCSSはファーストビューコンテンツのレンダリングに必要な最小限のCSSです：
<head>にインライン化 — 追加のHTTPリクエストなし- 小さく — 通常10-15 KB非圧縮（3-5 KB gzip）
- 自動抽出 —
critical、critters、またはNext.jsの自動クリティカルCSSなどのツール
未使用CSSの削除
BootstrapやTailwind CSSなどの大規模CSSフレームワークは、単一ページが必要とするよりもはるかに多くのCSSを出荷します。
- Tailwind CSS — PurgeCSS（組み込み）が未使用ユーティリティを削除、出力を5-15 KBに削減
- Bootstrap — sassインポートで必要なモジュールのみ含める
- CSS Modules — コンポーネントごとにスコープ、バンドラーによるツリーシェイキング
ユースケース
CSSバジェット管理は、First Contentful PaintがユーザーエンゲージメントとSEOに重要なサイトに不可欠です。マーケティングサイトは5 KBのクリティカルCSSをインライン化し40 KBのメインスタイルシートを遅延することで、1秒未満のFCPを達成するかもしれません。コンポーネントライブラリチームはコンポーネントごとのCSSバジェット（例：コンポーネントあたり最大2 KB）を設定してデザインシステムの肥大化を防止できます。