2026年5月20日

WordPressのJavaScriptを遅延読み込み（defer）・最小化する方法

SEO・パフォーマンス

WordPressでJavaScriptを遅延読み込みするなら、WordPress 6.3以降で使える wp_enqueue_script() の strategy 引数に 'defer' を指定するのが最も安全な方法です。script_loader_tag フィルターで <script> タグを書き換える従来の方法と違い、依存関係を壊さないようWordPressが自動で調整してくれます。この記事では、自作テーマ・プラグインのスクリプトをdefer化する手順、他のプラグインが読み込むスクリプトへの適用方法、ビルドツールやプラグインによる最小化（minify）、そして効果の確かめ方までを解説します。

deferとasyncの違いを押さえる

通常の <script src="..."> は、ブラウザがHTMLを読み進める途中で見つけた時点でダウンロードと実行を行い、その間HTMLの解析が止まります。これが「レンダリングを妨げるリソース」と呼ばれる原因です。

defer：ダウンロードはHTMLの解析と並行して行い、実行はHTMLの解析が終わってから。複数のdeferスクリプトは記述順に実行される
async：ダウンロードは並行、ダウンロードが終わった時点ですぐ実行。実行順は保証されない

テーマのメニュー開閉やスライダーなど、ページ内の要素を操作するスクリプトの多くは、DOMができてから動けばよく、他のスクリプトとの順序も大事です。そのため通常はdeferが適しています。asyncは、アクセス解析タグのように他のスクリプトと依存関係がなく、どの順で動いてもよいものに向いています。

WordPress 6.3以降の推奨方法：strategy引数

WordPress 6.3で、wp_register_script() と wp_enqueue_script() の第5引数が、真偽値の $in_footer から配列 $args に拡張されました。配列には in_footer と strategy を指定できます。

// functions.php（テーマ）またはプラグインのメインファイル
add_action( 'wp_enqueue_scripts', function () {
	$path = get_theme_file_path( 'assets/js/main.min.js' );

	wp_enqueue_script(
		'mytheme-main',                                   // ハンドル名
		get_theme_file_uri( 'assets/js/main.min.js' ),    // URL
		array(),                                          // 依存スクリプト
		file_exists( $path ) ? filemtime( $path ) : null, // 更新時刻をバージョンにしてキャッシュを更新
		array(
			'strategy'  => 'defer',
			'in_footer' => true,
		)
	);
} );

この指定で、出力されるタグには defer 属性が付きます。WordPress 6.3以降では、あわせて data-wp-strategy="defer" という属性も出力されるので、ソースを見て判別できます。

in_footer を false にしてdeferを付けると、<head> 内に defer 付きで出力されます。deferであれば <head> にあっても描画を止めないうえ、ブラウザが早い段階でダウンロードを始められるため、重要度の高いスクリプトはこちらのほうが早く動くこともあります。どちらにするかは、実測して決めるのが確かです。

依存関係による自動調整

strategy を使う最大の利点は、WordPressが依存関係を見て安全な読み込み方に調整してくれる点です。たとえば、deferを指定したスクリプトに依存する別のスクリプトが通常（ブロッキング）で読み込まれる場合、実行順を守るために、deferを指定したスクリプトもブロッキングに戻されます。asyncを指定したスクリプトに依存するdeferのスクリプトがある場合も、順序が保てる形に変わります。

つまり、strategy の指定は「可能ならこの方式で」という希望であり、条件を満たさないときは指定どおりにならないことがあります。deferを指定したのに付かない場合は、依存関係（$deps）と、そのスクリプトに依存している他のスクリプトを確認してください。インラインスクリプト（wp_add_inline_script()）を後ろに付けている場合も、順序の都合で遅延が外れることがあります。

jQueryに依存するスクリプトの注意点

jQueryに依存するスクリプトにdeferを指定することはできますが、jQuery本体はWordPressがブロッキングで読み込むことが多く、他のプラグインがjQueryを前提にしたインラインスクリプトを出力していることもあります。jQuery本体を無理にdefer化すると、jQuery is not defined のエラーが出る原因になります。新しく書くスクリプトはjQueryに依存しない形にしておくと、遅延の効果を得やすくなります。

既に登録済みのスクリプトにdeferを指定する

他のプラグインやテーマが登録したスクリプトにdeferを付けたい場合は、wp_script_add_data() で strategy を追加できます。登録された後、出力される前に実行する必要があるため、優先度を大きくして wp_enqueue_scripts にフックします。

add_action( 'wp_enqueue_scripts', function () {
	// 'some-plugin-script' は実際のハンドル名に置き換える
	if ( wp_script_is( 'some-plugin-script', 'registered' ) ) {
		wp_script_add_data( 'some-plugin-script', 'strategy', 'defer' );
	}
}, 100 );

ハンドル名は、ページのソースで <script> タグの id 属性（ハンドル名-js の形）を見ると分かります。この方法でも依存関係の自動調整は効くので、タグを直接書き換えるより安全です。

WordPress 6.2以前の場合：script_loader_tagフィルター

6.3より前の環境では、script_loader_tag フィルターでタグに属性を足す方法が使われてきました。ただし、依存関係を考慮しないため、対象を絞らないとスクリプトの実行順が崩れます。

add_filter( 'script_loader_tag', function ( $tag, $handle ) {
	$targets = array( 'mytheme-main' ); // deferを付けるハンドルだけを列挙
	if ( in_array( $handle, $targets, true ) && false === strpos( $tag, ' defer' ) ) {
		$tag = str_replace( ' src=', ' defer src=', $tag );
	}
	return $tag;
}, 10, 2 );

WordPressを6.3以降に更新できるなら、この方法は使わず strategy 引数へ移行することをおすすめします。両方を併用すると defer が二重に付いたり、意図と違う順序になったりします。

JavaScriptを最小化（minify）する方法

最小化は、空白・改行・コメントを取り除き、変数名を短くするなどしてファイルサイズを小さくする処理です。転送量が減り、ブラウザの解析も少し速くなります。方法は大きく2つあります。

ビルドツールで最小化する（自作コード向け）

自分で書いたテーマやプラグインのJavaScriptは、ビルド時に最小化したファイルを作り、それを読み込むのが基本です。元のファイルは編集用として残し、最小化版を本番で使います。

# esbuild を使う場合（1ファイルにまとめて最小化）
npx esbuild src/main.js --bundle --minify --outfile=assets/js/main.min.js

# Terser を使う場合（圧縮 -c と変数名短縮 -m）
npx terser src/main.js -c -m -o assets/js/main.min.js

ブロック開発などで @wordpress/scripts を使っている場合は、wp-scripts build で本番用に最小化されたファイルが出力されます。同時に生成される .asset.php には依存スクリプトとバージョンが入っているので、それを wp_register_script() に渡す形が一般的です。

なお、WordPress本体のスクリプトは最初から最小化版（.min.js）が読み込まれています。開発時に元のファイルを読みたい場合は wp-config.php で define( 'SCRIPT_DEBUG', true ); を指定します。本番環境では false（未指定）のままにしてください。

プラグインで最小化する（既存サイト向け）

他のプラグインやテーマのスクリプトまでまとめて最小化したい場合は、Autoptimize、LiteSpeed Cache、WP Rocketなどの最適化・キャッシュ系プラグインの機能を使えます。多くは「JavaScriptの最小化」「結合」「遅延」といった項目を個別にオンにできます。

ここでつまずきやすいのが「結合」です。複数のファイルを1つにまとめると、HTTP/2以降の環境では効果が小さいうえ、実行順の変化でエラーが起きやすくなります。まずは最小化だけを有効にし、遅延や結合は一つずつ試すと、問題が出たときに原因を切り分けやすくなります。設定を変えたら、プラグインとサーバーのキャッシュを削除してから確認してください。各プラグインの設定項目の名称や場所はバージョンで変わることがあります（2026年10月現在）。

効果と不具合の確認方法

設定後は、次の順で確認します。

ページのソースを表示し、対象の <script> に defer 属性が付いているか、ファイル名が .min.js などの最小化版になっているかを見る
ブラウザの開発者ツールの「コンソール」を開き、is not defined などのエラーが出ていないか確認する
メニューの開閉、フォーム送信、スライダー、カートなど、JavaScriptで動く部分を実際に操作する
PageSpeed Insightsで計測し、レンダリングを妨げるリソースの指摘やTotal Blocking Timeの変化を見る

ログイン中は管理バーなど別のスクリプトも読み込まれるため、表示確認はログアウトした状態やシークレットウィンドウでも行ってください。数値は計測ごとに揺れるので、変更前後で数回ずつ測って比べるのがよいでしょう。

まとめ

deferは「並行してダウンロードし、HTML解析後に記述順で実行」。DOMを操作する一般的なスクリプトに向いている
WordPress 6.3以降は wp_enqueue_script() の第5引数に array( 'strategy' => 'defer', 'in_footer' => true ) を渡すのが推奨
strategy は依存関係を見て自動で調整されるため、指定どおりにならない場合は依存関係を確認する
他プラグインのスクリプトには wp_script_add_data( $handle, 'strategy', 'defer' ) が使える
script_loader_tag での書き換えは6.2以前向けの方法で、対象を絞って使う
自作コードはesbuildやTerser、wp-scripts build で最小化し、既存サイトは最適化プラグインで最小化から試す
変更後はソース・コンソール・実際の操作・PageSpeed Insightsの順で確認する