URLを入力してからWebページが表示されるまでは、DNS・HTTPリクエスト・レスポンス・DOM構築・レンダリングの5ステップで進みます。ブラウザがHTMLを画面に描く仕組みや、CSSをheadに・JSをbody直前に置く定石の理由まで解説します。
この記事でわかること
- URLを入力してからWebページが表示されるまでの5ステップを順番に理解できる
- DNS・HTTPリクエスト・HTTPレスポンスという通信の流れの役割がわかる
- ブラウザがHTMLをDOMツリーに変換し、レンダリングして画面に描く仕組みがわかる
- 「なぜCSSは
<head>に書くのか」「なぜJSはbody直前なのか」という定石の理由がわかる async／defer属性や表示速度に影響する要素まで整理できる
公的情報源: 総務省「情報通信白書」（参照）
HTMLそのものの基礎から固めたい方は、入門ページを先に読むと理解が早くなります。
結論を先に書きます
URLを打ち込んでEnterを押すと一瞬でページが表示されますが、その裏では5つの処理が高速で連続しています。流れは「①DNSでIPアドレスを調べる → ②HTTPリクエストを送る → ③サーバーがHTMLを返す → ④HTMLを解析してDOMツリーを作る → ⑤レンダリングして描画する」です。
この5ステップを理解すると、表示が遅い・崩れるといったトラブルの「どこで起きているか」を切り分けられるようになります。仕組みを知ることが、最適化の第一歩です。
- 表示までの流れはDNS → リクエスト → レスポンス → パース → レンダリングの5段階
- ブラウザはHTMLをDOM、CSSをCSSOMに変換し、両者を合成して描画する
- CSSやJSは読み込みでDOM構築を止める場合があり、配置と属性で速度が変わる
- ファイル数が多いほど追加リクエストが増え、表示が遅くなる
全体の流れは5ステップ
まず全体像を押さえます。URL入力から画面表示までは、次の5ステップが順番に処理されます。
- URLの入力 → DNSでIPアドレスを調べる
- ブラウザ → サーバーにHTTPリクエストを送る
- サーバー → HTMLファイルをレスポンスで返す
- ブラウザがHTMLを解析してDOMツリーを構築する
- CSS・画像を読み込んでレンダリングして表示する
ここから各ステップを、順を追って具体的に解説します。
STEP1：DNSでIPアドレスを調べる
最初の処理はDNSによる名前解決です。ブラウザはhttps://awcs.orgのようなドメイン名を受け取っても、そのままでは通信できません。インターネットの通信にはIPアドレス（例：203.0.113.1）が必要だからです。
DNS（Domain Name System）は「ドメイン名からIPアドレスを調べる電話帳」のような仕組みです。
awcs.org → DNS問い合わせ → 203.0.113.1（サーバーのIPアドレス）ドメイン名は人間向けの「会社名」、IPアドレスは機械向けの「住所」と考えるとわかりやすいでしょう。DNSは「会社名から住所を教えてくれる案内所」にあたります。
STEP2：HTTPリクエストをサーバーに送る
IPアドレスがわかったら、ブラウザはそのサーバーに向けてHTTPリクエストを送ります。実際に送られる内容は次のような形です。
GET /html-basics HTTP/1.1 Host: awcs.org Accept: text/htmlHTTP（HyperText Transfer Protocol）は、Webでデータをやり取りするためのルール（プロトコル）です。現在は暗号化されたHTTPSが標準になっています。
HTTPメソッドの種類
リクエストの先頭にあるGETは「メソッド」と呼ばれ、何をしたいかを示します。
| メソッド | 用途 |
|---|---|
GET | データを取得する（ページの閲覧） |
POST | データを送信する（フォームの送信） |
PUT | データを更新する |
DELETE | データを削除する |
通常のWebページ閲覧で使われるのはGETメソッドです。フォーム送信などデータを送る場面ではPOSTが使われます。
STEP3：サーバーがHTTPレスポンスを返す
リクエストを受け取ったWebサーバーは、要求されたHTMLファイルを探し、HTTPレスポンスとして返します。レスポンスの先頭にはステータスと種別の情報が付きます。
HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8
<!DOCTYPE html> <html lang="ja"> ...
HTTPステータスコード
レスポンスの先頭にはステータスコードが含まれ、処理の結果を表します。
| コード | 意味 |
|---|---|
200 OK | 正常に取得できた |
301 Moved Permanently | URLが恒久的に変わった（リダイレクト） |
404 Not Found | ページが見つからない |
500 Internal Server Error | サーバー内部エラー |
ページが表示されないとき、このステータスコードを見れば原因の切り分けが進みます。404はページ側、500はサーバー側の問題という見当がつくわけです。
STEP4：HTMLのパース（解析）とDOMツリーの構築
HTMLを受け取ったブラウザは、パース（解析）を行い、内部的なデータ構造に変換します。この構造がDOMツリーです。
DOMツリーとは
DOM（Document Object Model）は、HTMLの構造を木（ツリー）状に表現したものです。タグの親子関係が、そのまま枝分かれの構造になります。
document └── html ├── head │ ├── meta (charset) │ └── title └── body ├── header │ └── h1 "サイト名" ├── main │ ├── h2 "記事タイトル" │ └── p "本文テキスト" └── footerDOMツリーを作ることで、JavaScriptによるHTML要素の操作（追加・変更・削除）が可能になります。タグの正しい入れ子構造を理解したい方は、HTMLの基本構造を徹底解説もあわせてご覧ください。
CSSOMツリーの構築
HTMLと同様に、CSSもパースされてCSSOM（CSS Object Model）ツリーが作られます。DOMとCSSOMが組み合わさることで、最終的な表示スタイルが決まります。CSSの基本的な書き方はCSSとは？書き方の基本・HTMLとの違いで解説しています。
STEP5：レンダリングして画面に表示する
DOMとCSSOMからレンダーツリーが構築され、最終的にブラウザの画面へ描画されます。描画は次の3段階で進みます。
- レイアウト（Layout）：各要素の位置とサイズを計算する
- ペイント（Paint）：ピクセルに色を塗る
- コンポジット（Composite）：レイヤーを合成して最終的な画面を作る
ここまで進んで、ようやく読者の目にページが映ります。1〜5のどれか1つが遅れても、表示は遅くなるということです。
表示速度に影響する要素
表示の流れがわかると、速度を左右するポイントも見えてきます。代表的なのがレンダーブロッキングと、JavaScriptの読み込みタイミングです。
レンダーブロッキングリソース
<head>内のCSSや<body>内の<script>は、DOMの構築を一時停止して処理されます。これをレンダーブロッキングと呼びます。
<!-- CSSは<head>内に → 必要だがブロッキング --> <link rel="stylesheet" href="style.css">
<!-- JSはbody閉じタグ直前に → ブロッキングを防ぐ --> <script src="app.js"></script> </body>
「CSSは<head>、JSはbody直前」という定石は、このブロッキングを避けるためのものです。
async / defer属性
JavaScriptのブロッキングを防ぐには、asyncとdeferという属性も使えます。動作の違いを整理します。
| 属性 | 動作 |
|---|---|
| なし | HTMLのパースを止めてJS実行 |
async | 非同期でダウンロード・取得後すぐ実行 |
defer | 非同期でダウンロード・HTML解析完了後に実行 |
DOMを操作するスクリプトは、解析完了後に実行されるdeferが安全です。
<!-- DOMを操作するスクリプトはdefer推奨 --> <script src="app.js" defer></script>ブラウザが画像・CSS・JSを追加で取得する
表示は1回の通信で終わりません。HTMLのパース中、ブラウザは<img>・<link>・<script>などを見つけるたびに、サーバーへ追加リクエストを送ります。
HTMLを取得 → style.css を取得（CSSリクエスト） → app.js を取得（JSリクエスト） → photo.jpg を取得（画像リクエスト） → hero.jpg を取得（画像リクエスト） ...ファイル数が多いほどリクエストが増え、表示は遅くなります。ファイルをまとめたり圧縮したりするのは、このリクエスト数を減らすためです。画像の扱いはimgタグの使い方でも詳しく解説しています。
よくある質問
表示の仕組みについて、初学者からよく受ける質問を整理しました。
Q1：DNSとIPアドレスの違いは何ですか？
役割が違います。IPアドレスは通信先を特定する「住所」そのもので、DNSは「ドメイン名からそのIPアドレスを調べる仕組み」です。
人間はドメイン名（会社名）で覚え、機械はIPアドレス（住所）で通信します。その橋渡しをするのがDNSだと考えると整理しやすくなります。
Q2：DOMとHTMLはどう違うのですか？
HTMLは文書、DOMはその文書をブラウザが解釈したツリー構造です。ブラウザがHTMLをパースしてDOMを作り、JavaScriptはこのDOMを通じて要素を操作します。
つまりHTMLは「設計図」、DOMは「組み立てられた構造物」のような関係です。タグの一覧はHTMLタグ一覧を参照してください。
Q3：なぜCSSは<head>、JSはbody直前に書くのですか？
レンダーブロッキングを避けるためです。CSSは表示スタイルに必要なため<head>で早く読み込みますが、JSをページ上部に置くとDOM構築が止まり、表示が遅れます。
そのためJSはbody閉じタグ直前に置くか、defer属性を付けるのが定石です。
Q4：表示速度はSEOに影響しますか？
影響します。表示速度はCore Web Vitalsの指標としてユーザー体験の評価に関わり、検索順位の判断材料の1つとされています。
仕組みと施策の全体像はSEOとは？仕組み・基本施策・始め方で整理しています。
Q5：404と500のエラーはどう違いますか？
原因の所在が違います。404はリクエストしたページが見つからない（URL側の問題）、500はサーバー内部でエラーが起きた（サーバー側の問題）ことを示します。
ステータスコードを見れば、どちら側を調べるべきかの当たりが付きます。
まとめ
最後に、URL入力からWebページが表示されるまでの流れを整理します。
- STEP1 DNS解決：ドメイン名 → IPアドレスに変換する
- STEP2 HTTPリクエスト：ブラウザ → サーバーへページを要求する
- STEP3 HTTPレスポンス：サーバー → ブラウザへHTMLを送信する
- STEP4 パース・DOM構築：HTMLを解析してツリー構造に変換する
- STEP5 レンダリング：レイアウト計算 → 描画 → 画面表示
- CSSやJSの配置・属性、ファイル数が表示速度を左右する
この仕組みを理解しておくと、「なぜCSSを<head>に書くのか」「なぜJSをbody直前に書くのか」という定石の理由が腑に落ちます。HTMLの基礎をこれから固めたい方は、HTML入門・基本の書き方と学習ロードマップから順に学ぶのがおすすめです。
免責事項
※本記事はHTML・Webの公開情報をもとにした技術解説です。仕様やブラウザの挙動は変更される場合があるため、実装にあたっては各公式ドキュメントの最新情報をご確認のうえご判断ください。
