defer と async を使ってサイト高速化 - ナデズダ・ゴボリン🖥

<script> タグには defer または async 属性を指定できます。この2つは挙動が異なるため、うまく使い分けてサイトの表示を高速化しましょう。 <script> タグ まず、defer や async を使わずに <script> タグで外部ファイルを読み込む場合について見ていきます。 <script src="script.js"></script> このように記述した場合、HTMLパーサはこの部分に到達するとHTMLのパースを停止し、スクリプトファイルのダウンロード、および実行を行います。実行が終わると再びHTMLのパースに戻ります。 ただしこの挙動は document.write などを使ってHTMLを出力するようなスクリプトでない限り、不必要にHTMLのパースを止めてしまっています。 というわけで、「このスクリプトはHTMLのパースを止めてまで実行する必要はないですよ

[sugarte]

defer は DOMContentLoaded を考慮。async は load を考慮。