2026年11月1日

WordPressのCSSとJSを最小化（minify）する方法・ファイルサイズ削減

SEO・パフォーマンス

はじめに

「PageSpeed InsightsでCSSとJSの縮小化を推奨されている」「複数のCSSファイルが読み込まれてページが遅い」——CSS/JSのminifyとファイル結合はサイト速度改善の基本施策のひとつです。

症状・原因

WordPressは複数のプラグインやテーマが追加するCSSとJSファイルがそれぞれ個別に読み込まれるため、HTTPリクエスト数が増加して表示速度が低下します。minify（空白・コメント・改行の除去）とファイル結合でデータ量とリクエスト数を削減できます。

解決手順

ステップ1：不要なCSSとJSを削除する（最優先）

// functions.php: 不要なスクリプトを無効化
add_action( 'wp_enqueue_scripts', function() {

    // コメントを使わない場合はコメント関連JSを削除
    if ( ! is_singular() || ! comments_open() ) {
        wp_dequeue_script( 'comment-reply' );
    }

    // WooCommerce未使用ページのスクリプトを削除
    if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
        wp_dequeue_style( 'woocommerce-general' );
        wp_dequeue_style( 'woocommerce-layout' );
        wp_dequeue_style( 'woocommerce-smallscreen' );
        wp_dequeue_script( 'woocommerce' );
        wp_dequeue_script( 'wc-cart-fragments' );
    }

    // Contact Form 7 を使わないページで無効化
    if ( ! is_page( [ 'contact', 'お問い合わせ' ] ) ) {
        wp_dequeue_style( 'contact-form-7' );
        wp_dequeue_script( 'contact-form-7' );
    }

    // 使用しないWordPress絵文字スクリプトを削除
}, 99 );

// 絵文字スクリプトを削除
add_action( 'init', function() {
    remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
    remove_action( 'wp_print_styles', 'print_emoji_styles' );
} );

// oEmbedスクリプトを削除（埋め込みを使わない場合）
add_action( 'init', function() {
    remove_action( 'wp_head', 'wp_oembed_add_discovery_links' );
    remove_action( 'wp_head', 'wp_oembed_add_host_js' );
} );

ステップ2：プラグインでminifyを設定する

【主要なminifyプラグインの比較】

WP Rocket（有料・推奨）:
  設定 → ファイル最適化
  ✅ CSS最小化・結合
  ✅ JS最小化・結合・遅延実行
  ✅ Google Fonts最適化

LiteSpeed Cache（LiteSpeedサーバー向け）:
  設定 → ページ最適化
  ✅ CSS/JSのminify・結合
  ✅ HTML最小化

Autoptimize（無料）:
  設定 → JS・CSS・HTML
  ✅ CSS最小化・インライン化
  ✅ JS最小化・フッター移動
  ⚠️ 設定ミスで表示崩れのリスクあり

W3 Total Cache（無料）:
  Minify タブ
  ✅ CSS/JS/HTMLのminify
  ⚠️ 設定が複雑

ステップ3：ビルドツールでminifyする（開発者向け）

// package.json: @wordpress/scriptsでビルド
{
  "scripts": {
    "build":   "wp-scripts build",
    "start":   "wp-scripts start",
    "build:css": "node-sass src/css/style.scss dist/css/style.min.css --output-style compressed"
  },
  "devDependencies": {
    "@wordpress/scripts": "^27.0.0",
    "node-sass":          "^9.0.0"
  }
}

// webpack.config.js: カスタムminify設定
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const TerserPlugin  = require( 'terser-webpack-plugin' );

module.exports = {
    ...defaultConfig,
    optimization: {
        ...defaultConfig.optimization,
        minimizer: [
            new TerserPlugin( {
                terserOptions: {
                    compress: {
                        drop_console: true, // console.logを削除
                    },
                    format: {
                        comments: false, // コメントを削除
                    },
                },
                extractComments: false,
            } ),
        ],
    },
};

ステップ4：インラインCSSでクリティカルCSSを最適化する

// ファーストビューに必要なCSSをインライン化（LCP改善）
add_action( 'wp_head', function() {
    $critical_css_file = get_theme_file_path( 'css/critical.css' );
    if ( ! file_exists( $critical_css_file ) ) {
        return;
    }
    $critical_css = file_get_contents( $critical_css_file );
    echo '<style id="critical-css">' . $critical_css . '</style>';
}, 5 );

// その他のCSSは非同期で読み込む（レンダリングブロック解消）
add_filter( 'style_loader_tag', function( $html, $handle ) {
    $async_styles = [ 'my-theme-style', 'google-fonts' ];
    if ( in_array( $handle, $async_styles, true ) ) {
        // メディアをprintにして初期ロードをスキップ、onloadで切替
        $html = str_replace(
            "media='all'",
            "media='print' onload=\"this.media='all'\"",
            $html
        );
    }
    return $html;
}, 10, 2 );

ステップ5：minify後の動作確認と問題解決

# minify後の動作確認チェックリスト

# 1. ブラウザのコンソールでJSエラーを確認
# Chrome DevTools → Console タブ

# 2. 全ページタイプで表示確認
# □ トップページ
# □ 投稿ページ（single.php）
# □ 固定ページ
# □ カテゴリーアーカイブ
# □ 検索結果
# □ お問い合わせページ（CF7等）
# □ WooCommerceカート・チェックアウト

# 3. minify除外リストの設定（Autoptimize等）
# 特定のJSが壊れる場合はハンドル名または部分URLで除外
# 例: jquery.min.js, slider.js

# 4. WP-CLIでキャッシュをクリア
wp cache flush
wp rewrite flush

注意事項

minify（ファイル結合含む）を有効化したら、サイトの全ページタイプをブラウザで確認してください。JavaScriptが壊れてスライダー・フォーム・カートが動作しなくなる場合があります。問題のあるファイルは除外リストに追加します。
本番環境で直接試すのではなく、ステージング環境でminifyの動作確認をしてから本番に適用することを強く推奨します。
deferやasync属性を付けたJSは実行順序が保証されないため、jQuery依存のスクリプトに付ける場合は動作確認が必須です。

まとめ

CSS/JSのminifyは「不要スクリプトの削除→プラグインでminify設定→ビルドツールで自動化→クリティカルCSSのインライン化→全ページ動作確認」の順で進めます。まず不要なスクリプトを削除するだけで大幅な改善が見込めます。関連記事：WordPressのサイト速度を計測して改善する方法、WordPressのGZIP圧縮を有効化する方法。