CSSカバレッジと未使用スタイル

大きなCSSファイルには、現在のページに存在しないコンポーネント用のスタイルが含まれていることがよくあります。未使用のバイトが増えるたびに、解析時間、CSSOM構築時間、転送サイズが増加します。一般的な本番アプリでは、ページごとにCSSの90%以上が未使用である場合もあります。

DevTools → Coverageパネルを開きます（Cmd+Shift+P → Coverage）。記録を開始してページを操作し、その後停止します。パネルには各CSSファイルの使用率が表示され、未使用のルールが赤色で強調表示されます。分析用にカバレッジデータをJSONとしてエクスポートできます。

PurgeCSSはHTML、JS、テンプレートファイルをスキャンしてクラス名を検出し、未使用のCSSルールを削除します。クラス名を参照する可能性のあるすべてのファイルに一致するよう、content globを設定してください。JSによって動的に追加されるクラスは、誤って削除されないようsafelistに登録します。

TailwindのJITコンパイラーは、テンプレートで実際に使用されているユーティリティクラスだけを生成します。未使用のユーティリティは生成されないため、生成後のCSSは非常に小さく、アプリケーション全体でも5〜15KB程度になることがよくあります。これは理想的なパージの結果です。

webpackまたはViteの設定で、すべてのテンプレートファイルを対象とするcontent globを指定してPurgeCSSを追加します。safelistオプションでは、Headless UIのようなライブラリによる複雑な動的クラスパターンに対応するため、文字列、正規表現、deep-safelistを使用できます。

CSS Modulesはファイルごとに一意のクラス名を生成し、バンドラーの設定によって未使用のモジュールをtree-shakingできます。バンドルに含まれるのはインポートされたCSSモジュールだけなので、コンポーネントとスタイルを同じ場所に配置することで、グローバルな未使用スタイルが自然に排除されます。

Next.jsのようなフレームワークでは、ルートごとにCSSをコード分割します（ページ単位のCSS抽出）。または、CSS Modulesで動的インポートを使用します。各ページが自身のスタイルだけを読み込むため、カバレッジ分析をアプリケーション単位ではなく、ページ単位で意味のある形で行えます。

Lighthouseの「Reduce unused CSS」監査では、未使用のルールを削除した場合に削減できるバイト数を推定します。未使用率の高い特定のスタイルシートリソースを特定できます。どのファイルから監査するかを決める際の優先順位付けに使用してください。

カバレッジ分析で取得できるのは、記録中に表示された状態だけです。ホバー状態、モーダルを開いた状態、エラー状態、認証済みの状態は、スタイルが誤ってパージされないよう、カバレッジの記録中に手動で発生させる必要があります。

モノリシックなグローバルスタイルシートには、機能が削除されるたびに未使用CSSが蓄積します。コンポーネント単位のCSS（CSS Modules、Styled Components、Tailwindのユーティリティ）は、スタイルがコンポーネントとともに管理され、一緒に削除できるため、整理しやすくなります。

大規模なレガシーCSSファイルでは、まずUnCSSまたはPurgeCSSをレポートのみのモードで使用します。使用頻度でルールを並べ替え、明らかに未使用のベンダープラグインのスタイルを抽出して削除します。エッジケースの状態用スタイルを誤って削除しないよう、段階的に進めてください。

Chrome DevToolsのCoverageパネルは何を測定しますか。

DevToolsのCoverageとLighthouseによるCSSカバレッジ分析で、未使用のルールを特定できます。PurgeCSSとTailwind JITは、デッドコードの除去を自動化します。CSS Modulesとルート単位の分割により、未使用スタイルの蓄積を防げます。これらを組み合わせることで、CSSのペイロードと解析時間を最小限に抑えられます。