[試] サイト表示速度を高速化する方法 | WordPress jQuery読み込み位置の最適化

[試] サイト表示速度を高速化する方法 | WordPress jQuery読み込み位置の最適化

サイト表示速度を高速化する方法として、よくJavaScriptは、</body>直前で、つまり最後に読み込んだほうが良いというテクニックを聞いたことがあると思います。

これは、何も対処しない場合はJavaScriptのロード処理がレンダリングをブロッキングするためで、対応としては上述した通り最後に読み込ませるか、非同期読み込みを行うようにします。

このエントリでは、WordPressのjQueryライブラリに関して読み込み位置調整による表示速度の改善方法を共有したいと思います。

SPONSORED LINK

アウトライン

WordPress jQuery読み込み位置最適化による表示速度高速化

jQueryの読み込み位置の工夫がメインですが、CDNの活用とjQuery本体の軽量化に関する工夫もあわせて紹介します。

CDN上のjQueryライブラリの活用

WordPressには、元々jQueryライブラリがバンドルされており、それが自動的に読み込まれるようになっています。このjQueryライブラリは、WordPressをインストールしたサーバから読み込まれます。

この代わりに、高速なCDN上に配置されたjQueryライブラリを読み込むようにします。以下がそのコードです。利用中のWordPressテーマのfunctions.phpに追記します。

同梱のjQueryでないと正常に表示されないケースがあるため、管理画面ではif文で条件分岐することにより元々バンドルされているjQueryを読む方式になっています。

軽量化されたjQueryライブラリの活用

jQueryライブラリには、バージョンが1系と2系があります。2系は、1系がサポートしている古いブラウザのサポートをやめることでコードを最適化し、1系より軽量化されています。

古いブラウザのサポートを割り切れるのであれば、2系を使用した方がライブラリのダウンロードにかかる時間を短縮できます。

以下は、2系の最新版である2.0.3を読み込むコードです。

jQueryライブラリ読み込み位置の最適化

レンダリングの邪魔をしないよう読み込み位置をフッタ側に移動します。

方法としては、WordPressでJavaScriptの読み込みに使用されるwp_enqueue_script、またはwp_register_script関数にwp_footer側での出力を指示する引数を与えます。これによりテーマのheader.phpのwp_header内ではなく、footer.php内のwp_footer側でJavaScriptが読み込まれるようになります。

wp_enqueue_script、wp_register_scriptの詳細は、Codexを確認して下さい。

以下のコードでいえば、wp_register_scriptの最後のtrueが該当します。

実はこれだけだと落とし穴があって、上記jQuery本体と依存関係にあるプラグイン同梱jQueryライブラリについてもwp_footer側で読み込まれるよう設定されていないと、設定通りフッタ側に移動してくれません。

対応としては、プラグインのjQueryライブラリもwp_footer側で読み込まれる様にwp_enqueue_scriptの引数を設定してあげます。具体的には、該当する引数にwp_footer側での読み込みを指示するtrueを設定します。

Crayon Syntax highligherを例に修正方法を説明します。

Crayon Syntax Highlighterは、crayon_wp.class.phpのenqueue_resources()という関数の中でwp_enqueue_scriptを使用して読み込み処理が行われています。よって、そのwp_enqueue_scriptの引数を以下の通り修正します。

<修正前>

<修正後>
wp_enqueue_scriptの引数の最後にtrueを追加しています。

jQuery本体の読み込み位置をフッタ側にする上での注意点

自分で埋め込んで使用しているjQueryライブラリがある場合は、footer.php内のwp_footer()より下に配置する必要があります。

wp_footerより前にjQueryライブラリを読み込んでしまうと、jQuery本体の読み込み前のため正常に動作しなくなる恐れがあるためです。

また導入しているプラグインやライブラリによっては、wp_header側で読み込まないと正常に動作しないものもあると思うので確認しながら適用する必要があります。

まとめ

サイト表示高速化の方法の一つとして、WordPressのjQueryのライブラリ読み込み位置の最適化方法について紹介しました。