ページで使用されていないCSSのセレクタを見つけてくれる「Unused CSS」

こんにちは！社員Aです👩

今回は、ページ内で使用されていないCSSのセレクタを見つけてくれる無料ツール「Unused CSS」をご紹介します。

無料ツール「Unused CSS」

コーディングの途中で修正が入ったり、レイアウト変更があった場合、使わなくなったCSSをそのまま残してしまったりすることがあると思うのですが、整理するときにひとつずつ検証して探し出すのはかなり面倒ですよね。

そんな時でも一瞬で見つけてくれるのが、「Unused CSS」です。

Unused CSSを使うメリット

1. URLを入力するだけで一瞬で不要なCSSを洗い出してくれる。
2. 不要なCSSを洗い出し、CSSの軽量化ができる
3. 制作者以外が修正をするときでも、不要なCSSがなく、わかりやすくなる。

無料ツール「Unused CSS」の使い方

ここからは、実際にこのブログの不要CSSを探すべく、「Unused CSS」を使ってみたいと思います。

1.公式サイトでサイトのURLを入力

まずは、公式サイトから調査対象のURLを入力し、「CHECK  FOR UNUSED CSS」ボタンをクリックします。

公式サイトへ

2.調査結果が表示される

1分くらい待ったところで、クロールが終わり実際に使用されていないCSSが一覧で表示されました。

私はWordPressとプラグインをいくつか使っているせいか、制作外でのCSSセレクタがたくさんピックアップされました。

内部リンクを自動解析し、配下ページも解析してくれるようです。（現在ベータ版で100ページまで）

3.使われていないCSSを削除する

2で使われていないCSSを洗い出せたら、削除できる分は削除して軽量化させましょう。

まとめ

ベータ版とはいえ、URLを入れるだけで使われていないCSSを一瞬で出してくれるのが便利ですね。

前回の記事とつながる話ですが、当サイトの表示速度にも力を入れているので、小さなところから軽量化できるように進めていきたいと思います！