トレンドはフレンド

jQueryのCDNをbodyで読み込む wp_headからwp_footerへの変更でWordPress高速化

この記事は約6分で読めます。

よこのじ(@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()の記述位置)で読み込まれることはなくなりました。

25-wp-head-footer-変更前後

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=”参考サイト”]

[/toggle]

タイトルとURLをコピーしました