Coding Methodology

試してみたくなる!便利なCSS最適化ツールの使い方

2022 / 07 / 29

前回の「Webサイト解析ツールの紹介」記事に続き、今回はCSSの最適化に役立つツール紹介をしたいと思います。
速度改善をする際、不要なCSSを減らすことはとても有効な手段の一つです。
複数の制作者が制作・改修をして運用されたページは特に、不要なCSSが増えていきがちです。
しかし、他の人が書いたソースを調査するにはとても労力がかかります。
今回は、そんな時に試してみたいツールを3つ、具体的な使い方とあわせてご紹介したいと思います。

試してみたくなる!便利なCSS最適化ツールの使い方

今回ご紹介するツール

  1. 検証ツールの「カバレッジ」機能
    不要なCSSと使用しているCSSの差分を表示する機能
  2. 「Coverage JSON to CSS converter」
    検証ツールで表示された「カバレッジ」を読み込んで、不要なCSS部分を除外してくれるツール
  3. 「clean-css」
    重複している記述を一つにまとめたり、コメントアウトや不要な余白・改行を削除するツール

1.検証ツールの「カバレッジ」機能

Chromeの検証ツールには、「カバレッジ」という機能があります。こちらを使用すると、cssの何が実行されていて、何が実行されていないのかを知ることができます。そのため、不要なcssがどれか目星をつけることができるのです。

使い方

Chromeの検証ツールを開き、右上の三点マークをクリック、「その他のツール」から「カバレッジ」を開きます。(画面1)

画面1

録画ボタンをクリックすると、そのページで使用しているcssやjsなどのファイルが一覧で表示されます。(画面2)

画面2

一覧の中のURLをクリックすると、上部にソースが表示され、未実行のコードは赤い帯、実行済みのコードは青い帯がつきます。(画面3)
こちらを確認することで、不要なcssはどれか目星をつけることができます。

しかし、2点注意点があります。

画面3

注意点

メディアクエリの画面幅毎にカバレッジを取得する

メディアクエリが使用されているサイトの場合、画面幅によって、実行されるcssも変わるため、PC表示では赤帯だったcssがSP表示では青帯になることがあります。
そのため、PC表示の際に赤帯だったcssをすべて削除してしまうと、レスポンシブさせた時に、表示が崩れてしまう恐れがあります。

対処方法としては、はじめに使用されているメディアクエリを洗い出します。そしてメディアクエリの画面幅毎にカバレッジを取得することで、誤って削除してしまうことを防止することが可能です。
使用されているメディアクエリは、検証ツールの「デバイスのツールバーを切り替え」マークをクリックし、左側の三点マークから「メディアクエリを表示」をクリックすると、確認することができます。

青色のバーがmax-width、オレンジ色のバーがmin-widthで設定したブレークポイント

JSで動的に制御しているコンテンツも確認する

アコーディオンやハンバーガーメニューなどJSでクラス名の出し分けをしているものなども、実行していないと赤帯になってしまうので、こちらも注意が必要です。
予めJSで制御するものは、クラス名の頭に「js-」をつけたり、data属性で制御するなどルールを決めておくと、このような場合にも安心です。

注意点を踏まえつつ、検証ツールで取得したカバレッジを使用して、実際にcssを最適化できるのが、次にご紹介するツールです。

2.「Coverage JSON to CSS converter」

Coverage JSON to CSS converter」は、カバレッジの実行結果を使用して自動的に赤帯箇所を削除してくれるサイトです。

使い方

準備
検証ツールで取得したカバレッジは、下矢印マークで「エクスポート」をすることができます。今回はCSSのみ取得したいので、「CSS」とフィルタをかけておきます。(画面4)

画面4

手順

  1. Coverage JSON to CSS converter」にアクセスし、「1. Paste JSON content」に、先程エクスポートしたjsonファイルのソースを貼り付けます。
  2. 「2. Extract CSS」ボタンをクリックします。
  3. 最適化された青帯部分のソースが「Covered CSS」に、赤帯部分のソースが「Uncovered CSS」に振り分けられます。
cssのソースが、「Covered CSS」と「Uncovered CSS」の2つに分けられました。

このように、カバレッジと「Coverage JSON to CSS converter」を使用することで、不要なcssを除くことができます。

3.「clean-css」

最後にご紹介するのは、「clean-css」というサイトです。
重複している記述を一つにまとめたり、コメントアウトや不要な余白・改行を削除したりと、個別にカスタマイズしながら最適化できるサイトになります。

使い方

最適化したいcssのソースをサイト中央のテキストボックスに貼り付け、「optimize」ボタンをクリックすると、結果が表示されます。(画面5)

画面5

こちらは「Settings」ボタンで細かくカスタマイズすることができます。
デフォルトでは、レベル0は必須、レベル1にチェックが入った状態です。(画面6)

レベル1までは安全な範囲で最適化することが可能です。レベル2になると、少し大きな改修がされるため、注意が必要です。
また、 「output formatting」にチェックを入れると、minify化せずに、改行や余白のルールを統一させることも可能です。

それでは、具体的にどんな設定が可能なのか見ていきたいと思います。

画面6

設定内容

level 0 optimizations(レベル0)

デフォルト機能

  • cssがminify化される。
  • 不要なセミコロンの削除。

level 1 optimizations(レベル1)

単一のプロパティでのみ機能します。

デフォルト機能

  • コメントアウトの削除。(/*! */で囲われたコメントアウトについては、削除されずに残ります。)
  • 無効なプロパティは値ごと削除。
  • #eeeeee など省略可能なカラーコードの省略。
カスタマイズ機能(今回は一部だけご紹介します)
項目内容
optimize font-weight properties
  • `font-weight` プロパティを最適化する。
  • 例)font-weight:boldは700、normalは400に変換される。
remove empty rules and nested blocks (after level 1 optimizations)
  • レベル1の最適化後、空のルールとネストされたブロックを削除する。
  • 例).header {}などの空セレクタが削除される。
remove negative paddings
  • ネガティブパディングを削除する。
  • 例)padding: -10px;が削除される。
replace multiple zeros
  • 複数のゼロを置き換える。
  • 例)margin: 0 0 0 0;はmargin: 0;に置き換わる。
replace time units
  • 時間単位をより短い値に置き換える。
  • 例)transition: ease-in-out 0.03s;はtransition: ease-in-out 30ms;に置き換わる。
replace 0 units
  • ゼロの値を単位で置き換える。
  • 例)opacity: 0.3;はopacity: .3に置き換わる。

level 2 optimizations(レベル2)

ルールまたは複数のプロパティレベルで機能します。

デフォルト機能

  • 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
  • 隣接するルールをマージする。
  • 例)同じクラス名や同じスタイルの場合にマージされる。
  • .ttl-01{margin-top:2rem}.ttl-02{margin-top:2rem}が.ttl-01,.ttl-02{margin-top:2rem}に置き換わる。
  • .ttl-03 {width: 10px}.ttl-03{font-size: 13px}が.ttl-03 {width: 10px;font-size: 13px}に置き換わる。
  • 注意:マージ後、空のセレクタが残ってしまう。「remove empty rules and nested blocks (after level 2 optimizations)」を併用することで解決することができます。
merge components into shorthand properties
  • コンポーネントを省略形のプロパティにマージする。
  • 例)margin-right:0;margin-left:0;はmargin:0と省略される。
remove duplicate rules
  • 重複するルールを削除する。
  • 例).btn {width: 400px;}.btn {width: 400px;}は、.btn{width: 400px;}となる。
  • 注意:マージ後、空のセレクタが残ってしまう。「remove empty rules and nested blocks (after level 2 optimizations)」を併用することで解決することができます。
remove empty rules and nested blocks (after level 2 optimizations)
  • 空のルールとネストされたブロックを削除します(レベル2の最適化後)。
  • 注意:「merge adjacent rules」と「remove duplicate rules」「remove unused @counter-style, @font-face, @keyframes, and @namespace at rules」「restructure rules」は実行後、空のセレクタが残ってしまうので、こちらとの併用は必須になります。
remove unused @counter-style, @font-face, @keyframes, and @namespace at rules
  • ルールで未使用の@counter-style、@ font-face、 @ keyframes、および@namespaceを削除する。
restructure rules
  • ルールの再構築
  • 注意:独自のルールで大幅にクラス名の位置が変わる。
  • 注意:マージ後、空のセレクタが残ってしまう。
  • 「remove empty rules and nested blocks (after level 2 optimizations)」を併用することで解決することができます。
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パッケージもあるので、開発環境に入れて作業することも可能です。良かったらこちらもご参考いただければと思います。

https://github.com/clean-css/clean-css

一覧に戻る

CODING FACTORYのWebサイトにご訪問いただき、ありがとうございます!サイトの改善や情報発信に活かすために、個人情報保護方針に基づいたCookieの取得と利用のご同意をお願いいたします!
個人情報保護方針の詳細