async・deferとは？scriptの読み込みタイミングの違い

なぜscriptの読み込み方が問題になるのか

ブラウザはHTMLを上から順に読みながらページを組み立てます。途中で何も指定のないscriptタグに出会うと、ブラウザはいったんHTMLの解析を止めて、そのJavaScriptをダウンロードして実行し終えるまで待ちます。

この間、ページの組み立てが止まるため、scriptが重いほど表示が遅れます。とくにHTMLの先頭付近に大きなscriptを置くと、本文が出るまで真っ白な時間が長くなりがちです。これを避けるための仕組みがasyncとdeferです。

deferは「解析を止めず、最後にまとめて実行」

deferを付けたscriptは、ダウンロード自体はHTML解析と並行して進みますが、実行はHTMLの解析がすべて終わってから行われます。つまりページの組み立てを邪魔しません。

さらにdeferを付けた複数のscriptは、書かれた順番どおりに実行されます。あるscriptが別のscriptに依存している場合でも順序が守られるため、扱いやすいのが特徴です。

実務ではどこで関係する？

async defer 違いは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

async・deferとは？scriptの読み込みタイミングについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

• 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
• 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
• 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
• 運用の話: 期限、差し替え、削除、共有メッセージまで決める

asyncは「準備でき次第すぐ実行」

asyncを付けたscriptも、ダウンロードはHTML解析と並行して進みます。違うのは実行のタイミングで、ダウンロードが終わった瞬間にHTML解析を一時的に止めて実行します。

そのため実行の順番は読み込みの速さ次第で前後し、書いた順番どおりには動きません。他のscriptに依存しない、独立した処理に向いています。

使い分けの基準

どちらを使うか迷ったときは、scriptの性質と依存関係で判断します。次のような目安で選ぶと失敗が少なくなります。

1. 他のscriptやDOMに依存する処理はdeferを選ぶ
2. 順番どおり実行したい複数scriptはdeferでそろえる
3. アクセス解析など独立して動く処理はasyncを検討する
4. どちらか迷ったらまずdeferを使う
5. scriptはなるべくbodyの末尾近くに置くことも合わせて意識する

属性を付けないとどうなるか

asyncもdeferも付けない素のscriptは、出会った時点でHTML解析を止め、その場でダウンロードして実行します。これがもっとも表示をブロックしやすい形です。

昔ながらの書き方ではbodyの一番下にscriptを置くことで影響を減らしていました。今でも有効な手ですが、headに置きたい場合はdeferを使うと、見た目はheadにありながら解析を止めずに済みます。

読み込みの工夫が体感速度を変える

asyncとdeferは小さな属性ですが、付けるだけで本文が出るまでの時間が短くなり、ユーザーの体感が大きく変わります。表示速度を気にするなら最初に押さえたいポイントです。

変更前後で表示の速さがどう違うかをチームに見比べてもらいたいときは、ギガサイト便のような一時URLで両方のページを共有すると、同じURLのまま中身を差し替えながら確認してもらえます。