memocarilog

このブログ（WordPress）では、プラグインと自作のjQueryコードを wp_enqueue_script 関数を使って head内へ出力していましたが、表示速度を上げる為にJSファイルをページ下で読み込むように変更してみました。

wp_enqueue_script 関数で読み込んだファイルは、デフォルトでは HTMLファイルの head内に出力しますが、簡単に footer（body終了タグ直前）への出力へ変更することができます。

wp_enqueue_script 関数とは

WordPress は WordPress本体に jQuery や prototype 等のライブラリが入っている為、自分でわざわざ jQuery本体を用意しなくてもよいようになっています。

この wp_enqueue_script関数を使って jQueryプラグイン等を読み込むと、jQuery本体等必要なライブラリも合わせて適切な順序で読み込んでくれるので便利です。

具体的な使用方法などは、過去記事「WordPressで外部ファイルに置いたjQueryスクリプトを使う | memocarilog」で解説しています。

body終了タグ直前へ出力する方法

テンプレートファイルの記述場所を変更する

wp_enqueue_script は WordPress3.3 よりbody タグ内で使用可能となっていたようです。その為テンプレートファイルに記述している場合は、head内に記述していたwp_enqueue_script部分をそのまま footer.php の body終了タグ直前付近に移せばそれだけでOKです。

記入場所は wp_footer() タグの前後どちらに書いても出力場所は同じもようです。詳しくは以下の参考サイトをご参照下さい。

参考：wp_enqueue_scriptの仕様がWordPress3.3でちょこっと変わったって話 | マイペースクリエイターの覚え書き

functions.phpに記述している場合

wp_enqueue_script を functions.phpに記述している場合は、第5引数にあたる $in_footer に true を渡せばbody終了タグ直前へ出力場所を変更してくれます。

具体的には以下のようになります。最後の部分でtrueとします。

wp_enqueue_script('ハンドル名（任意）', 'ファイルの場所/function.js', array('jquery'), '', true )

head内に wp_enqueue_script を記述したままでも同様の方法で出力場所をフッターへ変更できます。

参考：Function Reference/wp enqueue script « WordPress Codex

ライブラリ本体の読み込み位置変更

上記までのように、jQueryプラグイン等は簡単にページ下部へ読み込み場所を変更できましたが、jQuery本体がhead内に残ったままであれ？？っとなりました。

これは wp_enqueue_script の「適切なところで読み込みをしてくれる」機能によるものでした。WPプラグインで有効にしているものの中でJSをhead内で読みこむものがあった為、上でjQuery本体を読み込む必要がありました。それをWPが自動的に判断してくれたのでした。

JSが必要なWPプラグインを無効にしたら、自動的にjQuery本体もフッターで読み込んでくれました。WordPressは本当に賢いですね。

JSをページ下で読込むように変更した結果の表示速度変化

結局今のところ、WPプラグインに関するJSは移動できていなくて、JQプラグインと一部SNSのシェアボタンJS部分をページ下部へ移動しただけです。

表示速度を計測するツールでみたら、読み込み位置変更後も表示速度は全く変わりませんでした…。このブログは表示速度が遅くなってしまっているのですが、その他の部分（画像など）でも対策が必要なようです…。