2026年7月27日

WordPressでCritical CSSを自動生成してレンダリングを妨げるCSSを解消する方法

SEO・パフォーマンス

Critical CSS（クリティカル CSS）は、ファーストビューの描画に必要な CSS だけを抜き出して HTML の中に直接書き込み、残りの CSS を後から読み込む手法です。WordPress では、キャッシュ・高速化プラグインの自動生成機能を使うのが現実的で、手作業でやる場合も生成ツールと数行の PHP で対応できます。この記事では、自動生成の仕組みと選び方、導入後に起きやすい表示崩れへの対処、効果の確かめ方を説明します。

なぜCSSが表示を遅らせるのか

ブラウザは、<head> の中にある通常の <link rel="stylesheet"> を読み終えるまで、画面の描画を始めません。CSS を読まずに描画すると、装飾のない状態が一瞬見えてしまうためです。この「読み終えるまで描画を止める」性質を持つ CSS が、PageSpeed Insights で「レンダリングを妨げるリソース」として指摘されるものです（項目名はツールの更新で変わることがあります）。

WordPress のサイトでは、テーマの CSS、ブロックの CSS、プラグインの CSS が何本も読み込まれ、合計で数百 KB になることも珍しくありません。そのうちファーストビューで実際に使われるのは一部です。そこで、

ファーストビューに必要な分（Critical CSS）だけを <style> として HTML に埋め込む
元の CSS ファイルは描画を止めない方法で後から読み込む

という2段構えにすると、CSS のダウンロードを待たずに最初の画面が描かれるようになります。

自動生成の仕組みと注意点

Critical CSS を手で選び出すのは現実的ではないため、通常はツールに生成させます。仕組みは、ヘッドレスブラウザ（画面を持たないブラウザ）でページを開き、指定した画面サイズの範囲に表示される要素に使われている CSS ルールだけを集める、というものです。

この仕組みから、次の性質が生まれます。

ページの種類ごとに中身が違う：トップページ、投稿、固定ページ、商品ページではファーストビューの構成が違うため、テンプレートごと（場合によっては URL ごと）に生成が必要です。
画面幅で結果が変わる：スマートフォンとパソコンで別々に生成するか、両方を含めるかを考える必要があります。
デザインを変えたら作り直しが必要：テーマやプラグインの更新、CSS の変更をすると、古い Critical CSS では一部の装飾が抜けます。
ログイン状態や動的な部分は拾いにくい：管理バー、Cookie の同意バナー、JavaScript で後から出す要素は漏れやすい部分です。

方法1：プラグインの自動生成機能を使う

Critical CSS の自動生成は、主要な高速化プラグインが機能として持っています。代表的なものは次のとおりです（2026年10月現在）。機能名・設定場所・無料で使える範囲は版によって変わるため、各プラグインの公式ドキュメントで確認してください。

WP Rocket：CSS の配信を最適化する設定で、CSS を非同期で読み込む方式を選ぶと、Critical CSS が自動で生成されます。
LiteSpeed Cache：ページ最適化の CSS 設定で非同期読み込みを有効にすると、QUIC.cloud のサービスを使って Critical CSS が生成されます。サービスの利用枠があるため、ページ数の多いサイトでは生成待ちが発生することがあります。
Autoptimize：CSS をインライン化して遅延させる設定があり、Critical CSS を手で貼り付けるほか、外部サービスと連携して自動生成させることもできます。
Jetpack Boost：CSS の読み込みを最適化する機能で Critical CSS を生成します。自動での再生成は有料プランの機能として扱われています。

複数のプラグインで同時に有効にすると、CSS が二重に処理されて表示が崩れます。使うのは1つに絞り、他のプラグインの同様の機能は止めてください。また、「未使用 CSS の削除」と Critical CSS は別の機能です。未使用 CSS の削除は CSS ファイル自体を小さくする機能で、併用できるプラグインもありますが、まずは片方ずつ有効にして影響を確かめるほうが原因を切り分けやすくなります。

方法2：生成ツールで作り、テーマに組み込む

プラグインを増やしたくない場合や、ページの種類が少ないサイトでは、手元で生成した Critical CSS を子テーマに組み込む方法もあります。生成には、Node.js 用の critical パッケージのようなツールが使えます。以下は一例で、使えるオプションはパッケージの版によって異なるため、README で確認してから使ってください。

// generate-critical.mjs（Node.js で実行: node generate-critical.mjs）
import { generate } from 'critical';

await generate({
  src: 'https://example.com/',
  target: 'critical-front.css',
  dimensions: [
    { width: 390, height: 844 },   // スマートフォン
    { width: 1366, height: 768 },  // パソコン
  ],
});

できたファイルを子テーマの critical/front.css に置き、トップページでだけ <head> に埋め込みます。あわせて、テーマの CSS を描画を止めない形で読み込むように変更します。my-theme-style の部分は、実際にテーマが wp_enqueue_style() で登録しているハンドル名に置き換えてください。

<?php
// トップページでは Critical CSS を <head> に埋め込む
add_action( 'wp_head', function () {
	if ( ! is_front_page() ) {
		return;
	}
	$file = get_stylesheet_directory() . '/critical/front.css';
	if ( is_readable( $file ) ) {
		echo '<style id="critical-css">' . wp_strip_all_tags( file_get_contents( $file ) ) . '</style>' . "\n";
	}
}, 1 );

// テーマの CSS を描画を止めない形で読み込む（JavaScript 無効時は noscript で通常読み込み）
add_filter( 'style_loader_tag', function ( $html, $handle, $href, $media ) {
	if ( ! is_front_page() || 'my-theme-style' !== $handle ) {
		return $html;
	}
	$async = preg_replace( '/media=([\'"])all\1/', 'media="print" onload="this.media=\'all\'"', $html );
	return $async . '<noscript>' . $html . '</noscript>';
}, 10, 4 );

media="print" で読み込むと、ブラウザは描画を止めずに CSS を取得し、読み込み完了時に onload で all に切り替えます。すべての CSS をこの方式にすると、Critical CSS に漏れがあった部分が一瞬崩れて見えるため、まずはテーマのメインの CSS 1本から試すのが安全です。

ブロックテーマの場合は、WordPress がブロックごとの小さな CSS を HTML に直接書き込む仕組みをすでに持っているため、クラシックテーマほど効果が出ないこともあります。導入前後で数値を比べて判断してください。

導入後によくある問題と対処

一瞬、装飾のない画面が見える（FOUC）：Critical CSS に必要なルールが入っていません。該当テンプレートの Critical CSS を作り直すか、漏れているセレクタをプラグインの「追加で含める」設定や手元の CSS に加えます。
後から CSS が当たってレイアウトがずれる：CLS（レイアウトのずれ）の悪化につながります。ヘッダーの高さ、ナビゲーション、フォントの指定など、ファーストビューの寸法に関わる CSS が Critical CSS に含まれているかを確かめます。
デザインを変えたのに古い見た目が残る：Critical CSS とページキャッシュの両方を作り直します。プラグインの多くには、Critical CSS を再生成するボタンがあります。
特定のページだけ崩れる：カート・決済・会員ページなど、動的な要素が多いページは対象から外す設定を使います。

効果の確かめ方

導入前に PageSpeed Insights で対象ページを測り、LCP と FCP（最初の描画）の値、レンダリングを妨げるリソースの指摘を記録しておきます。導入後はキャッシュを削除してから同じページを測り直し、指摘が減っているか、LCP・FCP が短くなっているか、CLS が悪化していないかを比べます。

数値だけでなく、Chrome のデベロッパーツールで回線速度を落として（Network パネルのスロットリング）ページを読み込み、最初の画面が崩れずに出るかを目で確認することも大切です。実際の利用者のデータは集計に時間がかかるため、Search Console のウェブに関する主な指標のレポートは数週間後に確認します。表示速度の改善は利用者の体験のための取り組みで、検索順位の上昇を約束するものではありません。

まとめ

Critical CSS は、ファーストビューに必要な CSS だけを HTML に埋め込み、残りを後から読み込むことで、CSS による描画の停止を減らす手法です。
自動生成はヘッドレスブラウザで行われるため、ページの種類・画面幅ごとの生成と、デザイン変更時の再生成が必要です。
手軽なのは高速化プラグインの機能で、使うのは1つに絞ります。手作業の場合は生成ツールで作り、子テーマで wp_head と style_loader_tag を使って組み込みます。
導入後は FOUC と CLS に注意し、キャッシュを消してから数値と見た目の両方で確認してください。設定変更の前にはバックアップを取っておきます。