使っていないCSSを削除 する手順WordPress

フルタニ

こんにちは、フルタニです。放送局で番組作りをしてました。 使っていないCSSを削除 を書きます。

ブログのアクセス数が伸び悩んで困っている人いませんか。

改善策は、記事を増やすのではなく、これまで書いた記事をリライトするのが効果的です。

リライトするには、まずは自分の弱点を探すこと。

PageSpeed Insights で自分のサイトを計測します。

すると「使っていないCSSを削除」という警告が出てきました。

その手順を探しました。

使っていないCSSを削除 する手順

「使っていないCSS」とは

CSSとはWebページの見た目を整える役割を担う言語のこと。基本的にはHTMLと組み合わせて使用されます。
CSSとは?できることや書き方を初心者向けにわかりやすく解説 | 侍エンジニアブログ

ブログを開設してから記事を書き続けていると、CSSには書かれているものの、実際にはHTML側で使われていない痕跡が数多く発生します。

例えば、大量にページを削除するなどした場合に使っていないcssが大量発生してしまいます。

無用の長物化したCSSは、サイトの表示速度にも悪影響を与えます。

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

使っていないCSSを見つけ出す方法

長年放置され続けたCSScssはどこにあるのか、何が書いてあるかわかりません。

そのため消そうにも消せないまま残り続けているケースが少なくありません。

無用の長物化したCSSを探し当ててくれるウェブサービスがあります。

Unused CSSです。

使い方はシンプルです。

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

すると、CSS側で記入されているものの実際には使用されていないセレクタを抽出して一覧表にしてくれます。

CSSファイルには書かれているものの、実際のHTML側では使用されていないセレクタが一目瞭然になるので、あとはこのCSSをサイトから削っていけばいいのです。

使用されていないセレクタはWordPressの中に入り、一つ一つテキストエディタで消します。

(プロ向け)使用していないCSSセレクタを削除する手順

手作業で消していくのは面倒という人には、自動で消してくれるサービスがあります。

UnCSS Online! です。

ただし、消すファイルは自分で選択しなくてはならないので初心者にはお勧めできません

左にHTMLを、右にCSSのコードを入れて、下の「UNCSS MY STYLES!」ボタンを押すだけで、不要な物を取り除いたcssが下の欄に表示されます。

これをコピーして、もとの情報と差し替えるだけで、無用の長物化したCSSを削除できるというわけです。

まとめ

以上で流れはわかりましたが、UnCSS Online!の使い方には注意が必要です。

間違って必要なものまで削除してしまうと元も子もなくなります。

使用上の注意点

・複数ページにまたがっているcssの場合は左側に全ての対象ページのHTMLを入れ込む必要がある文字数制限がある
・JSなどの入れ込みは考慮されない
・WordPressはユーザー権限や分岐で出るページの見た目が変わるのでそこも確認が必要
・そもそもページごとでしっかりcssを分けて書いておく必要がある

WordPressで使っていないCSSを削除する方法 – 株式会社アウルキャンプ

以上でわかるように、流れはわかったとしても、間違いなく仕事を終わらせるには知識が必要ということがわかりました。

私の場合、専門家の力を借りて行いたいと思います。