Coding Methodology
試してみたくなる！便利なCSS最適化ツールの使い方
2022 / 07 / 29
前回の「Webサイト解析ツールの紹介」記事に続き、今回はCSSの最適化に役立つツール紹介をしたいと思います。
速度改善をする際、不要なCSSを減らすことはとても有効な手段の一つです。
複数の制作者が制作・改修をして運用されたページは特に、不要なCSSが増えていきがちです。
しかし、他の人が書いたソースを調査するにはとても労力がかかります。
今回は、そんな時に試してみたいツールを3つ、具体的な使い方とあわせてご紹介したいと思います。
今回ご紹介するツール
- 検証ツールの「カバレッジ」機能
不要なCSSと使用しているCSSの差分を表示する機能 - 「Coverage JSON to CSS converter」
検証ツールで表示された「カバレッジ」を読み込んで、不要なCSS部分を除外してくれるツール - 「clean-css」
重複している記述を一つにまとめたり、コメントアウトや不要な余白・改行を削除するツール
１.検証ツールの「カバレッジ」機能
Chromeの検証ツールには、「カバレッジ」という機能があります。こちらを使用すると、cssの何が実行されていて、何が実行されていないのかを知ることができます。そのため、不要なcssがどれか目星をつけることができるのです。
使い方
Chromeの検証ツールを開き、右上の三点マークをクリック、「その他のツール」から「カバレッジ」を開きます。（画面1）
録画ボタンをクリックすると、そのページで使用しているcssやjsなどのファイルが一覧で表示されます。（画面2）
一覧の中のURLをクリックすると、上部にソースが表示され、未実行のコードは赤い帯、実行済みのコードは青い帯がつきます。（画面3）
こちらを確認することで、不要なcssはどれか目星をつけることができます。
しかし、2点注意点があります。
注意点
メディアクエリの画面幅毎にカバレッジを取得する
メディアクエリが使用されているサイトの場合、画面幅によって、実行されるcssも変わるため、PC表示では赤帯だったcssがSP表示では青帯になることがあります。
そのため、PC表示の際に赤帯だったcssをすべて削除してしまうと、レスポンシブさせた時に、表示が崩れてしまう恐れがあります。
対処方法としては、はじめに使用されているメディアクエリを洗い出します。そしてメディアクエリの画面幅毎にカバレッジを取得することで、誤って削除してしまうことを防止することが可能です。
使用されているメディアクエリは、検証ツールの「デバイスのツールバーを切り替え」マークをクリックし、左側の三点マークから「メディアクエリを表示」をクリックすると、確認することができます。
JSで動的に制御しているコンテンツも確認する
アコーディオンやハンバーガーメニューなどJSでクラス名の出し分けをしているものなども、実行していないと赤帯になってしまうので、こちらも注意が必要です。
予めJSで制御するものは、クラス名の頭に「js-」をつけたり、data属性で制御するなどルールを決めておくと、このような場合にも安心です。
注意点を踏まえつつ、検証ツールで取得したカバレッジを使用して、実際にcssを最適化できるのが、次にご紹介するツールです。
２.「Coverage JSON to CSS converter」
「Coverage JSON to CSS converter」は、カバレッジの実行結果を使用して自動的に赤帯箇所を削除してくれるサイトです。
使い方
準備
検証ツールで取得したカバレッジは、下矢印マークで「エクスポート」をすることができます。今回はCSSのみ取得したいので、「CSS」とフィルタをかけておきます。（画面4）
手順
- 「Coverage JSON to CSS converter」にアクセスし、「1. Paste JSON content」に、先程エクスポートしたjsonファイルのソースを貼り付けます。
- 「2. Extract CSS」ボタンをクリックします。
- 最適化された青帯部分のソースが「Covered CSS」に、赤帯部分のソースが「Uncovered CSS」に振り分けられます。
このように、カバレッジと「Coverage JSON to CSS converter」を使用することで、不要なcssを除くことができます。
３.「clean-css」
最後にご紹介するのは、「clean-css」というサイトです。
重複している記述を一つにまとめたり、コメントアウトや不要な余白・改行を削除したりと、個別にカスタマイズしながら最適化できるサイトになります。
使い方
最適化したいcssのソースをサイト中央のテキストボックスに貼り付け、「optimize」ボタンをクリックすると、結果が表示されます。（画面5）
こちらは「Settings」ボタンで細かくカスタマイズすることができます。
デフォルトでは、レベル0は必須、レベル1にチェックが入った状態です。（画面6）
レベル1までは安全な範囲で最適化することが可能です。レベル2になると、少し大きな改修がされるため、注意が必要です。
また、 「output formatting」にチェックを入れると、minify化せずに、改行や余白のルールを統一させることも可能です。
それでは、具体的にどんな設定が可能なのか見ていきたいと思います。
設定内容
level 0 optimizations（レベル0）
デフォルト機能
- cssがminify化される。
- 不要なセミコロンの削除。
level 1 optimizations（レベル1）
単一のプロパティでのみ機能します。
デフォルト機能
- コメントアウトの削除。（/*! */で囲われたコメントアウトについては、削除されずに残ります。）
- 無効なプロパティは値ごと削除。
- #eeeeee など省略可能なカラーコードの省略。
| 項目 | 内容 |
|---|---|
| optimize font-weight properties |
|
| remove empty rules and nested blocks (after level 1 optimizations) |
|
| remove negative paddings |
|
| replace multiple zeros |
|
| replace time units |
|
| replace 0 units |
|
level 2 optimizations（レベル２）
ルールまたは複数のプロパティレベルで機能します。
デフォルト機能
- backgroundプロパティの順番が統一される。
- transitionのallやease、list-styleのoutsideなど、デフォルト設定のものは省略される。
例）transition:all .12sがtransition:.12sに置き換わる。
例）list-style:outside decimalがlist-style:decimalに置き換わる。 - paddingやmarginの上下または左右が同じ値の時に省略される。
例）padding:.6rem 0 .3rem 0;がpadding:.6rem 0 .3rem;に省略される。
| 項目 | 内容 |
|---|---|
| merge adjacent rules |
|
| merge components into shorthand properties |
|
| remove duplicate rules |
|
| remove empty rules and nested blocks (after level 2 optimizations) |
|
| remove unused @counter-style, @font-face, @keyframes, and @namespace at rules |
|
| restructure rules |
|
| skip optimizing properties |
|
Modern browsers compatibility
- ブラウザの互換性を選択することができます。
- 注意：古いものにすると、対応していないプロパティや値は、削除されてしまうので、反対に最新のブラウザに対応されなくなってしまう恐れがあります。
output formatting
インデントや改行、余白感をカスタマイズしながら調整することができます。
こちらだけなら、要素が削除されることはないので、安心して使用することができます。
「clean-css」のメリットは、カスタマイズが可能な点です。不要な機能は除くことができるため、サイトやユーザーに合った方法のみを採用することができます。また、最適化のためだけでなく、一定のルールでスタイルシートを整えることができるため品質を担保するためにも役立てることができます。
しかし、レベル2の「複数のプロパティに対しての最適化」はcss内の記述の順番が変わったり、「remove empty rules and nested blocks (after level 2 optimizations)」にチェックを入れずに他の処理を実行すると空のセレクタが残ってしまったりするため、注意が必要です。
cssの最適化は、影響範囲がわかりにくくハードルの高い作業ですが、今回ご紹介したツールを見て、少し試してみようかなと思って頂けたら幸いです。
clean-cssはnpmパッケージもあるので、開発環境に入れて作業することも可能です。良かったらこちらもご参考いただければと思います。
