読者です 読者をやめる 読者になる 読者になる

炊きたてのご飯が食べたい

定時に帰れるっていいね。自宅勤務できるっていいね。子どもと炊きたてのご飯が食べられる。アクトインディでは積極的にエンジニアを募集中です。

WordPress(Page Speed対応) - JavaScript の解析を遅延する


難易度

★★★★すごく大変

概要

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

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

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

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

  1. scriptにasyncを付ける
  2. Javascriptの実行が必要とされるまで、JavaScriptの読み込みを遅延させる
  3. 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]

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

注意点

Javascriptは順序を正しく読み込まないと動作しなくなったりする為、予期せぬエラーが起こります。

確認方法

Chromeでサイトを開き、ソースを確認。asyncが追記されていて、Javascriptエラーが起きていないこと。正常に動作していることが確認できればOK。

参考サイト

JavaScript の解析を遅延する

scriptタグにHTML5からサポートされているasync属性を指定すると読み込む順番を担保しないで実行される