Webブラウザという「魔法の箱」が、どうやってあなたの書いたコードを画面に描き出しているのか。その裏側を覗いてみたいと思ったあなたは、すでに立派なエンジニアの入り口に立っています。

今回は、Webサイトの「表示速度」を左右する、もっとも身近で、もっとも奥が深い`script`タグの`defer`と`async`という魔法の杖についてお話ししましょう。

—

1. ブラウザは「生真面目な料理人」

ブラウザはHTMLを上から順に読み込みます。まるでレシピを一行ずつ読みながら料理を作るシェフのように、HTMLを解析してDOMツリー（ページの中身の設計図）を組み立てていくのです。

しかし、ここで一つ問題があります。もしHTMLの途中に`

ブラウザの裏側を学ぼう

これらのタグのおかげで、画面がスムーズに表示されます。

どちらを使えばいいの？

迷ったら、まずは`defer`を使いましょう。

`defer`はスクリプトの実行順序を維持してくれるため、複数のファイルを読み込む場合でも「Aを読み込んでからBを動かす」といった依存関係が崩れません。ほとんどのWebサイト制作において、`defer`は最も安定した最適化の選択肢です。

---

最後に：完璧を求めすぎないで

最初は「えっ、どっちを優先すべき？」「このスクリプトはどっち？」と悩むこともあるかもしれません。でも大丈夫です。

プロの現場でも、最初からすべてを最適化する人はいません。まずは「`script`タグは、とりあえず`defer`をつける癖をつけてみよう」という小さな一歩から始めてみてください。それだけで、あなたの作るWebサイトは、驚くほど軽快に動くようになります。

ブラウザの仕組みを理解することは、ユーザーの「待ち時間」という名のストレスを減らすこと。それは、あなたにしかできない、とても素敵な「おもてなし」なのですから。

さあ、次はどんな魔法をWebサイトにかけてみますか？応援していますよ！