2026年9月5日

Autoptimizeのエラーを解決する方法

SEO・パフォーマンス

はじめに

Autoptimizeを有効にした後にサイトのレイアウトが崩れてCSSが正しく読み込まれない・JavaScriptを最適化するとスライダーやフォームが動作しなくなる・除外設定に追加したスクリプトがまだ最適化対象になっている・クリティカルCSSを設定したが「FOUC（スタイルなしコンテンツの点滅）」が発生するといった問題は、スクリプトの依存関係・除外設定・インライン化設定が原因です。

症状・原因

Autoptimizeを有効にすると管理画面のメニューが消えるかデザインが崩れる
スライダープラグインが「Uncaught TypeError」エラーを出して動作しない
「除外するスクリプト/スタイル」にURLを入力したが最適化が継続されている
モバイルでは正常だがデスクトップでJavaScriptエラーが発生する

解決手順

ステップ1：Autoptimizeの状態を確認する

# Autoptimize設定確認
wp eval "
if (defined('AUTOPTIMIZE_PLUGIN_VERSION')) {
    echo 'Autoptimize version: ' . AUTOPTIMIZE_PLUGIN_VERSION . PHP_EOL;
}

// 現在の設定を確認
\$options = [
    'autoptimize_css'              => get_option('autoptimize_css', 0),
    'autoptimize_js'               => get_option('autoptimize_js', 0),
    'autoptimize_html'             => get_option('autoptimize_html', 0),
    'autoptimize_css_aggregate'    => get_option('autoptimize_css_aggregate', 0),
    'autoptimize_js_aggregate'     => get_option('autoptimize_js_aggregate', 0),
    'autoptimize_js_defer'         => get_option('autoptimize_js_defer', 0),
    'autoptimize_js_defer_not_aggregate' => get_option('autoptimize_js_defer_not_aggregate', 0),
];

foreach (\$options as \$key => \$val) {
    printf('  %s: %s' . PHP_EOL, \$key, \$val ? 'enabled' : 'disabled');
}

// 除外設定を確認
\$exclude_css = get_option('autoptimize_css_exclude', '');
\$exclude_js  = get_option('autoptimize_js_exclude', '');
echo 'CSS exclusions: ' . (\$exclude_css ?: '(none)') . PHP_EOL;
echo 'JS exclusions: '  . (\$exclude_js ?: '(none)') . PHP_EOL;

// キャッシュサイズを確認
\$cache_dir  = WP_CONTENT_DIR . '/cache/autoptimize/';
\$cache_size = 0;
if (is_dir(\$cache_dir)) {
    \$iterator = new RecursiveIteratorIterator(new RecursiveDirectoryIterator(\$cache_dir));
    foreach (\$iterator as \$file) {
        \$cache_size += \$file->getSize();
    }
}
echo 'Cache size: ' . round(\$cache_size / 1024 / 1024, 2) . ' MB' . PHP_EOL;
"

ステップ2：スクリプト・スタイルの除外設定を修正する

// functions.php: Autoptimize除外設定

// ① 特定スクリプトをAutoptimizeの最適化から除外
add_filter('autoptimize_filter_js_exclude', function(string $excluded): string {
    $to_exclude = [
        'jquery.min.js',           // jQueryは除外（依存関係があるため）
        'slick.min.js',            // スライダー
        'woocommerce.min.js',      // WooCommerce
        'wp-embed.min.js',         // WordPress埋め込み
        'recaptcha',               // reCAPTCHA
        'google-analytics',        // Google Analytics
    ];

    foreach ($to_exclude as $script) {
        if (!str_contains($excluded, $script)) {
            $excluded .= ', ' . $script;
        }
    }

    return trim($excluded, ', ');
});

// ② 特定スタイルをAutoptimizeの最適化から除外
add_filter('autoptimize_filter_css_exclude', function(string $excluded): string {
    $to_exclude = [
        'dashicons.min.css',       // Dashiconsフォント
        'admin-bar.min.css',       // 管理バー
        'woocommerce-layout.css',  // WooCommerce
        'elementor',               // Elementorは自前で最適化
    ];

    foreach ($to_exclude as $style) {
        if (!str_contains($excluded, $style)) {
            $excluded .= ', ' . $style;
        }
    }

    return trim($excluded, ', ');
});

// ③ 管理画面では最適化を無効化
add_filter('autoptimize_filter_noptimize', function(bool $noptimize): bool {
    if (is_admin()) return true;
    if (is_customize_preview()) return true;
    return $noptimize;
});

ステップ3：クリティカルCSSを設定する

// functions.php: クリティカルCSS設定

// ① ページ種別ごとにクリティカルCSSを設定
add_filter('autoptimize_filter_css_criticalcss', function(string $critical_css): string {
    // トップページ専用のクリティカルCSS
    if (is_front_page()) {
        $cached = get_transient('critical_css_front');
        if ($cached) return $cached;

        // 最小限のAbove-the-foldスタイル
        $critical = '
            body{margin:0;font-family:-apple-system,sans-serif}
            header{background:#1d2327;color:#fff;padding:1rem}
            .hero{min-height:400px;display:flex;align-items:center}
            h1{font-size:2rem;margin:0 0 1rem}
        ';

        set_transient('critical_css_front', $critical, HOUR_IN_SECONDS * 24);
        return $critical;
    }

    return $critical_css;
});

// ② FOUCを防ぐためにnoscriptフォールバックを追加
add_action('wp_head', function(): void {
    if (!get_option('autoptimize_css', 0)) return;
    ?>
    <noscript>
        <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
    </noscript>
    <?php
}, 1);

// ③ 遅延読み込みのプリロードヒントを追加
add_action('wp_head', function(): void {
    $fonts = [
        'https://fonts.googleapis.com/css2?family=Noto+Sans+JP',
    ];
    foreach ($fonts as $font) {
        printf('<link rel="preconnect" href="%s" crossorigin>' . PHP_EOL,
            esc_url(parse_url($font, PHP_URL_SCHEME) . '://' . parse_url($font, PHP_URL_HOST)));
    }
}, 2);

ステップ4：JavaScriptの非同期・遅延読み込みを設定する

# JS最適化の問題を診断
wp eval "
// JSの遅延読み込み設定を確認
\$defer_setting = get_option('autoptimize_js_defer', 0);
\$defer_not_agg = get_option('autoptimize_js_defer_not_aggregate', 0);
echo 'JS defer: '                  . (\$defer_setting ? 'enabled' : 'disabled') . PHP_EOL;
echo 'Defer non-aggregated JS: '   . (\$defer_not_agg ? 'enabled' : 'disabled') . PHP_EOL;

// 登録済みスクリプトを確認
global \$wp_scripts;
if (isset(\$wp_scripts->registered)) {
    echo 'Registered scripts:' . PHP_EOL;
    foreach (array_slice(\$wp_scripts->registered, 0, 20, true) as \$handle => \$script) {
        printf('  %s: %s' . PHP_EOL, \$handle, \$script->src ?? '(inline)');
    }
}
"

ステップ5：キャッシュクリアと最適化テストを実行する

// functions.php: キャッシュ管理

// ① Autoptimizeのキャッシュをプログラムでクリア
function clear_autoptimize_cache(): bool {
    if (!class_exists('autoptimizeCache')) return false;

    autoptimizeCache::clearall();
    error_log('[AO] Cache cleared by ' . (wp_get_current_user()->user_login ?? 'system'));
    return true;
}

// ② 投稿更新時にキャッシュをクリア
add_action('save_post', function(int $post_id): void {
    if (wp_is_post_revision($post_id)) return;
    clear_autoptimize_cache();
});

// ③ 最適化除外リストをデバッグ出力（管理者のみ）
add_action('wp_footer', function(): void {
    if (!current_user_can('manage_options')) return;
    if (!isset($_GET['ao_debug'])) return;

    $js_exclude  = get_option('autoptimize_js_exclude', '(none)');
    $css_exclude = get_option('autoptimize_css_exclude', '(none)');

    printf(
        '<script>console.log("[AO] JS exclusions: %s\nCSS exclusions: %s")</script>',
        esc_js($js_exclude),
        esc_js($css_exclude)
    );
});

// ④ WP-CLIからキャッシュクリアするコマンド
if (defined('WP_CLI') && WP_CLI) {
    WP_CLI::add_command('autoptimize flush', function(): void {
        if (clear_autoptimize_cache()) {
            WP_CLI::success('Autoptimize cache cleared.');
        } else {
            WP_CLI::error('autoptimizeCache class not found.');
        }
    });
}

注意事項

Autoptimizeを有効にする前に必ずバックアップを取り、ステージング環境でテストしてください。特にjQueryに依存したプラグインが多い場合は「JavaScriptを集約」を無効にして個別に遅延読み込みを設定する方が安全です
除外設定のパターンマッチングは部分一致です。例えば「jquery」と入力するとURLに「jquery」を含む全スクリプトが除外されます。除外したいスクリプトのファイル名の一部を正確に入力してください
クリティカルCSSは手動で設定するか、Critical CSS生成ツール（例：criticalcss.com）を使用して生成してください。テーマを変更した際は必ずクリティカルCSSも更新が必要です

まとめ

Autoptimize修復は①設定オプション確認・除外CSS/JS設定確認・キャッシュサイズ確認、②autoptimize_filter_js_excludeフィルターでjQuery・スライダー・WooCommerceを除外・autoptimize_filter_css_excludeでDashicons・Elementorを除外・管理画面では最適化無効化、③autoptimize_filter_css_criticalcssフィルターでページ種別ごとのクリティカルCSS設定・FOUCを防ぐnoscriptフォールバック、④JS遅延読み込み設定確認・登録済みスクリプト一覧で依存関係診断、⑤autoptimizeCache::clearall()でキャッシュクリア・save_postで自動クリア・ao_debugパラメーターで除外リストをデバッグ表示する手順で解決します。

Post Views: 1