Googleが提供しているサイト診断ツール「PageSpeed Insights」で改善できる項目に「使用していないCSSの削減」が出る時の対処法です。
Chromeブラウザの「Show Coverage」という機能を使うと、読み込んだページで使用しているCSS、使用していないCSSの両方を確認することが出来ます。
自サイトで現在使用しておらず、今後も使う予定が無いCSSは読み込むだけ無駄ですので、削除すればサイトを少し高速化できます。
この記事では使用していないCSSの確認方法のみを記述しています。
同様の方法でJSファイルについても確認が可能です。
この記事の目次
使用していないCSSの確認方法
使用していないCSSの削減
スタイルシートから使用していないルールを削除して、スクロールせずに見える範囲のコンテンツで使用されていないCSSの読み込みを遅らせると、ネットワークの通信量を減らすことが出来ます。
PageSpeed Insightsでの当サイト記事分析結果
Wordpressのテーマのような、所謂テンプレートを使っているサイトだとほぼ確実にこの項目が出ます。
人気テーマにはランキングやスライダーといった様々な機能が用意されています。
当然、テーマで使える全ての機能に対して装飾用のスタイルシートが用意されているわけですが、自分のサイトでそういった機能を使用しない場合は不要なCSSです。
Wordpressのテーマは大衆受けするように作られていますので、より高速化するのであれば自分のサイトで使用しているCSSのみを読み込むようにするのがベストです。
細かい内容ですが、ページの高速化はSEOにも影響しますので大切です。
ポイント
「スクロールせずに見える範囲のコンテンツで使用されていないCSSの読み込みを遅らせる」というのはCSSの遅延読み込みですので、今回のCSSの削減とは別の作業内容です。
ChromeのCoverage機能で確認する
PageSpeed Insightsで提案される内容は基本的にChromeで解決できます。
Chromeのデベロッパーツールには、使用されているCSS、及び使用されていないCSSを確認できる機能が標準で付いています。
基本的な流れは以下です。
- 確認したいページで開発者ツールを起動する
- 「Sources」タブでCtrl＋Shift＋Pを押す
- 「Show Coverage」を選んで起動する
- ページリロード後、CSSを確認する
- 使用していないCSSを削除する
使い方はとっても簡単です！
順番に画像多めで解説します。
デベロッパーツールの起動
CSSを確認したいページをChromeで開き、キーボードの
［Ctrl］＋［Shift］＋［I］
を押します。
Chromeデベロッパーツールの起動
または画像のように、右クリック→検証でもOKです。
Show Coverageの起動
デベロッパーツールが立ち上がったら、まずSourcesタブに移動します。
SourcesタブでCtrl+Shift+P
続いてRun Commandを実行するために
キーボードの［Ctrl］＋［Shift］＋［P］を押します。
Drawer Show Coverageを起動する
ツールの中から「Drawer Show Coverage」をクリックします。
これでページで使用されているCSSを確認できるツールが立ち上がります。
「Coverage」はデベロッパーツールのメニューからも起動可能
「Coverage」はデベロッパーツールのメニューからも起動できることを後日知ったので追記です。ショートカットを使うよりもこの方が分かり易いと思います。
「Coverage」はデベロッパーツールのメニュー（）からも起動可能
「Coverage」はデベロッパーツールのメニュー（）から
More tools（その他のツール） ＞ Coverage（カバレッジ）
からも起動することが可能です。
不要なCSSを確認する
Coverageが起動したら、ページをリロードします。
CSSを確認したいページでリロードする
リロードボタンをクリックすればページ内のCSSが読み込まれます。
不要なCSSやJSの確認ができる
リロードしたページのCSSとJSが表示されます。
この画面でCSSを使っているか、使っていないかが一目で分かります。
ポイント
- Unused Bytes
使用されていないCSSの容量と割合。 - Usage Visualization（画像黒枠）
赤いバーが使用していないCSS。青いバーが使用しているCSSです。
読み込まれたファイル名をクリックするとCSSの記述が確認できます。
（画像緑枠の部分が赤色で不要なCSSです。青色はそのページで使用中。）
CSS削減作業と注意点など
あとは該当CSSファイルにFTPソフトやcPanelのファイルマネージャーなどでアクセスし、不要なCSSを削っていけばOKです。
出来る限り赤色を消して青色のみを残していく感じですね。
※失敗した時のためにバックアップは取っておくこと。
ポイント
サイトでキャッシュを使っている場合、CSSが１つに纏められていることが一般的ですので、一度キャッシュを無効化すると作業しやすくなります。
注意ポイント
不要なCSSを削減する際は、
- 他のページで使用していないか？
- 今後使用する可能性は無いか？
を確認することが必須です。
不要と思われるCSSを削除し、上書き保存した後はキャッシュクリアし、全てのページでレイアウトが崩れていないか確認しておきましょう。
画像の拡大表示など、アクションを起こして初めて使用されるCSSもあるのでその点も注意です。
使いそうな機能のCSSを残しておくか削除してしまうかは自由です。
僕は泥沼化しそうなので便利そうな機能のCSSスタイルの記述は残しました。
Google FontsのCSS使用率について
最後にGoogleフォントについてです。
Google FontsのCSS未使用率が100％になるのは仕様らしいです。
ページ内でGoogleフォントを使用していてもCoverageの画面では使用されていないことになる？
自サーバーに必要なフォントだけを設置して読み込むのもアリかなーと思って調べていたのですが、Google曰くCDNで読み込む方法は既に十分に高速らしいです…
真っ赤なバーがとても気になりますが、CDNで使用している以上削りようがないので諦めました。
まとめ
ChromeのCoverage機能を使って不要なCSSを確認する方法でした。
同様にJSファイルも確認することが出来るのですが、そこまで容量が大きくないので詳しくない方はうかつに手を出さない方が良いかと思います。
JSは作業内容と削減できるサイズが割に合いません・ｗ・
今回「使用していないCSSの削減」で合格を取ってみましたが、感じとしては結構CSSを取り除かないと合格になりませんでした。
記事ごとに使用しているパーツやレイアウトが大幅に異なるようなサイト様の場合は限界があると思います。
PageSpeed Insightsにあるようにこの内容を行ってもスコアは変わりません。
当サイトは技術ブログとして高速化を重視していますが、数メガバイトの軽量化を追いかけるくらいなら記事を執筆する方が良いかもしれません。
関連記事
CSSのどの部分を削除するのかはサイト環境や使用しているテーマによって千差万別なので、うまく書けませんでした…
Wordpressですが、プチ軽量化は他にもあるので是非チェックして下さい・ｗ・
関連記事
- テーマのスタイルシートをカスタマイズする方法↓
[WP]親テーマのCSSを編集＆削除して軽量化！親テーマCSSの読み込み停止(無効化)とオリジナルテーマの新規読み込み。 - 新エディター「Gutenberg」を全く使っていない方向け↓
ブロックエディター用CSS「block-library」の読み込み停止でWP軽量化！wp-blockはグーデンベルグ用。 - ソースコード用プラグイン「Enlighter」を使ている方はチェック↓
WPプラグインEnlighterでCSSを必要な時だけ読み込む。［DRI設定］
