未使用CSS削除ツール
Chromeのカバレッジのエクスポート、またはHTMLとスタイルシートから、ページで使うCSSだけを残します。すべてブラウザー内で動作します。
未使用CSS削除ツール - ページで使うCSSだけを残す
ほとんどのサイトは、どのページが必要とするよりはるかに多くのCSSを配信しています。テーマやページビルダー、フレームワークは、表示するかもしれないあらゆるウィジェットのスタイルを持ち込み、ブラウザーは描画を始める前にそのすべてをダウンロードして解析しなければなりません。このツールは、スタイルシートをページが実際に使うルールだけに絞り込みます。方法は2つあり、Chrome DevToolsが記録するカバレッジ（Coverage）のエクスポートから、またはページのHTMLとCSSそのものから処理します。
どちらの方法もすべてブラウザー内で動きます。スタイルシート、HTML、カバレッジのファイルは自分のパソコンの中で読み込まれ、アップロードされることはありません。CSSが公開前のクライアントのサイトのものである場合、これは重要です。
2つの入り口
| モード | 渡すもの | 分かること | 向いている用途 |
|---|---|---|---|
| カバレッジJSON | Chrome DevToolsのCoverageパネルからエクスポートしたファイル | ページを操作している間にブラウザーが実際に適用したルール | クラスを予測できないテーマやページビルダー |
| HTML + CSS | ページのHTMLとスタイルシート | そのHTML内の要素にマッチするセレクター | 自分で管理している静的ページやテンプレート |
Chromeでカバレッジをエクスポートする方法
- Chromeでページを開き、DevToolsを開きます。
- 3点メニューを開き、More tools（その他のツール）、Coverage（カバレッジ）の順に選びます。
- Coverageパネルの再読み込みボタンを押し、ページの読み込みから記録が始まるようにします。
- 訪問者と同じようにページを操作します。メニュー、アコーディオン、ポップアップを開き、対応している幅までウィンドウのサイズを変えてください。
- Export（エクスポート）を押してJSONファイルを保存し、それをカバレッジJSONタブにドロップして使用中のCSSを抽出を押します。
エクスポートには、JavaScriptも含めてページが読み込んだすべてのファイルが並びます。ツールはスタイルシートを残し、HTMLドキュメントからはインラインの<style>ブロックを読み取り、それ以外はスキップして、スキップした件数を表示します。Puppeteerのpage.coverage.stopCSSCoverage()も同じ形式を出力するので、自動化した記録にも使えます。
ルールを@mediaの中に戻す理由
Chromeはカバレッジをスタイルルール1つ単位で記録します。@media (max-width: 768px) { ... }の中のルールについては、そのルールは記録しても、周りの@mediaの行は記録しません。そのため、記録された範囲をそのままコピーするだけのツールでは、モバイル用のルールが単独で出力され、あらゆる画面幅で適用されてしまいます。このツールはまずスタイルシート全体をツリーとして読み込むので、残した各ルールは元の@media、@supports、@container、@layerブロックの中に書き戻され、中身が空になったブロックは消えます。
一部のアットルールは常に残します。ページがマッチするかどうかではなく、ほかのルールがそれに依存しているからです。対象は@font-face、@keyframes、@import、@charset、@property、そして@layerの順序宣言です。残したルールは書かれたとおりにコピーされるため、中のコメント、書式、ベンダーハックも元のまま保たれます。
HTML + CSSモード
ページのHTMLとスタイルシートを貼り付けるか、両方のファイルをドロップします。ツールはスクリプトを実行せずに、ブラウザーと同じようにHTMLを解析し、ルール内のいずれかのセレクターが要素にマッチすればそのルールを残します。:hover、:focus、::beforeのような状態や疑似要素の部分は判定では無視されるので、ページに.menu aがあれば.menu a:hoverも残ります。ブラウザーが解析できないセレクターは推測せずに残し、@keyframesは、残したルールかインラインスタイルがそのアニメーション名を参照している間だけ残ります。
弱点はJavaScriptです。メニューのis-openやスライドのactiveのように、スクリプトが後から追加するクラスは貼り付けたHTMLにないため、そのルールは未使用に見えます。そうした名前は常に残すに、スペースかカンマで区切って並べてください。IDは#があってもなくても使え、/^elementor-/のようにスラッシュで囲んだパターンは、それにマッチするすべてのクラスを残します。複数のページが1つのスタイルシートを共有しているなら、すべてのページのHTMLを続けて貼り付けます。
表示される数値の意味
実行するたびに、ツールはどれだけ残したか、いくつのルールが残ったか、そしてカバレッジモードではスタイルシートごとの行を表示します。HTML + CSSモードでは、削除したセレクターに取り除いたものが一覧表示されます。セーフリストに入れるべきだったクラスを見つけるには、ここを見るのがいちばん早い方法です。元のファイルは残しておいてください。結果は新しいスタイルシートであり、確実な検証方法は、それを使ってページを読み込み、目で確かめることです。
知っておきたい限界
- カバレッジが知っているのは、記録している間に起きたことだけです。一度も発生させなかったホバー状態、開かなかったメニュー、試さなかった画面幅は未使用として扱われます。
- 1ページのカバレッジは、同じファイルを読み込むほかのページについては何も教えてくれません。主要なテンプレートごとにツールを実行するか、共有の基本スタイルシートは丸ごと残してください。
- 実行時にJavaScriptが
style属性や挿入したスタイルシートを通して追加するスタイルは、どちらのモードでも見えません。 - CDN上のフォントやウィジェットのCSSなど、ほかのサイトのスタイルシートもエクスポートに含まれます。残すか外すかは意図して決めてください。
特に役立つ場面
- Elementor、Diviなどのページビルダーで作ったページ。これらはすべてのページですべてのウィジェットのCSSを読み込みます。作業全体の流れはElementorのページをシンプルなHTMLとCSSに変換するガイドで説明しています。
- Bootstrapのようなテーマやフレームワーク。ランディングページが使うクラスはそのごく一部です。
- クリティカルCSSのインライン化やメールテンプレートの作成。スタイルの1バイト1バイトにコストがかかります。
- リデザインの前に古いスタイルシートを監査し、どのルールがまだいずれかのページで使われているかを確かめる場合。
コマンドラインで行う方法
ビルド工程に組み込むなら、PurgeCSSがHTML + CSSの作業をスクリプトから行います。コンテンツのファイルとスタイルシートを読み込み、整理したCSSをフォルダーに書き出します。
npx purgecss --css css/style.css --content index.html --output dist/css/PuppeteerはCoverageパネルと同じカバレッジを記録し、その出力はJSONとして保存してこのツールにドロップできます。
await page.coverage.startCSSCoverage();
await page.goto('https://example.com');
const coverage = await page.coverage.stopCSSCoverage();
fs.writeFileSync('coverage.json', JSON.stringify(coverage));関連ツール
カバレッジのエクスポートはJSONなので、中身を確認するにはJSON整形ツールがいちばん手早い方法です。常に残すに入れるパターンは正規表現テスターで作って試し、軽くなったページにまだ残る画像は画像変換ツールで圧縮しましょう。