【使用していないCSSの削減】不要なCSSを自動で抽出・削除する方法
※本ページにはプロモーションが含まれている場合があります。
・PageSpeed Insightsの「使用していないCSSの削減」を改善したい
・使用していない不要なCSSの削除を自動で簡単に行いたい
・CSS関連のサイトを高速化する他の方法もついでに知りたい
サイト速度を計測できるPageSpeed Insightsで提案される改善項目の1つである「使用していないCSSの削減」。
・CSSはよくわからないから後回し。
こんな方も多いはず。
そこで本記事では、初心者でもとっても簡単に「使用していないCSSの削減」を改善してサイトを高速化させる方法を解説します。
本記事の内容
- 「使用していないCSSの削減」の改善方法の概要
- 無料ツール「Unused CSS」改善する方法
- 無料ツール「UnCSS Online!」で改善する方法
- CSS関連でさらにサイトを高速化する3つの方法
本記事を読むと、サイトで使っていない不要なCSSコードを自動で簡単に特定・削除して、「使用していないCSSの削減」を改善する方法だけでなく、CSSに関連してさらに高速化する方法もわかります。
- ライター100名以上の組織の法人を経営→株式譲渡
- 立ち上げから半年で月間1,000万PVを達成
- 1年で月間1200万PVを達成
- 年商約1億円を達成
- 法人向けコンサル1社あたり月額60~100万円
- PVメディア・アフィリエイトサイト・オウンドメディア・企業ブログなどSEOサイトの立ち上げ・コンサル実績多数
>> 【2021年】おすすめのアフィリエイトASP15選【初心者に必須のASPを厳選】
>> 【超豪華特典】AFFINGER6(アフィンガー6)の豪華13特典付き購入方法【レビュー】
＼ 月間1300万PVのプロが解説 ／
↓検索順位1位を取りまくったノウハウを4万文字で解説(無料)↓
>> 【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！
目次
余分なCSSを削除して「使用していないCSSの削減」を改善しよう！
PageSpeed Insightsの「使用していないCSSの削減」
「使用していないCSSの削減」とはそもそも
ということです。
例えば、CSSコードが1000行もあるのに実際は必要なコードがそのうちの300行くらいしかない場合、残りの700行を読み込んでいる時間の分だけサイトが無駄に遅くなります。
これが「使用していないCSSの削減」の意味と原因です。
WordPressテーマでは、複雑なカスタマイズができたりいろんなデザインに対応するために、あえて大量なCSSコードが用意されていることも多いので、
自分で何か対策をしないとかなり無駄にたくさんのコードを読み込むことになってしまいます。
>> 【WordPress】使用していないJavaScriptの削除の簡単・本格的な改善方法【速度改善】
>> WordPressのレンダリングを妨げるリソースの除外の簡単な改善方法｜JSとCSSを非同期で解決
「使用していないCSSの削減」の改善方法の概要
「使用していないCSSの削減」を改善するアドバイスとして、PageSpeed Insightsの上の画像の箇所には以下のように記載されています。
スタイルシートから使用していないルールを削除して、スクロールせずに見える範囲のコンテンツで使用されていない CSS の読み込みを遅らせると、ネットワークの通信量を減らすことができます。
PageSpeed Insights
ここにも記載されているとおり、「使用していないCSSの削減」を改善するには以下の2ステップで改善できます。
- サイトで使われていない不要なCSSコードを特定する
- その不要なCSSコードを、CSSファイルから取り除く
不要なCSSコードを特定してCSSファイルから削除するには以下のツールを使います。
これらのツールはボタン1つで不要なCSSを自動で抽出してくれたり自動で削除もしてくれるとっても便利なツールです。
上記のツールを使って「使用していないCSSの削減」を改善する方法を、それぞれ順番に解説します。
「Unused CSS」で使用していないCSSセレクタを特定する
無料ツール「Unused CSS」について
まずはUnused CSSで「使用していないCSSの削減」を改善する方法を解説します。
>> Unused CSS
Unused CSSは上の画像のようなWeb上のツールで、
自分のWordPressサイトのトップページのURLを入力してボタンをクリックするだけで、サイトで使われていないCSSのセレクタを一覧で抽出してくれます。
自動で削除する機能はないのでCSSファイルから削除する作業は自分で行う必要がありますが、
- トップページのURLを入力するだけで簡単に使える
- CSSのコード全てではなくセレクタを一覧で抽出してくれるので見やすい
というメリットがあります。
「Unused CSS」の注意点
一方で、Unused CSSを使うには以下の3つの注意点があります。
- 「Unused CSS」はまだテスト中のツールであり、場合によってはうまく動作しない可能性もあります。
- 「:focus」や「:hover」などの疑似クラスは、使われている場合でも「不要なCSSセレクタ」と誤認識される可能性があります。
- URLを入力するだけで不要なCSSセレクタを一覧で抽出してくるものの、削除する作業は自分で行う必要があります。
Unused CSSを使う際には上記に注意して使いましょう。
「Unused CSS」の使い方
それでは、ここからは実際にUnused CSSで「使用していないCSSの削減」を改善する方法を解説します。
以下の3ステップで進めます。
- Unused CSSにアクセスして、自分のサイトのURLを入力し抽出を実行する
- 使われていないCSSのセレクタの一覧を確認する
- CSSのファイルを編集して、使われていないCSSを削除する
手順①Unused CSSにアクセスして、自分のサイトのURLを入力し抽出を実行する
まずはUnused CSSにアクセスし、上の画像のように自分のサイトのトップページのURLを入力します。
入力したら「CRAWL FOR UNUSED CSS」ボタンをクリックして、使われていないCSSの抽出を実行します。
使われていないCSSの抽出は少し時間がかかります。
手順②使われていないCSSのセレクタの一覧を確認する
使われていないCSSセレクタの抽出が完了すると、上記の背景色が灰色の箇所に結果が表示されます。
上記のように表示された場合は、以下の2つのどちらかです。
- 使われていないCSSがない(全て必要なCSSなので、削除しなくてよい)
- エラーでうまく読み込めていない
サイトによってはこのようにうまく抽出できない場合もあるので、何度か試してもうまく抽出できない場合は、『「UnCSS Online!」で使用していないCSSを自動的に削除する』の見出しを参考に、もう1つのツール「UnCSS Online!」を使いましょう。
スキャンが完了して、使われていないCSSのセレクタを抽出できた場合はこのように一覧で表示されます。
セレクタなのでidは「#」、classには「.」を付けて抽出されます。
手順③CSSのファイルを編集して、使われていないCSSを削除する
手順②で使われていないCSSセレクタを確認したら、次はCSSファイルからそれらのセレクタのCSSを削除します。
CSSファイルを編集する前には以下の記事を参考にWordPressのバックアップを取っておきましょう。
>> 【2021年最新】BackWPupの正しい設定方法と使い方：自動バックアッププラグイン【WordPress】
CSSファイルの編集はWordPressの管理画面から行うことができます。
「外観」→「テーマエディター」をクリックします。
画面右側のファイル一覧の箇所の「style.css」をクリックします。
使用しているWordPressテーマの「style.css」ファイルの編集画面が開かれました。
この画面で、手順②で抽出した不要なセレクタのCSSコードを削除しましょう。
バックアップを取っているので後から簡単に戻すこともできますが、取り除いたCSSコードだけ別ファイルにまとめてローカルで管理しておくのもおすすめです。
CSSファイルの編集が完了したら、「ファイルを更新」をクリックして変更を保存すれば完了です。
これでWordPressテーマのメインになるCSSファイルから、「使用していないCSSの削減」をすることが完了です。
WordPressテーマのCSSの次は、プラグインのCSSファイルを編集する必要があります。
インストールしているプラグインごとにそれぞれCSSファイルが用意されているので、不要なセレクタがある場合は以下の手順でCSSファイルから削除しておきましょう。
プラグインのCSSを編集するには、「プラグイン」→「プラグインエディター」をクリックします。
画面右上の「編集するプラグインを選択」の項目で、CSSを編集したいプラグインを選択して「選択」をクリックします。
ファイルの一覧から、編集したいCSSファイルをクリックして編集画面を開きます。
あとはテーマのCSSファイルの編集と同じように、不要なCSSコードを削除して「ファイルを更新」で変更を保存すれば完了です。
サイトのデザインが崩れていないか確認して、PageSpeed Insightsで「使用していない
CSSの削減」が改善されているか確認してみましょう。
「UnCSS Online!」で使用していないCSSを自動的に削除する
無料ツール「UnCSS Online!」について
次は「UnCSS Online!」という無料ツールを使って、「使用していないCSSの削減」を改善する方法を解説します。
>> UnCSS Online!
「UnCSS Online!」とは、ページのソースコード(HTML)とCSSを入力してボタンをクリックするだけで、不要なCSSを削除して必要なコードだけ綺麗に残ったCSSを自動で生成してくれるツールです。
先程のツール「Unused CSS」では、不要なCSSの特定はしてくれても削除は自分で行う必要がありましたが、
このツール「UnCSS Online!」では
- 自動でCSSを削除して綺麗なCSSを生成してくれるので、コピーしてCSSファイルに貼り付けるだけで簡単に使える
というメリットがあります。
無料ツール「UnCSS Online!」の注意点
「UnCSS Online!」を使用する際には以下の2つの注意点があります。
- 使用していないCSSのみが綺麗に削除されているとは保証できません。万が一に備えてBackWPupでバックアップは用意しておきましょう。
- 調べるCSSコードの文法にミスがあると正常に動作しません。CSS Validation ServiceなどのCSSチェッカーを使って、文法に間違いがないか確認してから使用しましょう。
これらに注意して「UnCSS Online!」で使用していないCSSの削減をしていきましょう。
「UnCSS Online!」の使い方
それでは「UnCSS Online!」を使って「使用していないCSSの削減」を改善する方法の手順を解説します。
以下の4つのステップで行います。
- 調べるページのソースコード(HTML)を用意する
- サイトのCSSのコードを用意する
- 「UnCSS Online!」で不要なCSSを削除する
- CSSファイルのコードを書き換える
手順①調べるページのソースコード(HTML)を用意する
「UnCSS Online!」では上記の画面の通り、以下の2つを元に余分なCSSを削除します。
- ページのソースコード(HTML)
- CSSコード
よってまずは、以下の手順でページのソースコードを用意します。
ソースコードを取得したいページを開きます。
画面上で右クリックして「ページのソースを表示」をクリックします。
画像のようにページのソースコードがすべて表示された画面が開かれます。
手順②サイトのCSSのコードを用意する
次はCSSを用意します。
WordPressの管理画面で「外観」→「テーマエディター」をクリックします。
画面右側の「style.css」をクリックして、CSSファイルの編集画面を開きます。
使用しているWordPressテーマのCSSファイルであるstyle.cssの編集画面が開かれるので、コードを全てコピーします。
手順③「UnCSS Online!」で不要なCSSを削除する
「UnCSS Online!」にアクセスし、手順①②で用意したHTMLとCSSをそれぞれ貼り付けます。
左にHTML、右にCSSを貼り付けたら「UNCSS MY STYLES」をクリックします。
「Your shortened CSS」の欄に、余分なCSSが削除されて残った綺麗なCSSが生成されるので全てコピーします。
手順④CSSファイルのコードを書き換える
あとはstyle.cssのコードを手順③でコピーしたCSSに書き換えれば完了です。
style.cssを書き換える前には、万が一に備えてWordPressのバックアップを取っておきましょう。
>> 【2021年最新】BackWPupの正しい設定方法と使い方：自動バックアッププラグイン【WordPress】
手順②と同じように、「外観」→「テーマエディター」からstyle.cssを開き、コードを全て削除して手順③のコードを貼り付けましょう。
コードを貼り付けたら、「ファイルを更新」をクリックしてCSSの変更を保存すれば「使用していないCSSの削減」が完了です。
これで無駄なCSSを取り除くことができたので、デザインが崩れていないか確認してからPageSpeed Insightsで「使用していないCSSの削減」が改善されているか確認してみましょう。
「使用していないCSSの削減」をさらに改善して高速化する3つの方法
「使用していないCSSの削減」はここまでで改善されているはずですが、CSSに関連してさらにWordPressを高速化する3つの方法を紹介します。
方法①使わないCSSファイルを読み込まないようにする
「Unused CSS」や「UnCSS Online!」で不要なCSSの削除はしましたが、ページによっては不要なCSSもまだ残っています。
例えばお問い合わせフォームを作成するためのプラグイン「Contact Form 7」のCSSは、お問い合わせページでは必要ですがそれ以外のページでは不要です。
よって
などのようにページごとにCSSを最適化すると、さらにサイトを高速化することができます。
以下の記事の「改善方法②：使用していないJavaScript・CSSをファイルごと関数でスキップする」の見出しで解説しています。
>> 【WordPress】使用していないJavaScriptの削除の簡単・本格的な改善方法【速度改善】
方法②CSSファイルの読み込みを非同期にする
通常の場合、CSSを読み込んでいる間はHTMLの読み込みが中断され、そのせいでページの読み込みに時間がかかります。
ですが非同期読み込みという方法を使うことで、CSSとHTMLを同時に読み込むことができ、サイトを高速化できます。
以下の記事の「【Step2】CSSを先読み(preload)する」の見出しでやり方を解説しています。
>> WordPressのレンダリングを妨げるリソースの除外の簡単な改善方法｜JSとCSSを非同期で解決
方法③CSSファイルのキャッシュを用意する
キャッシュを使うことで毎回CSSファイルを読み込む必要がなくなり、その分だけサイトを高速化することができます。
以下の記事を参考に自分のサイトに最適なキャッシュプラグインを選んで設定しておきましょう。
>> 【2021年最新】WordPressのキャッシュプラグインおすすめ8選【比較表付き】
「使用していないCSSの削減」の改善はこれで完璧！
サイトで使っていない余分なCSSを削除して「使用していないCSSの削減」を改善する方法を解説しました。
「使用していないCSSの削減」は他の項目に比べると、プラグイン1つで簡単に設定できるわけではないのでややこしいかもしれません。
ですが今回紹介したツールを使えば簡単に解決できるので、是非試してみてください。
PageSpeed Insightsの他の項目の改善方法はそれぞれ以下の記事で解説しています。
サイト高速化の方法はそれぞれ以下の記事でも解説してます。
公式LINE限定で読めるパスワード付きの記事でがっつり解説しています。
LINE参加者の声
400名が以上参加中！無料で読めます♪
＼ 最短で収益化 ／
