ハマログ

株式会社イーツー・インフォの社員ブログ

CSSの肥大化を解決する方法

サイトを運用していつの間にCSSがとんでもない量になってしまって、CSSの肥大化を解決したいというご依頼をいただきました。

DevToolsのCoverage機能がこのように使われていないclassを赤くして教えてくれますが、閲覧しているページのみです。

異なるページで共通のCSSを使う場合、目が回るほどしんどいです。
サイト全体のいらないCSSを削除くれるツールが欲しいですが、単独ページしかできないか、Javascriptの要素も削除されるものが多いです。

そこでPurifyCSS Onlineというツールを見つけました。
URLを入れてClean up CSSを押したら使ってないコードを削除して最適化にできます。
しかも複数のページをまとめて見てくれます。

Yahoo!ニュースを例として、トップと記事一覧と記事詳細ページのCSSを整理してもらって、show clean css codeに表示されるコードをコピーします。

でもやっぱりツール頼りでちょっと不安なので最後に軽くCoverageで漏れをチェックしました。大した問題なさそうなので、また使いたいと思います。

  yt   2021年1月8日


関連記事

JavaのJDK/JREをアップデートしたらEclipseがerrorcode=13で起動しない

JavaのJDK/JREをアップデートしたらEclipseが起動しなくなりました…

Googleの隠し機能「イースターエッグ」

SNSで、Googleで「無人探査機「DART」」と検索すると画面上に探査機が現…

ブラウザ上でフォントを見比べる

今回は、フォントを一覧で確認できるツールをご紹介します。 デザインはもちろん、提…


← 前の投稿

次の投稿 →