jQueryをhead要素内ではなくbody閉じタグの前で読み込ませる

2019/9/21 2019/9/26

PageSpeed InsightsでWEBサイトの表示速度を計測すると、測定結果の改善項目に

レンダリングを妨げるリソースの除外

という改善項目を目にする事が多いと思います。

詳細を見てみると head要素内で読み込まれているCSSやjQueryが表示を遅らせていることがわかります。

見て頂くと解ると思いますが、WordPressに元から入っているjQueryが一番サイズが大きく、表示速度を遅らせています。

そしてjQueryの機能を補うjquery-migrate.min.jsも少しだけ速度を遅らせています。

そもそも入門書などではJavaScriptを読み込ませる場所は、</body>タグ直前というのが多いです

ですので僕はWordPressではないWEBサイトを作成するときは、必ず</body>タグの直前でjQueryを読み込むようにしていました。

それがWordPressではhead要素内にあるのです。

WEBサイトはHTMLの上から順番に読み込まれ、順次実行されていきます。

HTMLの最初の方にあるhead要素の中でファイルサイズの大きいjQuery読み込んで実行させるので、WEBサイトの表示速度の足を引っ張っているのです。

ということでWordPressに標準で搭載されている「jquery.js」と、ついでに「jquery-migrate.min.js」を</body>タグの前で読み込ませることにしました。

1 jQueryの移動方法
2 PageSpeed Insightsが改善した
- 2.1 表示速度の改善
- 2.2 「レンダリングを妨げるリソースの除外」の改善
3 簡単です

jQueryの移動方法

移動方法は簡単です。

functions.phpのどこかに以下のコードを書けば良いだけです。

function move_jquery() {
  //ヘッダーで出力されるjQueryとjQuery Migrateをキューから一旦除去する
  wp_deregister_script('jquery');
  wp_deregister_script('jquery-migrate');

  //jQueryとjQuery Migrateをあらためてキューに入れる（第5引数をtrueにすることでwp_footer関数によりbody閉じタグ直前で出力される）
  wp_enqueue_script('jquery', includes_url('/js/jquery/jquery.js'), false, NULL, true);
  wp_enqueue_script('jquery-migrate', includes_url('/js/jquery/jquery-migrate.min.js'), array('jquery'), NULL, true);
}

add_action('wp_enqueue_scripts', 'move_jquery');

functionの後の関数名は好きな名前にしてください。

関数名を変更した場合はadd_actionの第二引数を同じ関数名にしてください。

参考にさせて頂いたサイト： https://webutubutu.com/webdesign/3981

これにより、head要素内にあったjquery.jsとjquery-migrate.min.jsが</body>の前に移動しました。