2026年5月20日

WordPressのクリティカルCSSを設定する方法

SEO・パフォーマンス

はじめに

クリティカルCSS（Above the Fold CSS）はファーストビューの描画に必要な最小限のCSSです。これをHTMLにインラインで埋め込み、残りのCSSを非同期で読み込むことでレンダリングブロックを解消し、FCP（最初のコンテンツが描画される時間）を大幅に改善できます。

症状・原因

PageSpeed Insightsで「レンダリングブロックリソースの除外」を指摘される
FCP（First Contentful Paint）のスコアが低い
CSSが完全に読み込まれるまでページが真っ白
ファーストビューに関係ないCSSも全部読み込んでから描画される

解決手順

ステップ1：クリティカルCSSとは何かを理解する

通常のCSS読み込み（ブロッキング）:
HTML解析 → CSS読み込み待ち → 描画開始   ← 白い画面が続く

クリティカルCSS方式:
HTML解析 → インラインCSSで即描画 → 残りのCSSを非同期取得

抽出すべきCSS（ファーストビューで使われるもの）:
- ヘッダー・ナビゲーションのスタイル
- ヒーローセクションのレイアウト・背景
- フォント（font-face、font-size、line-height）
- CSSカスタムプロパティ（:root変数）
- メインレイアウト（grid、flex設定）
- above-the-foldのテキストスタイル

ステップ2：CriticalツールでクリティカルlCSSを自動生成する

# npmでCriticalをインストール
npm install --save-dev critical

# Critical: ブラウザを起動してファーストビューのCSSを自動抽出
npx critical https://example.com/ \
    --base ./wp-content/themes/mytheme/ \
    --css ./assets/css/style.css \
    --width 1300 \
    --height 900 \
    --output ./assets/css/critical.css \
    --inline  # HTMLにインラインで埋め込む場合

// critical.config.js: 詳細設定
const critical = require('critical');

critical.generate({
    inline: false,                           // critical.cssとして分離出力
    base: 'wp-content/themes/mytheme/',
    src: 'https://example.com/',
    css: ['assets/css/style.min.css'],
    dimensions: [
        { width: 375,  height: 667  },      // スマートフォン
        { width: 768,  height: 1024 },      // タブレット
        { width: 1280, height: 900  },      // デスクトップ
    ],
    dest: 'assets/css/critical.css',
    minify: true,
    ignore: {
        atrule: ['@font-face'],              // @font-faceは除外（ファイルが大きい）
        rule: [/\.wp-admin/],               // WP管理画面のクラスを除外
    },
});

ステップ3：WordPressにクリティカルCSSをインライン化する

// functions.php

function mytheme_inline_critical_css(): void {
    // ページタイプ別にクリティカルCSSを切り替える
    $template_dir = get_template_directory();

    if (is_front_page()) {
        $critical_file = $template_dir . '/assets/css/critical-home.css';
    } elseif (is_singular('post')) {
        $critical_file = $template_dir . '/assets/css/critical-single.css';
    } else {
        $critical_file = $template_dir . '/assets/css/critical.css';
    }

    if (!file_exists($critical_file)) {
        return;
    }

    $css = file_get_contents($critical_file);
    if (!$css) {
        return;
    }

    // ダブルクォートのエスケープのみ（コメント・改行は事前にminify済み）
    echo '<style id="critical-css">' . $css . '</style>' . "\n";
}
add_action('wp_head', 'mytheme_inline_critical_css', 1);

ステップ4：残りのCSSを非同期で読み込む

// functions.php

function mytheme_enqueue_async_styles(): void {
    $version = filemtime(get_template_directory() . '/assets/css/style.min.css');

    // メインCSSをpreloadで非ブロッキングに読み込む
    wp_enqueue_style('mytheme-main', get_template_directory_uri() . '/assets/css/style.min.css', [], $version);
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_async_styles');

// style_loader_tag: preload → stylesheet に変換
function mytheme_make_style_async(string $html, string $handle): string {
    if ($handle !== 'mytheme-main') {
        return $html;
    }

    // preloadで非同期読み込み → onloadでstylesheetに切り替え
    $async_html = str_replace(
        "rel='stylesheet'",
        "rel='preload' as='style' onload=\"this.onload=null;this.rel='stylesheet'\"",
        $html
    );

    // JSが無効なブラウザ向けのフォールバック
    $noscript = '<noscript>' . $html . '</noscript>';

    return $async_html . $noscript;
}
add_filter('style_loader_tag', 'mytheme_make_style_async', 10, 2);

ステップ5：package.jsonでビルドを自動化する

{
  "scripts": {
    "critical": "node critical.config.js",
    "critical:home": "critical https://example.com/ --css assets/css/style.min.css --output assets/css/critical-home.css --width 1280 --height 900 --minify",
    "critical:single": "critical https://example.com/sample-post/ --css assets/css/style.min.css --output assets/css/critical-single.css --width 1280 --height 900 --minify",
    "build": "npm run build:css && npm run critical"
  }
}

// wp-config.php: 開発環境ではクリティカルCSSを無効化
// （デバッグ時にインラインCSSが邪魔な場合）
define('MYTHEME_DISABLE_CRITICAL_CSS', false);

// functions.php: 定数で制御
function mytheme_inline_critical_css(): void {
    if (defined('MYTHEME_DISABLE_CRITICAL_CSS') && MYTHEME_DISABLE_CRITICAL_CSS) {
        return;
    }
    // ... 以降の処理
}

注意事項

クリティカルCSSのファイルサイズは14KB以下を目標にしてください。それ以上になるとHTMLが肥大化しHTTPレスポンスのTTFBが悪化します
クリティカルCSSは静的ファイルとして生成します。テーマのデザインを変更するたびに再生成が必要です。CI/CDパイプラインへの組み込みを検討してください
@font-face をクリティカルCSSに含めると大幅にサイズが増えます。フォントは preload で別途対応してください

まとめ

Criticalツールで複数のビューポートサイズからファーストビューのCSSを自動抽出し、wp_head priority:1 でインライン化します。残りのCSSは style_loader_tag フィルターで rel="preload" に変換して非同期読み込みにし、