よこのじ（@yokonoji_work）です。
WordPressはjQueryの読み込みを標準で用意してくれていますが、読み込み位置が<head>要素になっています。当然、これではレンダリングブロックが発生してページの読み込み速度にも影響があります。jQuery必須のプラグインは多くWordPressにおいてjQueryを使用しないというのは難しいですから、せめてもの対応として</body>でjQueryを読み込むように変更しましょう。
完成形のコード
今回やることは、主に次の3つです。
- wp_head()でのjQuery読み込みを削除
- wp_footer()でjQuery読み込む
- 読み込むjQueryはCDNからとする
</body>直前でjQueryを読み込むことでレンダリングブロックを回避します。また、独自ドメインからjQueryファイルが配信されているため、サーバー負荷を低減するためにCDNを利用するように変更します。
function cdn_jquery() {
if( !is_admin() ) {
wp_deregister_script('jquery');
wp_deregister_script('jquery-core');
wp_deregister_script('jquery-migrate');
wp_register_script('jquery-core', 'https://code.jquery.com/jquery-3.3.1.min.js', array(), '3.3.1', true);
wp_register_script('jquery-migrate', 'https://code.jquery.com/jquery-migrate-3.0.1.min.js', array(), '3.0.1', true);
wp_register_script('jquery', false, array('jquery-core', 'jquery-migrate'), false, true);
wp_enqueue_script('jquery');
}
}
add_action('wp_enqueue_scripts', 'cdn_jquery');
解説
wp_head()でのjQuery読み込みを削除
wp_register_script／wp_enqueue_script関数は、第5引数（$in_footer）によりscriptの記述位置を指定できます。初期値ではfalse=<head>内（wp_head()の記述位置）に記述ですので、一度この登録を解除します。
wp_deregister_scriptは登録されているスクリプトを解除する関数です。この関数でjquery, jquery-core, jquery-migrateを解除しています。jqueryはjQuery本体とmigrateファイルをセットにしたものです。
wp_deregister_script('jquery');
wp_deregister_script('jquery-core');
wp_deregister_script('jquery-migrate');
これで、独自ドメイン管理のjQueryが<head>内（wp_head()の記述位置）で読み込まれることはなくなりました。
wp_footer()でjQuery読み込む
wp_register_script／wp_enqueue_script関数の第5引数（$in_footer）をtrueにすることで、登録したスクリプトはwp_footer()の位置に記述されます。wp_footer()はフッター部分に記述するものですので、</body>直前にスクリプトが挿入されることとなります。
wp_register_script('jquery-core', 'CDNのURL', array(), 'VER', true);
wp_register_script('jquery-migrate', 'CDNのURL', array(), 'VER', true);
wp_register_script('jquery', false, array('jquery-core', 'jquery-migrate'), false, true);
wp_enqueue_script('jquery');
wp_register_scriptはスクリプトの登録のみで、wp_enqueue_scriptは登録済みのスクリプトコードをページに生成します。wp_enqueue_scriptで登録と生成を一緒にすることもできますが、今回はmigrateファイルの読み込みも行うため、wp_register_scriptにてjqueryという名前でjQuery本体（jquery-core）とmigrateファイル（jquery-migrate）をセットにして生成させています。これで、jQuery本体 -> migrateファイルの順で必ず読み込むことができますし、両ファイルの間に別のファイル読み込みが入ることもありません。
第4引数（$ver）には、クエリ文字を指定します。「jquery-3.3.1.min.js?ver=3.3.1」のようにファイルのバージョン管理する場合は何らかの文字列を入力してください。falseであれば指定なしです。
ここまでの対応により、</body>の直前でjQuetyが読み込まれるようになっています。
読み込むjQueryはCDNからとする
jQueryのCDNはGoogleを使いたいところですが、Googleにはmigrateファイルが用意されていません。そのため、公式サイトでも紹介されているStackPathでjQuery本体もmigrateファイルも読み込むことにしました。これにはDNS Lookupの回数を減らすという意図があります。
wp_register_script('jquery-core', 'https://code.jquery.com/jquery-3.3.1.min.js', array(), '3.3.1', true);
wp_register_script('jquery-migrate', 'https://code.jquery.com/jquery-migrate-3.0.1.min.js', array(), '3.0.1', true);
これで</body>の直前でCDNを利用してjQueryを読み込むことができるようになりましたね。ページの表示速度が向上しているはずですので、「Webサイトの表示速度を確認できるサービス5選」にあるようなサービスで状況を確認してみてください。
[toggle title=”参考サイト”]
WordPressに備えてあるjQueryを読み込まずに独自に設定し読み込むようにする
レンダリングをブロックしている jQuery, jQuery-migrate をフッタに移動する
WordPress内蔵のjQueryとjQuery Migrateをフッターで読み込む
[/toggle]
