wordpresのjQueryをフッターで読み込むのはなぜか。レンダリングブロックのお話

webサイトの高速化が重要視されていますが、WordpressサイトでPageSpeed Insightsを利用すると「スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScriptを排除する」という警告メッセージが表示されることがあります。
これに対する効果的な対策の一つにjQueryをフッターで読み込むというものがありますが、そもそもなぜこのようなことが起こるのでしょうか。
今回はこの警告の原因とも言えるレンダリングブロックとその対処法について紹介します。

レンダリングブロックとは

言葉の通りブラウザのコンテンツの表示処理がブロックされる現象のことです。WordPressのプラグインの多くはjQueryを利用しているので、慣例上head内にjQueryの読み込みをしていることがほとんどだと思います。HTMLは通常記述の上から下へ読み込むので、この状態ではbody要素を読み込む前にjQueryの処理が行われてしまい、コンテンツの表示が遅れてしまいます。
こうして表示が阻害されることをレンダリングブロックといいます。

wordpressサイトでの対処法

前述の通りWordPressのプラグインの多くはjQueryを利用しています。ですのでjQueryの読み込みをなくしてしまうことはサイトの機能に障ります。
つまり、worpressの機能を維持しながらレンダリングブロックに対処する方法がjQueryをフッターで読み込む方法なのです。動きの制御に利用されているjQueryはページ読み込み時の動きには大きく影響していないことが多く、またページ全体の処理時間が同じなら見た目の読み込みが速い方をユーザーは好む傾向があるので、この方法が効果的と考えられています。

ただし、jQueryを利用したプラグインやjavascriptのなかには、head内にjQueryを記述しないと動作しないものもあるので、動作の検証は忘れず行いましょう。

まとめ

PageSpeed Insightsの評価を改善しようとすると、地道な修正の積み重ねが求められることも多いです。webサイトの高速化はユーザー体験をより良くするために必須の施策です。効果的な方法を適応して、サイトの改善に努めましょう。