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

  • このエントリーをはてなブックマークに追加
  • Pocket

attention この記事は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 を使っているスクリプトは正常に動作しなくなってしまいます。

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

ご訪問ありがとうございます。
参考になりましたら『いいね!』もお願いします。

ITの活用情報を毎週お届けする無料メルマガに是非ご登録ください。

閉じる

ご意見・ご感想をお待ちしております。

いただいた情報は一般公開されません。(入力いただいたメールアドレスにてご返信させていただきます)
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。