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

ツール

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

2018年11月03日 12:00 

ページで使用されていない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ページまで)

注意点未使用の擬似クラス(:hoverや:afterなど)は、ページ上に要素を見つけることができなかったために、使用されていないCSSとしてカウントされる可能性があるようです。そのため、:hoverなどがカウントされた場合には、ツール通りに修正すると崩れる可能性がありますので、ご注意ください。実際には、CSSファイルを使用していないスタイルを削除する前に、実際に使用されていないことを再確認してください

 

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

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

 

まとめ

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

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

 

スポンサーリンク

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。日本語力が乏しく…社内のみんなからも指摘をされるので、ブログの執筆を通じて語彙力強化していきたいです✨ 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物がすきな皆さま、小動物トークしましょう!