ウェブページが表示される仕組み

ウェブページが表示されるまでの0.5秒に起きていること— 実は結構すごいんです

ブラウザにURLを入れてから、ページが表示されるまで、体感では一瞬です。

その裏で何が起きているのかを知ると、 「サイトが重い」 「表示が崩れた」 といったトラブルの意味が分かるようになります。

ざっくり4段階で説明します。

①住所の解決。 まずブラウザは、DNSという仕組みでドメイン名をIPアドレス（サーバーの住所）に変換します。

②取り寄せ。 住所が分かったら、そのサーバーに「このページをください」とリクエストを送ります。サーバーは、ページの設計図であるHTMLというテキストを返します。実は、サーバーから届くのは完成した画面ではなく、材料と組み立て説明書なのです。

③追加の買い出し。 HTMLを読み始めたブラウザは、 「デザイン指定のファイル（CSS）も要る」 「画像も要る」 と気づき、それぞれを追加で取り寄せます。 1ページの表示で、裏では数十回の通信が行われるのが普通です。 画像が重いとページ全体が遅くなる理由は、この買い出しに時間がかかるからです。

④組み立て。 材料が揃った端から、ブラウザが画面を組み立てて描画します。表示が一瞬崩れてから整うことがあるのは、この組み立てが進行中だからです。

つまりウェブページとは、

「あなたのブラウザが、その場で毎回組み立てているもの」

です。

同じページでも、端末や環境で見え方が微妙に違うのはこのためで、私たち制作側が色々な画面サイズで確認する理由でもあります。

この4段階を知っておくと、次回書く「キャッシュ」の話が面白くなるので、続きもぜひ。