logo-sm

お電話はこちら 03-6912-0139

ブログ

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を削除する必要が出た場合はぜひ参考にしてみてください。

関連記事

  • AWS認定SAAを取得しました
    2022年3月にAWS認定SAA(ソリューションアーキテクト・アソシエイト)を取得しましたので、AWS認定SA […]

    2022.03.29

  • Twitterの埋め込みをCSSで限界以上に小さくする方法
    サイト制作をしていると、Twitterの埋め込みを頼まれることがたまにあります。 今回Twitterの埋め込み […]

    2022.03.28

  • サイト制作でスクロールバーを左に配置する方法
    今回はスクロールバーを左に配置する方法をご紹介します。 サイトのスクロールバーはデフォルトでは右に配置されます […]

    2022.03.23

  • パートナー

  • 人材育成