サイトを開くと裏で何が起きてる?Webサーバーの仕組み超入門

普段なにげなく開いているウェブサイト。アドレスバーに URL を入れて Enter を押すと、ものの1〜2秒でページが表示されます。

あの1秒のあいだに、世界中のサーバーがバトンを渡しながら仕事をしているわけですが、その流れを意識したことはありますか?ウェブサイトを運営するなら、ざっくり押さえておくと「なぜ遅いのか」「なぜ繋がらないのか」を判断する助けになります。

技術用語は最小限にして、流れだけ追っていきます。

まず登場人物を整理

舞台に立つのは、たいてい以下の4者です:

• あなた(訪問者) が使うブラウザ(Chrome や Safari)
• DNS サーバー … 名前を住所に変換する電話帳
• Web サーバー … サイトのファイルを置いてあるところ(レンタルサーバーの本体)
• データベース … 記事の中身などを保管している場所

ECサイトや動画サイトだとここに「画像配信用の別サーバー」「決済サーバー」など脇役が増えますが、ふつうの個人ブログを開く分には4人で済みます。

物語:あなたが yoursite.com を開くまで

場面1:住所を聞く

ブラウザに https://yoursite.com を入力して Enter を押す。

ブラウザ「yoursite.com の住所おしえて」 DNS サーバー「123.45.67.89 だよ」

ここまで0.05秒くらい。一度問い合わせた住所は、しばらく覚えてくれているので、2回目以降はもっと速い。

場面2:扉をノックする

ブラウザは教わった住所のサーバーに「ページください」と要求を送ります。これが「HTTP リクエスト」と呼ばれるもの。

• 「GET / HTTP/1.1」みたいな1行のお願い
• ついでに「私は Chrome の最新版を使っています」「日本語が読めます」などの自己紹介情報を添える

Web サーバーはこの要求を受け取ります。

場面3:サーバーが答えを組み立てる

ここで Web サーバーの中身によって動きが変わります。

静的サイトの場合:用意してある HTML ファイルを、そのまま返すだけ。シンプルで速い。

WordPress のような動的サイトの場合:

• リクエストを受けた PHP が動く
• 「このURLに対応する記事は何?」とデータベースに聞く
• データベースが「これだよ」と中身を返す
• PHP がテーマと組み合わせて HTML を組み立てる
• 出来上がった HTML を返す

この組み立て作業に、だいたい数百ミリ秒。サイトが遅いと感じるのは、ここで時間がかかっている場合が大半です。

場面4:HTML が届く

ブラウザに HTML が届きます。が、ここで終わりではない。HTML の中には:

• 「style.css も読み込んでね」
• 「画像 image.jpg も持ってきて」
• 「JavaScript の script.js も実行して」

みたいな追加注文が書いてあります。ブラウザはそれを見て、追加で何度もサーバーに問い合わせを発行します。

最近の普通のサイトだと、1ページ表示するのに 30〜100個のリクエストが裏で飛んでいたりします。それぞれが少しずつ時間を使うので、画像が重すぎたりプラグインが多すぎたりすると、表示が遅くなる、というわけです。

場面5:組み立てて画面に出す

全部の素材が揃ったら、ブラウザがレイアウトして、CSS で見た目を整えて、JavaScript で動きを加えて、画面に出す。これが「レンダリング」と呼ばれる工程。

スマホの古い端末で重く感じるのは、たいていここの処理が追いつかないため。最新の iPhone なら一瞬で終わります。

なぜこの流れを知ると役に立つのか

「サイトが遅い」と一言で言っても、流れのどこで詰まっているかで対処が変わります。

• 場面1で遅い → DNS の応答が遅い。DNS サーバーを Cloudflare 等の速いものに変えると改善することがある
• 場面3で遅い → サーバーやデータベースの処理が遅い。プラグイン削減、キャッシュ導入、プランアップで改善
• 場面4で遅い → 画像が重い、リクエスト数が多すぎ。画像圧縮、Lazy Load、不要なスクリプト削除
• 場面5で遅い → 訪問者側の端末が古い。これはサイト側でやれることが限られる

切り分けには Google の PageSpeed Insights や Chrome の開発者ツール(Network タブ)が便利です。

「サーバーが落ちる」とは何が起きている

時々ニュースになる「アクセス殺到でサーバーが落ちた」。あれは場面3でサーバーが処理しきれなくなり、新しいリクエストに「503 Service Unavailable(今ちょっと無理)」を返している状態です。

CPU・メモリの上限に達して PHP が動けなくなる、というのが多いパターン。バズ対策にキャッシュプラグインを入れる、プランをアップする、CDN を挟む、などで解消できます。

まあ、ここまで知らなくても運営はできる

正直、この記事の内容を全部理解していなくてもウェブサイトは運営できます。

ただ、知っていると「サポートに問い合わせるときの説明が早くなる」「外注先のエンジニアと話が通じる」というメリットがあります。ふだんは気にしなくて、何か困ったときに「あ、あの記事に書いてあったな」と思い出す程度の感覚でちょうどいいです。