【使用していないCSSの削減】Chromeで不要なCSSを確認する方法。使わないスタイルは読み込むだけ無駄!

2021-07-15

使用していないCSSの削減_eyecatch

Googleが提供しているサイト診断ツール「PageSpeed Insights」で改善できる項目に「使用していないCSSの削減」が出る時の対処法です。

Chromeブラウザの「Show Coverage」という機能を使うと、読み込んだページで使用しているCSS、使用していないCSSの両方を確認することが出来ます。

自サイトで現在使用しておらず、今後も使う予定が無いCSSは読み込むだけ無駄ですので、削除すればサイトを少し高速化できます。

この記事では使用していないCSSの確認方法のみを記述しています。
同様の方法でJSファイルについても確認が可能です。

使用していないCSSの確認方法

使用していないCSSの削減
スタイルシートから使用していないルールを削除して、スクロールせずに見える範囲のコンテンツで使用されていないCSSの読み込みを遅らせると、ネットワークの通信量を減らすことが出来ます。

使用していないCSSの削減_001

PageSpeed Insightsでの当サイト記事分析結果

WordPressのテーマのような、所謂テンプレートを使っているサイトだとほぼ確実にこの項目が出ます。

人気テーマにはランキングやスライダーといった様々な機能が用意されています。
当然、テーマで使える全ての機能に対して装飾用のスタイルシートが用意されているわけですが、自分のサイトでそういった機能を使用しない場合は不要なCSSです。

WordPressのテーマは大衆受けするように作られていますので、より高速化するのであれば自分のサイトで使用しているCSSのみを読み込むようにするのがベストです。

細かい内容ですが、ページの高速化はSEOにも影響しますので大切です。

ポイント

「スクロールせずに見える範囲のコンテンツで使用されていないCSSの読み込みを遅らせる」というのはCSSの遅延読み込みですので、今回のCSSの削減とは別の作業内容です。

ChromeのCoverage機能で確認する

PageSpeed Insightsで提案される内容は基本的にChromeで解決できます。

Chromeのデベロッパーツールには、使用されているCSS、及び使用されていないCSSを確認できる機能が標準で付いています。

基本的な流れは以下です。

1.確認したいページで開発者ツールを起動する。
2.「Sources」タブでCtrl+Shift+Pを押す。
3.「Show Coverage」を選んで起動する。
4.ページリロード後、CSSを確認する。

使い方はとっても簡単です!
順番に画像多めで解説します。

デベロッパーツールの起動

CSSを確認したいページをChromeで開き、

キーボードの[Ctrl]+[Shift]+[I]を押す。

使用していないCSSの削減_002または画像のように、右クリック→検証でもOKです。

Show Coberageの起動

デベロッパーツールが立ち上がったら、まずSourcesタブに移動します。

使用していないCSSの削減_003続いてRun Commandを実行するために

キーボードの[Ctrl]+[Shift]+[P]を押します。
開かない場合は別の[Ctrl]と[Shift]で試してみて下さい。

僕の場合、向かって左側のキーの組み合わせではダメでした。
キーボード右側の[Ctrl]+[Shift]を押せば上手く開きました。

使用していないCSSの削減_004ツールの中から「Drawer Show Coverage」をクリック。
これでページで使用されているCSSを確認できるツールが立ち上がります。

不要なCSSを確認する

Coverageが起動したら、ページをリロードします。

使用していないCSSの削減_005リロードボタンをクリックすればページ内のCSSが読み込まれます。

使用していないCSSの削減_006リロードしたページのCSSとJSが表示されます。
この画面でCSSを使っているか、使っていないかが一目で分かります。

ポイント

・Unused Bytes
使用されていないCSSの容量と割合。
・Usage Visualization(画像黒枠)
赤いバーが使用していないCSS。青いバーが使用しているCSSです。

読み込まれたファイル名をクリックするとCSSの記述が確認できます。
(画像緑枠の部分が赤色で不要なCSSです。青色はそのページで使用中。)

CSS削減作業と注意点など

あとは該当CSSファイルにFTPソフトやcPanelのファイルマネージャーなどでアクセスし、不要なCSSを削っていけばOKです。
出来る限り赤色を消して青色のみを残していく感じですね。

※失敗した時のためにバックアップは取っておくこと。

ポイント

サイトでキャッシュを使っている場合、CSSが1つに纏められていることが一般的ですので、一度キャッシュを無効化すると作業しやすくなります。

注意ポイント

CSSを削除する際は
・他のページで使用していないか?
・今後使用する可能性は無いか?
を確認することが必須です。

不要と思われるCSSを削除し、上書き保存した後はキャッシュクリアし、全てのページでレイアウトが崩れていないか確認しておきましょう。

画像の拡大表示など、アクションを起こして初めて使用されるCSSもあるのでその点も注意です。

使いそうな機能のCSSを残しておくか削除してしまうかは自由です。
僕は泥沼化しそうなので便利そうな機能のCSSスタイルの記述は残しました。

Google FontsのCSS使用率について

最後にGoogleフォントについてです。

使用していないCSSの削減_007

Google FontsのCSS未使用率が100%になるのは仕様らしいです。
ページ内でGoogleフォントを使用していてもCoverageの画面では使用されていないことになる?

自サーバーに必要なフォントだけを設置して読み込むのもアリかなーと思って調べていたのですが、Google曰くCDNで読み込む方法は既に十分に高速らしいです…

真っ赤なバーがとても気になりますが、CDNで使用している以上削りようがないので諦めました。

この記事によく似た記事

CSSのどの部分を削除するのかはサイト環境や使用しているテーマによって千差万別なので、うまく書けませんでした…

WordPressですが、プチ軽量化は他にもあるので是非チェックして下さい・w・

まとめ

ChromeのCoverage機能を使って不要なCSSを確認する方法でした。

同様にJSファイルも確認することが出来るのですが、そこまで容量が大きくないので詳しくない方はうかつに手を出さない方が良いかと思います。
JSは作業内容と削減できるサイズが割に合いません・w・

今回「使用していないCSSの削減」で合格を取ってみましたが、感じとしては結構CSSを取り除かないと合格になりませんでした。

記事ごとに使用しているパーツやレイアウトが大幅に異なるようなサイト様の場合は限界があると思います。

PageSpeed Insightsにあるようにこの内容を行ってもスコアは変わりません。
当サイトは技術ブログとして高速化に趣を置いているのですが、数メガバイトの軽量化を追いかけるくらいなら記事を執筆する方が良いかもしれません。

んー久しぶりに執筆したけど文章力のなさを痛感w

-SEO
-,

© 2021 ソロ学