2026年5月20日

WordPressの不要なCSSを削除してページ速度を改善する方法

SEO・パフォーマンス

はじめに

WordPressサイトには、使っていないプラグインや親テーマのCSSが大量に読み込まれることがあります。wp_dequeue_style() で不要なCSSを削除し、PageSpeed InsightsやLighthouseのスコアを改善できます。

症状・原因

PageSpeed Insightsで「使用していないCSSの削除」と指摘される
プラグインのCSSがすべてのページで読み込まれている
スタイルシートの読み込み時間が長い
使用していないプラグインのフォントやアイコンが読み込まれている

解決手順

ステップ1：読み込まれているCSSを確認する

# 登録済みスタイル一覧を確認
wp eval "
global \$wp_styles;
wp_print_styles();  // 一度実行して登録させる
foreach (\$wp_styles->queue as \$handle) {
    echo \$handle . ' => ' . \$wp_styles->registered[\$handle]->src . PHP_EOL;
}
"

ブラウザのDevToolsで確認:
1. F12 → Networkタブ → フィルタ「CSS」
2. 不要なCSSファイルのハンドル名をソースで確認
   例: <link rel='stylesheet' id='contact-form-7-css' ...>
        ↑ ハンドル名: contact-form-7

ステップ2：`wp_dequeue_style()` で不要なCSSを削除する

// functions.php
add_action('wp_enqueue_scripts', function(): void {

    // Contact Form 7 のCSSをすべてのページで無効化
    wp_dequeue_style('contact-form-7');

    // WooCommerceのCSSをショップ以外で無効化
    if (!is_woocommerce() && !is_cart() && !is_checkout()) {
        wp_dequeue_style('woocommerce-general');
        wp_dequeue_style('woocommerce-layout');
        wp_dequeue_style('woocommerce-smallscreen');
    }

    // Font Awesome（プラグイン等で読み込まれる場合）
    wp_dequeue_style('font-awesome');
    wp_deregister_style('font-awesome');

}, 100); // 優先度100でプラグインの後に実行

ステップ3：Contact Form 7 のCSSを投稿のみ有効にする

// functions.php — CF7はフォームがあるページのみ読み込む
add_filter('wpcf7_load_css', '__return_false'); // CF7の自動読み込みを無効化

add_action('wp_enqueue_scripts', function(): void {
    // お問い合わせページのIDを指定（または is_page('contact')）
    if (is_page(42)) {
        wp_enqueue_style(
            'contact-form-7',
            plugins_url('includes/css/styles.css', __FILE__)
        );
    }
});

ステップ4：親テーマの不要なスタイルを削除する

// functions.php（子テーマ）
add_action('wp_enqueue_scripts', function(): void {
    // 親テーマの特定スタイルを削除
    wp_dequeue_style('parent-theme-slider');
    wp_dequeue_style('parent-theme-animations');

    // Google Fonts（親テーマが読み込む場合）
    wp_dequeue_style('parent-theme-google-fonts');

    // 代わりに自分で最適化したバージョンを読み込む
    wp_enqueue_style(
        'my-fonts',
        'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap',
        [],
        null
    );
}, 20);

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

// functions.php — ファーストビューのCSSをインライン出力（LCP改善）
add_action('wp_head', function(): void {
    $critical_css_file = get_stylesheet_directory() . '/css/critical.css';
    if (!file_exists($critical_css_file)) return;

    $css = file_get_contents($critical_css_file);
    echo '<style id="critical-css">' . $css . '</style>';
}, 1);

// メインCSSは非同期読み込みに変更
add_filter('style_loader_tag', function(string $html, string $handle): string {
    if ($handle === 'child-style') {
        $html = str_replace(
            "rel='stylesheet'",
            "rel='preload' as='style' onload=\"this.rel='stylesheet'\"",
            $html
        );
    }
    return $html;
}, 10, 2);

注意事項

wp_dequeue_style() は優先度 100 以上で実行して、プラグインの登録後に確実に削除してください
CSSを削除するとプラグインの見た目が崩れる場合があります。必ず動作確認を行ってください
Contact Form 7 の wpcf7_load_css フィルターはプラグインバージョンによっては使用できない場合があります

まとめ

wp_dequeue_style() を優先度100以上の wp_enqueue_scripts アクション内で呼び出すことで、不要なCSSを削除できます。プラグインCSSは対象ページのみ有効にする条件分岐が特に効果的です。

Post Views: 16