[Javascript] 非同期設定でレスポンス速度を改善させる

この記事は2年以上前の投稿になります。
記載された情報が古くなっている可能性がございますので十分ご注意ください。

ウェブサイトのレスポンス速度を改善させる手法の1つとして、読み込む JavaScript ファイルの非同期化というものがあります。
通常、外部の JavaScript ファイルを呼び出す場合、特に何も指定しなければ同期設定で読み込まれます。
これを非同期にすることで待ち時間を減らしてレスポンス速度を改善させることができます。

 
先日ご紹介した「GTmetrix」や「PageSpeed Insights」でも非同期を推奨していますね。

 
設定の仕方も簡単です。

<script async src="//xxxxxxxxxxxxxxx.js"></script>

や、こんな感じで設定します。

(function(){
  var elm = document.createElement('script');
     elm.type = 'text/javascript';
     elm.async = true;
     elm.src = '//xxxxxxxxxxxxxxx.js';
})();

 
かといって、何でもかんでも非同期にしていいかというとダメです。

 
最近では良く jQuery を利用した機能を見かけますが、当然 jQuery の機能を使っているなら、jQuery 本体が先にロードされてなければいけません。
つまり、jQuery が非同期で読み込まれてしまったら、jQuery を使っているスクリプトは正常に動作しなくなってしまいます。

非同期の設定はもちろん効果はありますが、利用する場合はスクリプトが非同期で動作どうさせて良いものかどうかを把握している必要があるのです。
※読み込まれる順序や読み込むスクリプト数などで、実は偶然正常に動いているだけというケースもありますのでご注意ください。