2026年5月20日

WordPressのJavaScriptをフッターに移動してページ速度を改善する方法

SEO・パフォーマンス

はじめに

JavaScriptをページ上部（内）で読み込むと、HTMLの解析をブロックしてページ表示が遅くなります。wp_enqueue_script() の第5引数を true にするか、defer/async 属性を追加することで表示速度を改善できます。

症状・原因

PageSpeed Insightsで「レンダーブロッキングリソースの除外」と指摘される
ページの初期表示が遅い
内に大量のscriptタグがある
プラグインのJSが上部に読み込まれている

解決手順

ステップ1：`wp_enqueue_script()` の第5引数でフッターに移動する

// 第5引数を true にするとフッター（wp_footer()直前）に読み込まれる
// functions.php

add_action('wp_enqueue_scripts', function(): void {
    // 第5引数: false = <head>（デフォルト）, true = </body>直前
    wp_enqueue_script(
        'my-script',
        get_stylesheet_directory_uri() . '/js/main.js',
        ['jquery'],           // 依存スクリプト
        filemtime(get_stylesheet_directory() . '/js/main.js'),
        true                  // ← フッターに移動
    );
});

ステップ2：defer・async 属性を追加する

// functions.php — script_loader_tag フィルターで属性を追加
add_filter('script_loader_tag', function(string $tag, string $handle): string {
    // フッター移動だけでは不十分な場合に使用

    // defer: DOMの解析を止めずに並行ダウンロード、DOMが完成してから実行
    $defer_scripts = ['my-analytics', 'my-slider'];

    // async: DOMの解析を止めずに並行ダウンロード、ダウンロード完了次第即実行
    $async_scripts = ['google-tag-manager'];

    if (in_array($handle, $defer_scripts, true)) {
        return str_replace(' src=', ' defer src=', $tag);
    }
    if (in_array($handle, $async_scripts, true)) {
        return str_replace(' src=', ' async src=', $tag);
    }

    return $tag;
}, 10, 2);

defer vs async の使い分け:

defer  → 実行順序が保証される。DOMに依存するスクリプトに推奨
async  → 実行順序不定。独立したスクリプト（GA等）に適している
フッター → 依存関係が複雑な場合の確実な方法

ステップ3：jQuery を最新版に差し替えてフッターに移動する

// functions.php
add_action('wp_enqueue_scripts', function(): void {
    // WordPress組み込みjQueryをフッター版に差し替え
    wp_deregister_script('jquery');
    wp_register_script(
        'jquery',
        'https://code.jquery.com/jquery-3.7.1.min.js',
        [],
        '3.7.1',
        true  // フッターに読み込む
    );
    wp_enqueue_script('jquery');
}, 11);

ステップ4：プラグインのJSをフッターに強制移動する

// functions.php — 特定プラグインのスクリプトをフッターへ
add_action('wp_print_scripts', function(): void {
    // 対象スクリプトハンドル名（DevToolsのNetworkタブで確認）
    $scripts_to_footer = ['contact-form-7', 'woocommerce'];

    foreach ($scripts_to_footer as $handle) {
        $script = wp_scripts()->query($handle);
        if ($script && !$script->extra['group']) {
            $script->add_data('group', 1); // 1 = フッター
        }
    }
}, 1);

ステップ5：効果を計測する

# PageSpeed Insights でスコアを確認（URLは適宜変更）
# https://pagespeed.web.dev/

# WP-CLI でエンキューされているスクリプトを確認
wp eval "
global \$wp_scripts;
foreach (\$wp_scripts->queue as \$handle) {
    \$s = \$wp_scripts->registered[\$handle];
    echo \$handle . ' | group: ' . (\$s->extra['group'] ?? 0) . ' | src: ' . \$s->src . PHP_EOL;
}
"

フッター移動の効果:
- First Contentful Paint (FCP) の改善
- Time to Interactive (TTI) の短縮
- PageSpeed スコアの向上

注意: フッターに移動すると DOM が完成してから JS が実行されるため、
DOMContentLoaded イベントに依存するコードは問題なし。
ただし、<head>内でのグローバル変数参照が必要なスクリプトは移動不可。

注意事項

wp_localize_script() で渡したデータは、対応する wp_enqueue_script() と同じタイミングで出力されます。フッターに移動しても問題ありません
jQueryを最新版に差し替える際は、jQueryに依存する全プラグインの動作確認が必要です
async 属性を付けたスクリプトは実行順序が保証されないため、相互に依存するスクリプトには使用しないでください

まとめ

wp_enqueue_script() の第5引数を true にするだけでフッターへ移動できます。さらに defer 属性を追加することでダウンロードを並行化しつつ実行順序も保てます。PageSpeed Insightsの「レンダーブロッキングリソース」の警告が解消されます。

Post Views: 17