PageSpeed Insightsの「使用していないCSS」を削除する方法【WordPress対応】
Googleが提供する無料のWebページ診断ツール「PageSpeed Insights」で診断を行うと、ページ読み込み速度の改善につながるヒントが表示されます。その中のひとつが「使用していない CSS を削除してください」です。この記事では、この項目の意味と、具体的な改善方法を解説します。
「使用していない CSS を削除してください」とは？
サイトを長期間運営していると、記事の追加やデザイン変更のたびにCSSのコードが積み重なっていきます。特定のページだけで使うスタイルを追加したり、レイアウト変更の際に古いコードをそのまま残してしまったりすることで、CSSファイルが肥大化しやすくなります。
見た目の表示には影響しなくても、ユーザーがページを開く際にはCSSファイルも必ず読み込まれます。不要なCSSが多いほど読み込みに時間がかかり、ページの表示速度が低下します。これがSEOや直帰率にも悪影響を与えるため、PageSpeed Insightsは「使用していないCSSを削除してください」と指摘しています。
「使用していない CSS を削除してください」の改善方法
テスト環境でCSSを確認・整理する
稼働中のサイトでCSSを直接削除するのはリスクがあります。誤って必要なスタイルを消してしまうと、レイアウトが崩れて公開中のページに影響が出てしまいます。
安全に作業するためには、サーバー上にテスト用のフォルダを作成し、そこにサイトのデータを丸ごとコピーしてから確認・削除を行うのが基本的な手順です。テスト環境で問題がないことを確認してから本番環境に反映させれば、公開中のサイトへの影響を避けられます。
WordPressの場合はローカル環境（Local・XAMPP など）を使う方法が一般的です。本番サイトのデータをローカルに複製してCSSを整理し、確認後に本番へアップするという流れが安全です。
CSSファイルをページ・用途ごとに分けて管理する
今後の肥大化を防ぐには、CSSを用途ごとに複数のファイルに分けて管理するのが効果的です。全ページ共通のスタイル（ヘッダー・フッター・基本レイアウトなど）は共通ファイルにまとめ、特定のページだけで使うスタイルはそのページ専用のCSSファイルに分けて読み込むようにします。
こうすることで、各ページで読み込むCSSの量を最小限に抑えられるため、表示速度の改善につながります。また、どのCSSがどこで使われているか把握しやすくなり、将来的なメンテナンスも楽になります。
WordPressテーマ・プラグインの不要CSSを対処する
WordPressサイトの場合、テーマやプラグインが自動で読み込むCSSが原因で「使用していないCSS」が大量に検出されるケースがよくあります。この場合、個人でCSSファイルを直接削除することは難しいため、以下の対処が有効です。
- 使っていないプラグインを無効化・削除してCSSの読み込み自体をなくす
- 「Asset CleanUp」などのプラグインを使って、不要なCSSの読み込みをページごとに制御する
- 表示速度に優れた軽量テーマに乗り換えを検討する
なお、速度に強いレンタルサーバーへの移行もページ全体のパフォーマンス改善に有効です。
PageSpeed InsightsでCSSの改善状況を確認しよう
CSSを整理した後は、PageSpeed InsightsでURLを再分析して改善の効果を確認しましょう。「使用していないCSSを削除してください」の項目が消えたり、推定節約時間が短縮されたりしていれば、対策が効いている証拠です。
不要なCSSの削除は地味な作業ですが、積み重ねることでページ表示速度の向上・SEO改善・ユーザー離脱防止につながります。まずはPageSpeed Insightsで現状を把握することから始めてみてください。
