WordPress（Page Speed対応） - 非同期リソースを使用する

難易度

★★★★すごく大変

概要

ブラウザがJavascriptをパース（プログラムで扱えるようなデータに変換すること）している間は、そのJavascript以降に書かれているHTMLのレンダリング処理（画面に表示する内容を描画する処理）が止まり、ページの表示に待ちが発生することになります。

Javascriptを非同期に読み込むことで、HTMLのパースとレンダリングをスクリプトの実行の完了を待たずに続けることができ、ページの表示速度を速めることができます。

スクリプトが非同期に読み込まれた場合、実行はブラウザーのUIスレッドが実行中でなくなるまで、遅延されるようです。

• ページの表示に関係がないスクリプト
• ファーストビュー以降のページ構築に必要なスクリプト
• ページ上であまり重要ではないコンテンツ表示に必要なスクリプト

の場合は、非同期で読み込んだほうが良いです。

DOM要素でscriptを生成するすれば、最近のブラウザーで非同期に読みこむことができるそうなので、自前のJavascriptを非同期に読み込めるよう対応してください。

アクセス解析で有名なGoogle Analyticsは、ページの表示にも関係がなく、非同期に読み込むべきであるJavascriptの一つです。古いコードは非同期読み込みに対応していない為、新しいバージョンのコードに差し替えましょう。

注意点

Javascriptは順序を正しく読み込まないと動作しなくなったりする為、対応後は必ず実行処理の確認をしましょう。

確認方法

Chromeでサイトを開き、ソースを確認。Javascriptエラーが起きていないことを確認。非同期で実行されているかの確認方法は残念ながら知りません。

参考サイト

非同期リソースを使用する url http://t32k.github.com/speed/rtt/PreferAsyncResources.html