Lighthouseの「Remove Unused CSS」を解決する
Lighthouseの「Remove Unused CSS」警告を解決し、ページを高速化する方法を学びます
使われていないCSSの削減：要約
Lighthouseの「使われていないCSSの削減」警告は、現時点でページに使用されていないCSSルールが多すぎる場合に表示されます。これらの未使用のCSSルールにより、ページの読み込みが必要以上に遅くなります。
なぜでしょうか。第一に、CSSファイルが必要以上に大きくなり、不要なネットワークトラフィックが発生するためです。第二に、より多くの計算が必要になり、CSSオブジェクトの構築と適用に時間がかかるためです。
未使用 of CSSの削除、デバイスごとのCSSファイルの分割、または異なるCSS戦略の採用によって、この警告を解決できます。この記事では、WebサイトでのLighthouseの「使われていないCSS of 削減」警告の解決方法について詳しく解説します。
最終レビュー：Arjen Karel（2026年2月）
未使用のCSSとは？
未使用のCSSとは、ウェブページ上のどこにも使用されていないCSS宣言のことです。 CSSの一部が使用されないのは、ごく普通のことです。たとえば、デスクトップやモバイルなど、他のデバイス向けに記述されたCSS宣言があるためです。あるいは、スタイルシートに記述されている要素（ボタンなど）が、その特定のページで使用されていないことも理由に挙げられます。 未使用のCSSは、Bootstrapなどのフレームワークを使用している場合によく発生します。こうしたフレームワークでは、実際に使用するよりも多くの要素がデフォルトでCSSに定義されているためです。また、ページのデザインを変更した際に、古いCSS要素を削除し忘れた場合にも発生します。
なぜ未使用のCSSはページ速度に悪影響を与えるのか？
CSSはページの読み込みを遅くします。ページが読み込まれる際、ブラウザはまずページのHTMLを取得し、それをDOMノードに変換します。その後、ブラウザはすべてのスタイルシートを取得します。これらのCSSファイルに含まれるスタイルも、別の形式であるCSSOMへと変換されます。DOMとCSSOMが組み合わされてレンダリングツリーが構築されます。このレンダリングツリーが構築されて初めて、ブラウザは最初のコンテンツの描画を開始します。
この仕組みがあるため、CSSファイルは常にウェブページのレンダリングをブロックします。CSSファイルが必要以上に大きいと、ダウンロードに時間がかかり、最初の遅延の原因となります。CSSファイルに未使用のCSSが含まれていると、レンダリングツリーの構築に余計な時間がかかります。
モバイルにおけるCSS送信量の中央値は79 KBですが、2024 Web Almanacによると、そのうちの52 KBは現在のページで未使用です。これは66%のCSSが無駄になっていることを意味します。90パーセンタイルでは、未使用のCSSは212 KBに達します。さらに、全ページの85%がrender-blocking resourcesの監査で不合格となっており、その主な原因はCSSです。
未使用のCSSは、First Contentful Paint (FCP)やLargest Contentful Paint (LCP)を直接遅延させます。ブラウザはすべてのCSSがダウンロードおよび解析されるまで描画を開始しないためです。CSSの負荷が高いページでは、スタイルシートの肥大化によってユーザー操作時のスタイル再計算コストが増大し、INPにも影響を及ぼします。
未使用のCSSを手動で見つける方法
Google Chromeでは、Code Coverage（コードカバレッジ）で未使用のCSSを確認できます。Code CoverageはChromeのDevToolsの一部です。DevToolsは、すべてのChromeブラウザに標準で組み込まれているツール群です。
まず、ショートカットのCtrl-Shift-JでDevToolsを開きます。次に、Ctrl-Shift-Pを入力してコマンドメニューを開きます。そこで「coverage」と入力します。カバレッジを選択し、ページを再読み込みしてください。これで、ページで読み込まれ、使用されているCSSとJavaScriptファイルの一覧が表示されます。また、ファイルサイズや、実際にコードがどの程度使用されているかも確認できます。 
CSSファイルをクリックすると、現在のページでどのCSSルールが使用中か（緑色）、どのルールが未使用か（赤色）が確認できます。
「使われていないCSSの削減」警告の解決方法
Lighthouseの「使われていないCSSの削減」警告を解決する方法はいくつかあります。何らかの理由で警告の解決が難しい場合は、CSSの配信を最適化することで、未使用のCSSがページの読み込み時間に与える影響を抑えることができます。以下に、未使用のCSSに対処するための選択肢を簡単に説明します。
1. 手動で未使用のCSSを削除する
最も論理的で最善の方法であると同時に、最も手間がかかる方法が、手動での未使用CSSの削除です。手順はシンプルです。
- 元のCSSファイルをバックアップします。CSSを削除しすぎる可能性があるためです。
- Google ChromeでCode Coverage（カバレッジ）タブを開き、CSSファイルごとに不要な宣言を確認します。
- サーバー上（またはローカル）のCSSファイルを開き、各未使用CSS宣言を確認します。それらが削除可能か判断してください。ただし、注意が必要です。あるページでは未使用であっても、別のページで必要になる場合があります。それは自身で判断する必要があります。
- CSS宣言ごとに、CSS内で重複していないか確認します。重複しているCSSも未使用としてフラグが立てられます。
- 各CSSルールでショートハンド（短縮記法）が使えないか確認します。CSSを短縮できる場合は、短縮してください。
2. CSSを複数のファイルに分割する
CSSルールの数をすばやく削減する簡単な方法があります。デバイスに必要なスタイルのみを読み込むようにするのです。ページはモバイルで閲覧されることが多いため、モバイルデバイスでデスクトップや印刷用のスタイルをダウンロードする必要はありません。これらのスタイルをダウンロードしないことで時間を節約でき、Lighthouseのクリティカルリクエストチェーンを短縮できます。
これを実現するには、media属性を使用します。media属性を使用すると、現在使用しているメディアにmedia属性が一致する場合にのみスタイルシートが適用されるようになります。
<link href="all.css" rel="stylesheet" media="all">
<link href="print.css" rel="stylesheet" media="print">
<link href="desktop.css" rel="stylesheet"
media="screen and (min-device-width: 1024px)"> このmedia属性のテクニックは、レンダリングをブロックせずに非クリティカルなCSSを読み込むためにも使用できます。
<link rel="stylesheet" href="non-critical.css" media="print"
onload="this.onload=null;this.removeAttribute('media');">
<noscript><link rel="stylesheet" href="non-critical.css"></noscript> これにより、最初は media="print" と指定して render blocking を回避しながらCSSを読み込み、読み込み完了後に media="all" に切り替えます。
3. 自動CSSクリーンアップツールを使用する
CSSファイルを自動的にクリーンアップし、未使用のCSSへの参照を削除してくれるスマートなツールがいくつかあります。 こうしたツールは非常に便利ですが、完璧ではありません。必要なCSS宣言まで削除してしまうことがあるため、慎重に使用し、必ず自分自身でCSSを確認してください。 最も優れたCSSクリーンアップツールはPurgeCSSです。PurgeCSSはNode.jsで動作し、Webpack、PostCSS、Viteと統合できます。コンテンツエクストラクターを使用してHTML、JavaScript、テンプレートファイル内のクラス名をスキャンし、見つからなかったCSSセレクターを削除します。また、手軽に分析したい場合はPurifyCSS onlineも試せます。
4. Critical CSS
Critical CSSとは、ウェブサイトの viewport（表示領域）に必要なCSSルールの集合です。つまり、ページの目に見える部分をレンダリングするために最低限必要となるCSSのことです。
ページからCritical CSSを抽出できるツールはいくつかあります。抽出されたCritical CSSはページのhead内にインラインで配置され、元のCSSファイルは（ブラウザが後で読み込めるように）非同期で読み込まれます。
これは未使用CSSの問題を完全に解決するわけではありません。最終的には未使用のCSSも読み込まれて解析されますが、最初のレンダリング段階でブラウザの処理を妨げることはなくなります。
Critical CSSの検出と抽出に最も広く使われているツールは、Node.jsスクリプトのCriticalです。また、Critical Path CSS Generatorなどのオンラインツールもあります。
5. CSSファイルの圧縮
前述の通り、未使用のCSSは2つの方法でページ速度を低下させます。1つ目は、CSSファイルが肥大化し、ダウンロードにかかる時間が増えることです。
この問題は、CSSファイルを圧縮（Minify）してファイルサイズを削減することで対策できます。これにはCSSミニファイアを使用します。CSSミニファイアは、スペース、コメント、書式設定を削除することでCSSファイルを縮小します。さらに、変数やCSSコードを書き換えて、転送に必要なバイト数を削減することも可能です。
有名なCSS圧縮ツールにcss-minifyがあります。コマンドラインで css-minify -f filename コマンドを実行すれば、すべてのCSSファイルを圧縮できます。また、cssminifier.comなどのオンラインCSS圧縮ツールも多数存在します。
6. CSSフレームワークを再コンパイルする
Bootstrap CSSなどのCSSフレームワークを使用していますか？これらはサイト全体をスタイリングできるフレームワークですが、非常に多機能であるため、その大部分は一度も使用されない可能性があります。
幸いなことに、BootstrapなどのCSSフレームワークの制作者はこれを考慮に入れています。これらのフレームワークはSASSで記述されています。SASSはCSSに非常によく似た言語で、変数や関数を使用できる複数の小さなSASSファイルで構成されています。そのため、少しの知識があれば、フレームワークをカスタマイズして最適化することが容易です。使用しない部分を除外し、最終的な1つのCSSファイルに簡単にコンパイルできます。
また、標準のCDNからCSSフレームワークをそのまま読み込まないようにしてください。フレームワークをダウンロードし、使用するCSSクラスのみを含めるようにSASSでコンパイルしてください。
7. 異なるCSS戦略を検討する
本当に読み込み速度を高速化したいのであれば、CSSの設計戦略そのものを見直すのも一案です。具体的な方法はサイトによって異なりますが、解決へのアプローチは複数存在します。
私たちのサイトを例に説明します。当サイトでは、各ページで実際に必要なCSSのみを読み込んでいます。必要なCSSクラスのみが、CMSによって自動的にインポートされます。また、CSSをインライン（ページのhead内）に配置しています。これにより、追加のネットワークリクエストを排除できます。この解決策は非常に高速であり、メンテナンスも容易です。
熱心な読者なら「CSSのキャッシュはどうなるのか？最終的なCSSファイルがキャッシュされていれば、CSSの読み込みは速くなるはずだ」と思うかもしれません。その通りです。そのため、私たちはSpeculation Rulesを使用して、表示されているviewport内のページをプリロードし、CSSを含めて常にキャッシュからページが取得されるようにしています。
WordPressで「使われていないCSSの削減」を解決する
未使用のCSSを削除する準備はできましたか？WordPressでの始め方を説明します。WordPressでは、CSSは主に次の3つの方法で追加されます。
- テンプレートへの直接記述。テンプレートフォルダ内には header.php というファイルがあります。このファイルには、テンプレート固有のCSSファイルが記述されていることがよくあります。前述した方法で、これらのCSSファイルを変更できます。元のCSSファイルのバックアップを忘れずに行ってください。また、テーマのアップデートによってCSSファイルが上書きされる可能性があることに注意してください。
- プラグインによって追加されたCSS。WordPressのプラグインは、HTMLに無制限にCSSファイルを追加できます。これらのプラグインは、wp_register_style や wp_enqueue_style 関数を使用します。多くのプラグインは、現在のページでプラグインが実際に機能しているかを検証しません。プラグイン固有のCSSが不要なページであっても、すべてのページにCSSを挿入します。これは非常によくあるケースです。この場合、wp_dequeue_style や wp_deregister_style 関数を使用して、不要なページからこれらのスタイルを除外できます。開発者に相談するか、私にご相談ください。また、Asset CleanUp プラグインを使用して、ページタイプごとに読み込むプラグイン、スタイル、スクリプトを設定することもできます。
- JavaScriptによって追加されたCSS。JavaScriptを使用してスタイルシートをページに注入することも可能です。スタイルシートと同様に、wp_dequeue_script 関数を使用して、ページごとにこれらのスクリプトを無効にできます。JavaScriptが読み込まれなければ、スタイルシートも注入されません。 スクリプトとスタイルシート自体は必要だが、読み込み直後には不要な場合は、スクリプトの defer 属性を使用して JavaScriptの読み込みを遅延させる ことが可能です。functions.php に以下のコードを追加することで実行できます。
function defer_js( $url ) {
if ( is_user_logged_in() ) return $url; //don't break WP Admin
if ( strpos( $url, 'somescript.js' ) ) {
str_replace( ' src', ' defer src', $url );
}
}
add_filter( 'script_loader_tag', 'defer_js', 10 ); 未使用のCSSを削減した後は、Real User Monitoringで改善結果を確認してください。CoreDashのデータによると、Critical CSSをインライン化し、残りのCSSを遅延読み込みさせたサイトでは、FCPの中央値が320ms改善しています。
