logo-sm

お問い合わせは Webフォームから

ブログ

WordPressで使っていないCSSを削除する方法

2021.09.29

ファイルを軽くするために使っていないcssを消す必要がある場合があります。

今回ある仕事で大量にページを削除したため、
使っていないcssを削除する必要が出てきました。

cssは長年存在していて、変更し続けているサイトのため、どこに何が書いてあるか不明でまた複数のページに1つのcssが当たっている状況でしたので削除方法に迷いました。

私が不要cssを削除した方法を紹介します。

削除したものはWordpressのサイトになります。

1,Unused CSS

https://www.jitbit.com/unusedcss/

初めに不要cssを消すために見つけたのがこのサイトでした。
URLを入力するだけで、未使用セレクタを一覧表示してくれるものでした。
URLの配下まで、使っているかを見てくれるので優れものです。

使い方は簡単。
確認したいサイトのURLを入力し「CRAWL FOR UNUSED CSS」のボタンを押すだけです。

このサイトの不要cssはこちらのようですね。

このサイトでは成功したのですが、
現場のサイトは開発環境のものでしたのでIPでアクセス制限をかけているのか?

エラーが出てしまいました。

せっかく簡単に処理できそうだったのに、残念でした。

こちらのツールの利用の注意点として、「JSなどで動的に入れ込まれた要素に対して当たっているcssも不要と判断される。」場合があるので、こちらのツールを使う際はその点を注意して使いましょう。

2、UnCSS Online!

https://uncss-online.com/

次に見つけたものがこちらのサイトでした。
左側にHTMLを、右にcssを入れると、不要な物を取り除いたcssが下に出力されるものです。

注意点

複数ページにまたがっているcssの場合は左側に全ての対象ページのHTMLを入れ込む必要がある。

複数ページのものに関しては左側に全てのページのHTMLを入れ込む必要があります。

文字数制限がある

全てのページのHTMLを左側に突っ込んだらエラーになります。制限がいくつかは分かりませんでしたが文字数制限があるようです。私はcssとは不要なJSの記述箇所やheaderの箇所を削除することにより制限を逃れました。

JSなどの入れ込みは考慮されない

HTMLしか入れてないので当たり前ですがJSなどでの入れ込み要素は考慮されません。
私は、削除後、ページを確認しレイアウト崩れなどが起きた箇所は戻し作業を行いました。

WordPressはユーザー権限や分岐で出るページの見た目が変わるのでそこも確認が必要

面倒ですが、ユーザー権限を変更すると予期せぬレイアウト崩れが起きている場合があるので確認が必要です。

そもそもページごとでしっかりcssを分けて書いておく必要がある

今回のケースから、cssはパーツやページごとにしっかりcssを分けておく必要がある、またはsassなどを使って分けて書く必要があると思いました。

今後気をつけようという教訓にもなりました。

もし、不要cssを削除する必要が出た場合はぜひ参考にしてみてください。

関連記事

  • VSCode (内のPowerShell)でアドレス設定を切り替え!
    【経緯】 最近携わった案件で大量のNW機器のキッティングをした際、それぞれにSSHでの接続性などを確認するテス […]

    2023.10.13

  • PaloaltoでWindows NTPサーバに同期
    【事象と対処法】 オフライン環境のPaloaltoでNTPの機能確認をする必要があり、Windows標準のNT […]

    2023.10.13

  • Cisco Packet Tracerを使ってネットワークを学習しよう! -2-
    Packet Tracer紹介の2回目です。今回は、CCNA試験範囲の中で、多くの方にとって理解しにくい技術の […]

    2023.03.28

  • パートナー

  • 人材育成・採用情報