サイトを長く運営していると未使用のCSSが増えていってしまいます。
使っていないCSSは削除したいところなのですが、どれをどこで使っているのかわからなくなってしまい、削除したらどこかのページに影響が出てしまうということも。
そこで使用していないCSSを発見するツール、そしてそれらを一括でコメントアウトするツールを作りました。
サイトのURLを入れ「テーマを確認する」を押します。
すると、対象となるCSSが表示されます。このサイトは無料テンプレートのcocoonで制作しているため、「cocoon-child-style」と「
cocoon-child-keyframes」が表示されました。
ちなみに親テーマは対象外としています。というのも、自動アップデートで結局元に戻ってしまうためです。
巡回するページ数、同時巡回数を設定。（このあたりは何となくでよいです。）
そして「未使用CSSを検出する」を押すと解析がはじまります。
すると大量の未使用のCSSを発見しましました。ちなみに今回は「207」でした。
そして最後に、現在使用しているCSSを「CSSをコメントアウトとする」という項目に貼り付け、「コメントアウトする」というボタンを押すと、コメントアウトされたCSSがその下に表示されるようになります。
それを実際にサイトで反映してみて、ページをチェックします。もし問題がないようでしたらコメントアウトした部分を削除してしまえばよいです。これはAIに頼めば一発で削除すると思うため、ツールとしては実装していません。
お断り
このツールの完成度は弊社基準で90点くらいかと思います。
ただ弊社ではよく利用していますし、このツールがあるのとないのとではかなり違います。
このようなツールをこれまで求めていましたが、なかなか見つけることができませんでした。
ちなみにこのツールを使ってCSSをコメントアウトしたことで、装飾が崩れてしまった箇所がこれまでに2ヶ所ほどありました。理由は既存のCSSとぶつかっている部分でした。
とはいえ、必ず全ページ確認し、問題がないと判断した場合にはコメントアウトしたCSSを削除するようにしましょう。またコメントアウト前のCSSは必ずバックアップを取っておきましょう。
このツールを使って問題が発生しても、弊社では一切責任を取ることができないことをご了承ください。
