ハマログ

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

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日


関連記事

イーツー・インフォの広報活動について

今日は私と私の所属するチームで最近取り組んでいることをご紹介したいと思います こ…

採用特設サイトが公開されました!

前回、採用特設サイト 絶賛準備中! という記事を書きましたが あのあと無事、採用…

WEBページ高速化セミナーに行ってきた

先週asukaさんとGMOホスコンさんが主催したセミナー「WEB制作者なら知って…


← 前の投稿

次の投稿 →