blog

AIブログ

【WordPress高速化⑥】jQueryの読み込みを遅らせて表示を速くする

jQueryの読み込みを後回しにして初期表示を速くする方法と、その注意点を解説します。

WordPressサイトの表示速度改善において、jQueryの遅延読み込みは大きな効果をもたらす施策のひとつです。しかし「とりあえずdeferを付ければいい」という認識のまま実装すると、ローディング画面が消えなくなる・メニューが動かないといった致命的な不具合を招くことがあります。本記事では、jQueryを遅延読み込みする仕組みと正しい実装方法、さらに実際の計測データや落とし穴まで、網羅的に解説します。

この記事について

本記事は、自社サイト crystal-method.com（WordPress運用） で実際に表示速度を改善した一次データに基づきます（jQuery・テーマJSを初回操作まで遅延し、モバイルの読み込み完了(load)を 1,295ms→1,137ms に短縮。Google Chrome + Puppeteer／モバイル相当スロットル・5回中央値）。
発行：クリスタルメソッド株式会社（代表取締役河合継）　｜　運営会社　｜　編集方針

WordPressとjQueryの関係を理解する

WordPressはコアにjQueryを同梱しており、テーマや多くのプラグインがこれに依存しています。デフォルト状態では<head>内またはフッター直前でjQuery本体が読み込まれ、それに続いてテーマのJavaScriptファイルが実行されます。

この構造が表示速度のボトルネックになる理由は明確です。ブラウザはHTMLを上から順にパースし、<script>タグに出会うとレンダリングを止めてスクリプトをダウンロード・実行してから次の処理へ進みます。jQueryのファイルサイズは最小化版でも約87KB（gzip後約30KB）あり、回線が細いモバイル環境では無視できない待ち時間を生み出します。

▼ デフォルト状態のリソース読み込み順序

HTMLパース開始

→

⏸ jQuery読み込み
レンダリング停止

→

⏸ テーマJS読み込み
レンダリング停止

→

画面表示

遅延読み込みの目標は、この「レンダリング停止」フェーズを初回描画（First Contentful Paint）が完了した後まで後ろにずらすことです。

遅延読み込みの主な方法と仕組みの違い

jQueryを遅延させるアプローチには複数の手段があり、それぞれ動作タイミングと向き・不向きが異なります。違いを正確に把握しないと「遅延したら壊れた」という状態になります。

手法	実行タイミング	レンダリングブロック	依存スクリプトの順序保証	主な用途
defer	HTMLパース完了後・DOMContentLoaded直前	なし（並行DL）	記述順を保証	jQuery本体＋依存JSをセットで遅延
async	ダウンロード完了次第即時実行	実行時のみ停止	順序不保証	独立したトラッキング系スクリプト
ユーザー操作トリガー遅延	touchstart / scroll / mousemove 検知後	なし	コード側で制御	操作が始まるまで完全に後回し
タイマー遅延（load + N秒）	loadイベント後 + 任意の秒数	なし	コード側で制御	操作しないユーザーもカバー
キャッシュ系プラグイン	プラグインの設定に依存	設定次第	設定次第	GUI操作で手軽に適用

jQueryに対してasyncを付けると、テーマのJSがjQueryより先に実行されて$ is not definedエラーが発生します。jQueryに関しては原則としてasyncは使わないと覚えておきましょう。

wp_enqueue_scriptとscript_loader_tagによるdefer実装

WordPressでjQueryにdeferを付ける最も正確な方法は、functions.phpのscript_loader_tagフィルターを使う方法です。プラグインに頼らずコアのスクリプトを制御できます。

基本的なdefer付与コード

// functions.php

add_filter( 'script_loader_tag', 'crystalmethod_defer_scripts', 10, 3 );

function crystalmethod_defer_scripts( $tag, $handle, $src ) {
    // defer を付与するスクリプトのハンドル名リスト
    $defer_handles = [
        'jquery-core',
        'jquery-migrate',
        'your-theme-script', // テーマのメインJS
    ];

    if ( in_array( $handle, $defer_handles, true ) ) {
        // 既存の <script ... src=...> に defer を追加
        $tag = str_replace( ' src=', ' defer="defer" src=', $tag );
    }

    return $tag;
}

ポイントはjquery-coreとjquery-migrate、そして依存するテーマJSをまとめて同じリストに入れることです。deferはHTMLの記述順を保ったまま並行ダウンロードし、パース完了後に順番どおり実行するため、jQueryが先に読み込まれた状態でテーマJSが動きます。

WordPressがjQueryを出力する仕組みを把握する

WordPress 5.6以降、管理画面では独自バージョンのjQueryが読み込まれますが、フロントエンドではwp_enqueue_scriptsフックでテーマやプラグインが登録したスクリプトが出力されます。ハンドル名はjquery（内部的にはjquery-coreとjquery-migrateをまとめたエイリアス）です。wp_scripts()->registeredを確認するか、ソースを直接検索して実際のハンドル名を把握してから設定してください。

ユーザー操作トリガー＋タイマー遅延の実装

deferより踏み込んだ手法として、「ユーザーが最初に操作するまで」または「loadイベントからN秒後」のどちらか早い方にjQueryを動的挿入する方法があります。当サイトでもこのアプローチを採用し、モバイルのload時間を1,295ms → 1,137msに短縮しました。

実装コードの全体像

// functions.php に追加するインラインスクリプト出力

add_action( 'wp_head', 'crystalmethod_lazy_jquery_inline', 1 );

function crystalmethod_lazy_jquery_inline() {
    // WordPress が wp_enqueue_script で登録する jQuery を無効化
    wp_dequeue_script( 'jquery' );
    wp_dequeue_script( 'jquery-core' );
    wp_dequeue_script( 'jquery-migrate' );

    // jQuery と依存テーマJS の実際のパスを取得
    $jquery_url    = includes_url( 'js/jquery/jquery.min.js' );
    $migrate_url   = includes_url( 'js/jquery/jquery-migrate.min.js' );
    $theme_js_url  = get_template_directory_uri() . '/assets/js/main.min.js';

    echo <<<HTML
<script>
(function() {
    var loaded = false;

    function loadScripts() {
        if (loaded) return;
        loaded = true;

        // jQuery 本体
        var s1 = document.createElement('script');
        s1.src = '{$jquery_url}';
        s1.defer = true;

        // jquery-migrate
        var s2 = document.createElement('script');
        s2.src = '{$migrate_url}';
        s2.defer = true;

        // テーマメインJS
        var s3 = document.createElement('script');
        s3.src = '{$theme_js_url}';
        s3.defer = true;

        document.head.appendChild(s1);
        document.head.appendChild(s2);
        document.head.appendChild(s3);
    }

    // パターン1: ユーザー操作を検知したら即ロード
    var events = ['touchstart', 'mousemove', 'scroll', 'keydown'];
    events.forEach(function(ev) {
        window.addEventListener(ev, loadScripts, { once: true, passive: true });
    });

    // パターン2: load イベント後 3 秒でフォールバック（操作しないユーザー向け）
    window.addEventListener('load', function() {
        setTimeout(loadScripts, 3000);
    });
})();
</script>
HTML;
}

このスクリプト自体は数百バイトのインラインコードであり、HTML内にそのまま展開されるためHTTPリクエストを発生させません。jQueryの本体ファイルのダウンロードだけを「実際に必要になるまで」延期します。

動的挿入スクリプトの読み込み順序を保証する理由

document.createElement('script')で動的に生成したスクリプトは、デフォルトで非同期（asyncと同等）になります。上のコードではs1→s2→s3の順にappendChildしていますが、順序保証のためにはs1.onload内でs2を追加、s2.onload内でs3を追加するコールバックチェーンが確実です。規模が大きいサイトではPromiseベースで制御することを推奨します。

// より堅牢な順序制御（コールバックチェーン版）
function loadScript(src) {
    return new Promise(function(resolve) {
        var s = document.createElement('script');
        s.src = src;
        s.onload = resolve;
        document.head.appendChild(s);
    });
}

function loadScripts() {
    if (loaded) return;
    loaded = true;
    loadScript(jqueryUrl)
        .then(function() { return loadScript(migrateUrl); })
        .then(function() { return loadScript(themeJsUrl); });
}

必ず確認すべき「初期表示必須処理」の罠

遅延読み込みを実装する際に最も多いトラブルが、テーマのJSの中に「ページ読み込み直後に必ず動く必要がある処理」が含まれているケースです。jQueryと一緒に遅延させてしまうと、初期表示が壊れます。

典型的な危険パターン

ローディング画面（オーバーレイ）の解除：$('.loading-wrapper').fadeOut()などの処理。jQueryが遅延すると画面がずっとローディング状態のままになります。
コンテンツの初期表示切り替え：$('.content').show()や$('body').addClass('loaded')など、CSSと連動してコンテンツを見せる処理。
ヒーローエリアのアニメーション初期化：スライダーやfadeInで初回表示を制御するタイプ。
スクロール位置によるヘッダー表示制御：ページ上部でヘッダーを透明にし、スクロールで背景色を付けるような処理。

解決策：vanilla JSインラインで初期処理を切り出す

初期表示に必要な処理だけをjQueryに依存しないvanilla JavaScriptのインラインコードとして<head>内または</body>直前に配置します。jQueryは遅延させつつ、見た目の制御だけは確実に実行する構成です。

// functions.php：ローディング解除をvanilla JSでインライン出力

add_action( 'wp_head', 'crystalmethod_loading_release_inline', 99 );

function crystalmethod_loading_release_inline() {
    echo '<script>
window.addEventListener("load", function() {
    // jQueryなしでローディングオーバーレイを非表示にする
    var loader = document.getElementById("loading-wrapper");
    if (loader) {
        loader.style.opacity = "0";
        loader.style.transition = "opacity 0.4s ease";
        setTimeout(function() {
            loader.style.display = "none";
        }, 400);
    }
    // コンテンツを表示する
    var body = document.body;
    if (body) body.classList.add("page-loaded");
});
</script>';
}

テーマのmain.js内に同様の処理がある場合は、そちらをコメントアウトまたは削除した上でこのインラインコードに置き換えます。「jQueryを遅延させる前に、テーマJSの中身を一行ずつ確認する」というステップを省略しないことが安全な実装の前提です。

UXトレードオフ：メニューの初回タップ遅延

ユーザー操作トリガー型の遅延には、避けられないトレードオフが存在します。「ユーザーが初めてメニューをタップした瞬間に、jQueryのダウンロードが始まる」ため、その操作に対するレスポンスが数百ミリ秒遅れることがあります。

⚠ モバイルでの体感
回線が細い環境（3G相当）では、メニューを初回タップしてからjQueryとテーマJSのダウンロードが完了するまで0.5〜1.5秒程度の遅延が発生することがあります。2回目以降はブラウザキャッシュが効くため遅延はありません。

この問題の影響を最小化するために、以下の判断基準で実装範囲を絞ることを推奨します。

ページ単位で遅延の適用範囲を限定する

たとえば、トップページ（ランディング目的）のみに遅延を適用し、内部ページ（記事詳細・製品ページ等）には通常のdeferを使うという方針が合理的です。

理由は二つあります。

トップページはファーストビュー最適化の恩恵が最も大きく、ユーザーがメニュー操作をするまでの時間的余裕も比較的ある。
内部ページはユーザーがリンクやボタンを積極的に操作することを期待して訪れるため、インタラクティブ性を早期に確保したほうがよい。

// トップページのみ遅延を適用する条件分岐

add_action( 'wp_head', 'crystalmethod_conditional_lazy_jquery', 1 );

function crystalmethod_conditional_lazy_jquery() {
    if ( ! is_front_page() ) {
        return; // トップページ以外はdeferのみ（script_loader_tagフィルター側で対応）
    }
    // トップページ用の遅延ロードコードをここに出力
    // ... (前述の loadScripts 関数)
}

スクロール表示要素がある場合の追加判断

サイトの別ページにスクロール連動で表示されるヘッダーやナビゲーション要素がある場合、そのページでjQueryを遅延させるとページ先頭でスクロールしたときに要素の切り替えが遅延します。トップページは静的なヘッダーのみで、スクロール要素はすべてビューポート内に完結しているか確認してから遅延を適用してください。スクロールイベントを頻繁に使うページでは、遅延をスクロールトリガーではなくload + 3秒のタイマーのみに変更する、あるいは遅延なしのdeferを選択するのが安全です。

プラグインを使った実装（WP Rocket / LiteSpeed Cache）

コードを書かずにjQueryの遅延読み込みを設定したい場合、キャッシュ系プラグインを使う方法があります。主要プラグインの対応状況を整理します。

プラグイン	jQuery遅延の設定場所	方式	除外設定
WP Rocket	ファイル最適化 → 「JavaScriptの遅延実行」	ユーザー操作トリガー	キーワードで除外可能
LiteSpeed Cache	ページ最適化 → JS設定 → 「JS遅延」	defer / 操作トリガー選択可	除外URLパターン設定可
W3 Total Cache	Minify → JS minify settings	defer / async 選択	ファイル単位で除外可
Autoptimize	JS・CSS・HTML → 「JSを強制的にheadに」を外してdefer	defer	除外フィールドあり

プラグインを使う場合でも、「初期表示必須処理」の確認は必須です。WP RocketのJavaScript遅延実行はjQueryを含む全JSを対象にするため、ローディング解除スクリプトが止まるケースが実際に多く報告されています。除外設定でローディング関連のスクリプトハンドルやファイル名を指定するか、上述のvanillaインラインコードに切り出す対処を行ってください。

効果の計測と判断基準

遅延読み込みの効果はPageSpeed InsightsやWebPageTestで計測します。注目すべき指標と期待できる改善幅を整理します。

指標	遅延前の典型値	遅延後の典型変化	理由
FCP（First Contentful Paint）	1.5〜3.0s（モバイル）	100〜400ms 短縮	レンダリングブロック解消
TBT（Total Blocking Time）	200〜800ms	大幅削減	JSのメインスレッド占有が後ろにずれる
TTI（Time to Interactive）	3〜6s（モバイル）	操作トリガー型では計測値が変動しやすい	JSロードタイミングがユーザー依存になるため
load時間	サイト依存	当サイト: 1,295→1,137ms（モバイル）	初回通信量の削減

PageSpeed InsightsのLabデータは合成環境での計測なので、操作トリガー型の遅延はTTIスコアが上下することがあります。実ユーザーの体験はCrUX（フィールドデータ）で確認するとより正確です。

計測時の注意点

キャッシュプラグインのHTMLキャッシュとの組み合わせ：キャッシュがあると変更が反映されない場合がある。計測前にキャッシュをパージする。
管理者ログイン中はキャッシュが効かないテーマ・プラグインが多い。シークレットウィンドウで計測する。
デバッグモード（WP_DEBUG = true）中は非minifyのjQueryが読み込まれることがあるため、本番環境と同じ条件で計測する。

よくあるエラーと対処法

「$ is not defined」エラー

jQueryよりも先にテーマJSが実行されている状態です。対処法は以下のいずれかです。

テーマJSのwp_enqueue_scriptで第4引数（$deps）に['jquery']を指定し直す。
スクリプトを動的挿入している場合はjQueryのonload後にテーマJSを追加するチェーン構造にする。

ローディング画面が消えない

テーマJSに含まれるローディング解除コードがjQueryと一緒に遅延されています。前述のvanilla JSインラインコードでloadイベント後にdisplay:noneを付与する処理を独立させてください。

スライダーが初期化されない

スライダーライブラリ（Swiper / Slickなど）がjQueryより先に実行されようとしている、または逆にjQueryは読み込まれてもスライダーのJSがまだ遅延中という状態です。スライダーライブラリとその初期化コードはjQueryと同じチェーン内に含めるか、スライダーをIntersection Observerで遅延初期化する設計に変更します。

管理バーが崩れる・管理画面のJSが動かない

管理画面（is_admin()）でもdeferやjQueryの差し替えが適用されてしまっているケースです。上述のすべてのコードにif ( is_admin() ) return;の条件分岐を入れてください。

実測エビデンス：自社サイトのUbersuggest計測（改善前→改善後）

jQuery・テーマJSの遅延読み込みを含む一連の最適化により、第三者ツールUbersuggestの「読み込み時間」も実際に改善しました（2026年6月時点・自社サイト crystal-method.com／モバイルは過去28日間の実ユーザー体験ベース）。

まとめ

WordPressにおけるjQueryの遅延読み込みは、正しく実装すれば確実に初回描画を速くできる施策です。重要なポイントを整理します。

deferはjQuery本体と依存JSをセットで適用する。asyncはjQueryには使わない。
ユーザー操作トリガー＋load後タイマーの組み合わせが最もFCPへの効果が大きい。当サイトではモバイルload時間を約1,295ms → 1,137msに短縮した。
テーマJSの中の「初期表示必須処理」（ローディング解除・コンテンツ表示切り替え等）を事前に特定し、vanilla JSインラインコードに切り出すことが最大の落とし穴回避策。
操作トリガー型は初回タップに数百ミリ秒の遅れが生じるトレードオフがあるため、トップページ限定の適用やスクロール要素の有無を考慮して適用範囲を判断する。
プラグインを使う場合も除外設定と初期表示の動作確認は必須。

実装後はPageSpeed InsightsのFCPとTBTを計測し、CrUXのフィールドデータで実ユーザーへの影響を継続的に確認することを推奨します。遅延読み込みは万能ではありませんが、適切に設定すればCore Web Vitalsの改善とユーザー体験向上の両方に直結する有効な手段です。

Study about AI

AIについて学ぶ

Claude Code 公式ドキュメント完全読解ガイド｜導入判断から運用まで

監修河合継（クリスタルメソッド株式会社代表取締役） AI・ディープラーニングに関する特許16件の発明者。国立がん研究センターとの共同研究や、テレビ番組での...
Claude Code ベストプラクティス完全解説｜実装現場で使える設計指針2026

監修河合継（クリスタルメソッド株式会社代表取締役） AI・ディープラーニングに関する特許16件の発明者。国立がん研究センターとの共同研究や、テレビ番組での...
Claude Code 自動化の実装ガイド――設計・事例・セキュリティを徹底解説

監修河合継（クリスタルメソッド株式会社代表取締役） AI・ディープラーニングに関する特許16件の発明者。国立がん研究センターとの共同研究や、テレビ番組での...