CSS 監査

スタイルシートの分析：ファイルサイズ、カバレッジ、セレクタ詳細度、重複宣言。

メリット

バイトレベルのCSSカバレッジ

ファイルごとの使用済みCSSと未使用CSSの正確な測定。ブラウザが無駄にダウンロードしているキロバイト数を正確に把握し、ページの軽量化を実現します。

詳細度の管理

セレクタの最小・平均・最大詳細度とトップ10の重いセレクタのレポート。カスケードを予測可能に保ち、スタイルの保守を容易にします。

重複と!importantの検出

繰り返し宣言と!importantの過剰使用を自動検出。機能を失わずにCSSサイズを削減できます。

完全なスタイルシートマップ

外部・インラインを含むすべての接続ファイルの概要 — サイズ、タイプ、カバレッジ率。メディアクエリ、ベンダープレフィックス、カラー、フォントを1つのレポートで確認。

ブラウザはレンダリング開始前にすべてのCSSをダウンロード・解析します。余分なスタイルはブロッキング時間を増加させ、FCPとLCPを遅延させます。未使用CSSの削除は、ページ読み込み高速化の最も効果的な方法の一つです。

詳細度は、競合時にどのCSSルールが勝つかを決定します。高い詳細度は「セレクタ戦争」を引き起こし、メンテナンスを困難にします。レポートは問題のあるセレクタを強調表示し、カスケードの簡素化を支援します。

!importantはCSSの自然なカスケードを壊し、スタイルを予測不能にします。新しい!importantはそれを上書きするためにさらに別の!importantを強制します。レポートはすべてのそのような宣言をリストアップし、段階的なリファクタリングを支援します。

CSS総サイズ、ファイル・ルール・セレクタ数、未使用スタイルの割合、詳細度トップスコア、重複リスト、!important宣言、メディアクエリ、ベンダープレフィックス、カラーパレット、使用フォント。

1ページの分析は通常1分以内です。サービスは実際のブラウザでページを読み込み、すべてのスタイルシートを収集し、実際の条件下でカバレッジを分析します。