WordPress（Page Speed対応） - JavaScript の解析を遅延する

難易度

★★★★すごく大変

概要

ブラウザは、Javascriptで書かれているコードをパース（プログラムで扱えるようなデータに変換すること）します。Javascriptの実行が必要とされるまでパースを遅らせることで、ページ表示には必要のないレンダリング（画面に表示する内容を描画する処理）を減らし、読み込み時間の削減につながります。

ページの最後（の直上）にJavascriptを配置することが、Javascriptの解析を遅延する処理だと混同されがちなので注意しましょう。Javascriptの読み込みを最後にするだけでは、画面表示を優先するだけであり、ページの読み込み完了の時間を削減することには繋がりません。表示が優先されることにより、体感速度は向上しますが、ブラウザの読み込み中を表すインジケーターはJavascriptの読み込みが完了するまでくるくると回り続けます。インジケーターの表示が消えるまで、次のアクションを待つユーザーさんも多くいると思うので、ページ読み込み完了の時間を削減することはユーザーさんの使い勝手向上に役立つ有効な施策の一つになるでしょう。

「JavaScript の解析を遅延する」では、Javascriptの実行が必要とされるまでパースを遅らせることで、ページ表示には必要のないレンダリング（画面に表示する内容を描画する処理）を減らし、ページの読み込み完了の時間を削減するテクニックになります。

対応方法は大きく分けて3つあります。

scriptにasyncを付ける
Javascriptの実行が必要とされるまで、JavaScriptの読み込みを遅延させる
JavaScriptをコメントとして読み込み、必要になったら実行する（モバイルのアプリで使用されている手法）

2、3のやり方がわからなかった為、この中では、「1.scriptにasyncを付ける」を行ってみました。 scriptにasyncをつけると、「利用可能になった時点でスクリプトが非同期に実行される」ようになるようです。

[html]<script src='/js/jquery.js'></script> <script src='/js/a.js'></script> </body>[/html]

↓

[html]<script src='/js/jquery.js' async></script> <script src='/js/a.js' async></script> </body>[/html]

asyncを追加したところ、Javascriptエラー。asyncを追加したことにより a.js　→　jquery.js　といった順番でJavascriptが実行され、jquery.jsを必要とするJavascript（a.js）の場合、jquery.jsにもasyncを追加するとエラーとなってしまいます。

jqueryなど、順序を正しく読み込まないと動作しなくなったりするJavascriptにasyncを付ける際は要注意です。

[html]<script src='/js/jquery.js'></script> <script src='/js/a.js' async></script> </body>[/html]

とすることでエラーが起きなくなりました。