サイト全体で使用していないCSSセレクタを抽出する方法【Dust-Me Selectors】

LINEで送る
Pocket

この記事の所要時間: 約 2分50秒

Dust-Me セレクタ

さて、サイトをリニューアルしたり、メンテナンスしたりしていると、CSSがどんどん増えていきますよね。

使用していないCSSはどれだったか分からなくなってしまいます。

その時々にキチンと整理しておけば問題ないのかもしれませんが、それがなかなかできません。特に私は。

そこで、CSSファイルが重くなってきているのでキレイにしようと動き出しました。

 

 

そこで活用したのが、「Dust-Me Selectors

このツールは、FireFoxのアドオンです。

使ってみるとなかなか便利でした。

 

※調べていると、「Remove unused CSS」 というサイトも便利そうですが、これは抽出したファイルのダウンロードに料金が発生するようです。有料なので精度は良いかもしれませんが。

 Remove unused CSS はこちら

 

 

Dust-Me Selectorsを使ってみる

 

まず、FireFoxのアドオンから検索、インストールします。

FirefoxでDust-Me Selectorsを検索

 

インストールすると、今すぐ再起動しましょう。

FirefoxでDust-Me Selectorsをインストール

 

さて、再起動後どこにアイコンがあるかと思ったらステータスバーにありました。

このホウキみたいなアイコンをクリック!

Dust-Me Selectorsのアイコン

 

数秒でチェックが終わり、タスクバーのあたりに結果内容が表示され、詳細な結果画面が表示されます。

Dust-Me Selectorsチェックの結果表示

 

Dust-Me Selectorsチェックの詳細内容

 

結構たくさんありました

CSVファイルとして保存ができまので、「unused_css.csv」としてDL完了。

Dust-Me Selectorsチェック内容をcsvファイルに保存

 

ファイルを開くと、ずらずらーーと使用されていないセレクタが表示されています。

使用されていないCSSセレクタの一覧ファイル

 

後はコマメに削除していくのみ。

 

ですが、念のため一気に行わず、少しずつ削除してサイトを確認しながら作業はすすめた方がよいでしょう。

ファイルのバックアップもお忘れなく。

 

 

サイト全体の使用されていないCSSセレクタの抽出

 

今までの作業では、単一ページの抽出なので他のページにCSSが使われていた場合、削除するとちょっと大変なことになります。

そこで、サイト全体の使用していないCSSセレクタを検索するには、先ほど同様ホウキアイコンをクリックし、

 

結果が表示された状態で、「Spider Log」のタブをクリック。

Spider Log

 

下側の「Spider Sitemap」をクリックして、sitemap.xmlのURLを記述します。

※sitemap.xmlの作成方法については、こちらの記事を参照ください

 

そして、「Start」をポチ!

Spider Sitemap

 

これでsitemap.xmlからサイト全体のURLを隈なくクロールして、使用されていないCSSセレクタを抽出できます。

 

すごい便利なアドオンです!

 

LINEで送る
Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です