Webサイトの表示速度を改善しようと思ってJavaScriptの非同期実行を使ってみました。

<script>: The Script element - HTML: Hypertext Markup Language | MDN
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

元々が document.write を使ったスクリプトだったので、単純に async / defer を追加するだけではうまくいかず、少し調べて

 document.write(html); 

の部分を

 document.getElementById('id').innerHTML = html; 

に書き換えて使うことにしてみました。

この方法だとスクリプトに加えてHTMLの変更が必要になるのが難点ですが、個人的には分かりやすい方法だったので悩んでいる人は試してみてください。ちなみに、 async と defer で実行のタイミングが変ってくるみたいですが、今回は defer の方を使ってみました。