Chromeのカバレッジから使用中のCSSを抽出
CoverageパネルのJSONをドロップすると、ページが適用したルールだけを、メディアクエリの中に収めたまま1つのスタイルシートにして返します。
カバレッジJSONをCSSに変換
Chrome DevToolsのCoverage（カバレッジ）パネルは、ページが各スタイルシートを実際にどれだけ使っているかを示し、そのExport（エクスポート）ボタンで結果をJSONとして保存できます。ただ、そのファイル単体ではあまり役に立ちません。すべてのファイルのテキスト全体と、文字位置のリストが入っているだけだからです。このページは未使用CSS削除ツールをカバレッジJSONタブで開きます。このタブは、エクスポートをそのまま使えるスタイルシートに変換します。
取りこぼさないように記録する
結果の完全さは記録の完全さで決まります。ページの読み込み中に使われるルールも含まれるよう、パネルの再読み込みボタンで記録を始めてください。そのうえで、訪問者が触れそうな部分をすべて操作します。モバイルメニュー、ドロップダウン、タブ、アコーディオン、ポップアップ、エラー状態を含むフォームなどです。記録中にはブレークポイントをまたいでウィンドウのサイズを変えてください。発生させなかったものは、すべて未使用として扱われます。
スタイルシートの各部分がどうなるか
| スタイルシート内 | 結果 |
|---|---|
| ページが使ったルール | 書かれたとおりに残る |
@media、@supports、@container、@layerの中で使われたルール | 同じブロックの中に残る |
| 使われたルールが1つも残らないブロック | ルールごと削除 |
@font-face、@keyframes、@import、@charset | 常に残る |
| ページが一度も使わなかったルール | 削除 |
エクスポート内のインラインスタイルとスクリプト
ページ自体のHTMLもエクスポートに含まれ、インラインの<style>ブロックと<script>ブロックの範囲も記録されています。ツールはドキュメントから各styleブロックを読み取り、使われたルールを残して、結果の表にインラインスタイルとして表示します。JavaScriptファイルはスキップされ、除外したエントリーの件数が概要に表示されます。
結果の使い方
出力では、各スタイルシートの先頭にそのアドレスを示すコメントが付くので、あとで分割することも、1つのファイルのまま使うこともできます。ページのスタイルシートへのリンクを新しいファイルに置き換え、すべての画面幅でページを確認し、問題がないと確信できるまで元のファイルは残しておいてください。ページビルダーで作ったサイトなら、移行の残りの作業はElementorのページをHTMLとCSSに変換するガイドで扱っています。記録ではなくHTMLとCSSが手元にある場合は、PurgeCSSオンラインを使ってください。