WordPressでjQueryを遅延読み込み（defer）する
ページの表示速度を向上させるために、WordPressでjQueryを遅延読み込みする方法を学びましょう
なぜjQueryを遅延読み込みするのか？
jQueryは依然としてすべてのWordPressインストールに同梱されており、ほとんどのテーマは遅延読み込み（defer）せずにそれを読み込みます。つまり、すべてのページ読み込みにおいてHTMLの解析をブロックします。これを修正する方法は次のとおりです。
最終レビュー：2026年3月 Arjen Karel
2024 Web Almanacによると、主にWordPressの影響で、jQueryはすべてのウェブページの74%に登場します。しかし、モバイルページのわずか47%しか、スクリプトにdefer属性を使用していません。これは、大半のWordPressサイトが依然としてjQueryを同期的に読み込んでおり、HTMLの解析をブロックし、ページ上のすべてのペイント指標、特にLargest Contentful Paintを遅延させていることを意味します。
以下の画像をご覧ください。これは、通常のスクリプト、遅延（defer）スクリプト、非同期（async）スクリプトのHTML解析の違いを示しています。jQueryが遅延読み込みされない場合、ブラウザはスクリプトが実行されるまでHTMLの解析をブロックします。jQueryが遅延読み込みされる場合、ブラウザはパーサーをブロックする必要がありません。そして、これにより大幅な時間を節約できます。完全な比較については、async vs deferとCore Web Vitalsへの影響を参照してください。
テーマビルダーがデフォルトでjQueryを遅延読み込みしていない理由は、レガシーのためです。一部のプラグインは、jQueryに依存する（インライン）スクリプトを追加します。jQueryが遅延読み込みされているのに、jQueryを必要とするスクリプトが遅延読み込みされていない場合、競合（およびエラー）が発生します。
方法1：手動でjQueryを遅延読み込みする
ステップ1：jQueryがエンキューされている場所を見つける
まず、WordPressテーマのどこにjQueryが含まれているかを見つけます。通常はテーマのfunctions.phpファイル、または直接header.phpファイルにあります。次のような行を探します。
wp_enqueue_script('jquery');
これで、jQueryのハンドルが「jquery」と呼ばれることがわかりました。
ステップ2：子テーマを使用する
親テーマを変更する場合は、まず子テーマを作成してください。そうしないと、次回のテーマ更新時に変更が上書きされます。
ステップ3：'defer'属性でjQueryをエンキューする
子テーマのfunctions.phpファイルに次のコードを追加し、jQueryファイルの場所とハンドルに合わせて変更します。ここではWordPress 6.3 defer戦略を使用しています。
function defer_jquery() {
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', '/js/jquery/jquery.js', [], null, [ 'strategy' => 'defer']);
wp_enqueue_script('jquery');
}
}
add_action('wp_enqueue_scripts', 'defer_jquery',100);
分解してみましょう。
wp_deregister_script('jquery')：デフォルトのjQueryスクリプトの登録を解除します。wp_register_script('jquery', '/js/jquery/jquery.js', [], null, [ 'strategy' => 'defer']);：'defer'戦略でjQueryを登録します。wp_enqueue_script('jquery')：変更されたjQueryスクリプトをエンキューします。
これで完成です。WordPressサイトでjQueryを正常に遅延読み込みできました。そしておまけとして、プロセスはまったく同じなので、任意のスクリプトを遅延読み込みする方法がわかりました！WordPress以外の遅延手法の詳細については、JavaScriptを遅延させる16の方法を参照してください。
インラインスクリプトに注意してください。 wp_add_inline_script()を介してafter位置にインラインスクリプトがアタッチされている場合、WordPress 6.3はdefer戦略を暗黙のうちに削除します。jQueryを遅延読み込みしたのに依然として同期的に読み込まれる場合は、プラグインがjQueryハンドルにインラインスクリプトを追加していないか確認してください。
方法2：プラグインを使用する
WP Core Web Vitalsのようなプラグインを使用すると、jQueryの遅延読み込みが非常に簡単になります。また、多くのプラグインは、依存関係も遅延させたり、jQueryが実行されるまでjQueryイベントをキャッシュしたりするなど、いくつか他のトリックを実行することで、発生する可能性のある複雑な問題にも対処できます。
方法3：CloudFlare
jQueryを遅延読み込みするもう1つの非常に簡単な方法は、CloudFlareのRocket Loaderを使用することです。Rocket Loaderは、ページ読み込み中にすべてのスクリプトを無効にし、その後すばやく再度有効にすることで機能します。このトリックはスクリプトの遅延読み込みを模倣しますが、いくつかの欠点があります。
- CloudFlare Rocket Loaderは、プリロードスキャナーと呼ばれるブラウザの機能を壊します。Rocket Loaderを使用すると、スクリプトはプリロードされず、スクリプトのダウンロードと実行に少し時間がかかる場合があります。
- CloudFlare Rocket Loaderはかなり大雑把なツールです。重要なスクリプト、それほど重要ではないスクリプト、あると便利なスクリプトを区別しません。何も考慮せずにすべてを遅延させ、スクリプトのタイミングを制御できなくなります。
2025 Web Almanacによると、WordPressサイトのモバイルでのCore Web Vitals合格率は45%であり、LCPが最も弱い指標でわずか53%です。レンダリングをブロックするjQueryは、最も一般的な原因の1つです。それを遅延読み込みしてもすべてが解決するわけではありませんが、サイトとLCPスコアの合格を隔てる最大のブロッカーの1つが取り除かれます。
変更をテストする
jQueryを遅延読み込みした後、サイトを確認してください。ブラウザコンソールを開いてエラーを探します。メニュー、スライダー、フォームなど、JavaScriptを使用するものすべてをクリックします。何かが壊れている場合は、以下のトラブルシューティングセクションが修正に役立ちます。
トラブルシューティング
問題が発生した場合、それはおそらく3つのカテゴリのいずれかに分類されます。ほとんどの問題は、インスペクタを開いてコンソールタブに移動することで見つけることができます。問題がある場合は、「Uncaught ReferenceError: jQuery is not defined」のような警告が表示される可能性が高いです。
それらを修正するのはそれほど難しくありません。エラーの横には、エラーの発生源への参照があります。それが(index)の場合、インラインスクリプトから発生している可能性が高いです。別のファイルである場合は、タイミングの問題か、そのファイルも遅延読み込みするのを忘れているかのどちらかです。
依存スクリプト
インラインスクリプト
$(function(){
// do something
})
- type="module"トリックを使用します。新しい<script type="module">は、インラインJavaScriptも遅延読み込みします。
- インラインスクリプトを外部ファイルに配置します。変数が必要な場合は、ページ上のインラインスクリプトに直接追加できますが、メインのjQueryに依存する関数は、同様に遅延読み込みされる外部ファイルに配置する必要があります。
タイミングの問題
もう1つの、あまり一般的ではない問題はタイミングから発生します。jQueryが遅延読み込みされない場合、DOMContentLoadedおよびloadイベントの前に実行されます。これに依存することができます。遅延読み込みされる場合、スクリプトはDOMContentLoadedイベントの後に実行される可能性があります。つまり、DOMContentLoadedイベントにイベントハンドラをアタッチした場合、確実に実行されないということです。このような問題が発生した場合は、トリガーを変更するか、関数をjQuery()でラップしてみてください。
CoreDashによって監視されているWordPressサイト全体で、jQueryを含むすべてのスクリプトを遅延読み込みするサイトのp75 LCPは2.1秒ですが、jQueryを同期的に読み込むサイトは3.4秒です。これは、単一の設定変更による38%の改善です。変更をデプロイした後、Real User Monitoringで改善を確認してください。Lighthouseスコアはdefer属性が機能しているかどうかを示しますが、実際の訪問者からのフィールドデータはLCPが実際に改善されたかどうかを示します。スクリプトの配置がCore Web Vitalsにどのように影響するかの詳細については、Core Web Vitals WordPressガイドを参照してください。そしていつものように、行き詰まった場合は遠慮なくご連絡ください！
