WordPressのサイトでは、テーマやプラグインがすべてのページに同じCSSを読み込むため、実際には使われていないスタイルが大量に含まれがちです。未使用のCSSを減らすには「どのファイルの、どれだけが使われていないか」を測り、ページ単位で読み込みを止めるか、自動削除機能を慎重に使うのが基本です。この記事では、未使用CSSの調べ方、プラグインやブロックのCSSを必要なページだけに絞る方法、自動削除機能を使うときの注意点、表示崩れを防ぐ確認手順を説明します。
未使用のCSSが問題になる理由
CSSは、読み込みと解析が終わるまでブラウザが画面を描画しない「レンダリングを妨げるリソース」です。ファイルが大きいほど、また数が多いほど、最初の表示が遅れます。特に回線の遅いスマートフォンでは差が出やすく、LCP（最大の要素が表示されるまでの時間）の悪化につながります。
WordPressで未使用CSSが増える典型的な原因は次のとおりです。
- 多機能なテーマが、使っていない機能のスタイルもまとめて読み込んでいる
- お問い合わせフォームやスライダーなどのプラグインが、利用していないページにもCSSを読み込んでいる
- ブロックエディターのブロック用スタイル（
wp-block-libraryなど）が、使っていないブロックの分まで含まれている
どのCSSが使われていないかを調べる
PageSpeed Insights / Lighthouse で全体像をつかむ
PageSpeed Insights や Chrome の Lighthouse では、使用されていないCSSを減らすよう指摘する項目があり、ファイルごとに削減できる見込みのサイズが表示されます。項目の名前や表示形式は改定されることがあります（2026年10月現在）。まずここで、削減効果の大きいファイルを把握します。
Chrome DevTools の Coverage で中身を確かめる
DevTools の「Coverage」パネルを開いてページを再読み込みすると、読み込まれたCSS・JSごとに、そのページで使われなかった割合が表示されます。ファイルを選ぶと、使われなかった行が色分けで示されます。
注意したいのは、Coverage が見ているのは「その時点の、そのページの状態」だけだという点です。ハンバーガーメニューを開いたとき、モーダルを表示したとき、スマートフォン幅にしたときに使われるスタイルは、操作しないと「未使用」と判定されます。数字をそのまま削除の根拠にせず、どのページで何に使われるCSSかを見極める材料として使ってください。
ファイルのハンドル名を確認する
WordPressでは、CSSは wp_enqueue_style() で「ハンドル名」を付けて登録されます。読み込みを止めるにはこの名前が必要です。HTMLソースの <link rel="stylesheet" id="xxxx-css"> の -css を除いた部分がハンドル名で、Query Monitor を使えばページごとに読み込まれたスタイルのハンドル名と登録元を一覧できます。
プラグインのCSSを必要なページだけで読み込む
効果が大きく、副作用を管理しやすいのが、特定のページでしか使わないプラグインのCSSを、そのページ以外で読み込まないようにする方法です。次の例は、お問い合わせページ以外でフォームプラグインのCSSを外すものです。子テーマの functions.php に追加します。
add_action( 'wp_enqueue_scripts', function () {
// 固定ページ「contact」以外ではフォーム用のCSSを読み込まない
if ( ! is_page( 'contact' ) ) {
wp_dequeue_style( 'contact-form-7' );
}
}, 100 );優先度を 100 にしているのは、プラグインが通常の優先度で登録したあとに外すためです。contact-form-7 は Contact Form 7 のハンドル名の例で、実際の名前は前述の方法で確認してください。フォームを複数のページに置いている場合は、is_page( array( 'contact', 'entry' ) ) のように条件を広げます。プラグインによっては、読み込みを制御するための独自のフィルターや設定を用意しているので、公式ドキュメントにある方法を優先すると更新時に壊れにくくなります。
親テーマの functions.php に直接書くと、テーマの更新で消えてしまいます。編集の前にはサイトのバックアップを取り、子テーマかコード管理用のプラグインに書いてください。
ブロック用CSSを減らす
使っているブロックの分だけ読み込む
クラシックテーマでは、ブロック用のスタイルが1つの大きなファイルとしてまとめて読み込まれることがあります。should_load_separate_core_block_assets フィルターで true を返すと、ページ内で実際に使われているコアブロックのスタイルだけを個別に読み込むようになります。ブロックテーマではこの動作が標準です。
add_filter( 'should_load_separate_core_block_assets', '__return_true' );ブロックを使っていないサイトでの扱い
クラシックエディターだけで記事を書いていて、フロント側でブロックを一切使っていないサイトなら、wp-block-library などのブロック用CSSを外す選択肢もあります。ただし、過去の記事や再利用ブロック、ウィジェットにブロックが含まれていると表示が崩れます。外す前に、ブロックを使ったコンテンツが残っていないかを確認し、主要なページの見た目を比べてから判断してください。
自動で未使用CSSを削除する機能を使う場合
WP Rocket、LiteSpeed Cache、Perfmatters など、ページごとに使われているCSSだけを抽出して出力する機能を持つプラグインもあります（2026年10月現在。機能名や仕組みは製品・バージョンにより異なり、外部サービスで処理する方式のものもあります）。手作業より削減量が大きくなりやすい反面、次の点でつまずきやすくなります。
- JavaScriptで後から付くクラスが消える：メニューの開閉、スライダー、タブ、ポップアップなど、操作時に追加されるクラスのスタイルが「未使用」とみなされます。各プラグインには、削除対象から除外するクラスやファイルを指定する設定（セーフリスト）があるので、崩れた箇所のセレクターを追加します。
- 生成待ちの間の表示：ページごとのCSSを生成するまでの間は、元のCSSが使われる方式があります。設定直後の計測結果だけで判断しないようにします。
- キャッシュとの関係：テーマやプラグインを更新したら、生成済みのCSSも作り直す必要があります。
自作テーマの場合は、ビルド時に PurgeCSS などのツールで使われていないセレクターを取り除く方法もあります。この場合も、動的に付くクラスはセーフリストに登録します。
表示崩れがないか確認する
CSSを減らしたら、速度より先に見た目を確認します。
- トップページ、記事、固定ページ、カテゴリー一覧、検索結果、404ページを開く
- スマートフォン幅とパソコン幅の両方で、メニューの開閉やフォームの送信画面を操作する
- ログイン中と未ログインの両方で確認する（管理バーの有無で崩れることがあります）
- 問題がなければ、PageSpeed Insights と Coverage で削減量を確かめる
キャッシュプラグインやCDNを使っている場合は、キャッシュを削除してから確認しないと、変更前の状態を見てしまいます。
まとめ
- 未使用CSSは描画を遅らせる原因になり、テーマ・プラグイン・ブロック用CSSが主な発生源
- PageSpeed Insights で対象を絞り、Coverage とハンドル名で中身と登録元を確認する
- 特定ページでしか使わないプラグインのCSSは、子テーマから
wp_dequeue_style()で外す - ブロック用CSSは
should_load_separate_core_block_assetsで必要な分だけにできる - 自動削除機能は効果が大きい一方、動的なクラスの除外設定と表示確認が欠かせない