Webサイトが表示される仕組み

会社でWebサイトをお持ちの方、もしくはこれから作成を検討されている方いると思いますが、そもそもWebサイトがどのような仕組みで表示されているか分かりますか。基本的なことではありますが、本ページでは用語を踏まえて説明していきます。

各種用語説明

Webブラウザ

Webブラウザとは、Webページを閲覧するためのアプリです。Webブラウザは、指定されたURLを表示するためのデータをWebサーバに要求し、Webサーバから受信したデータを用いてページを画面に描画します。有名なWebブラウザとしては下記のようなものがあります。

・Google Chrome ・Microsoft Edge ・Safari ・Fire Fox

Webサーバ

Webサーバはクライアントからの要求に対し、Webページを閲覧するために必要なデータを保管・送信するサーバです。このデータとは、具体的にはHTMLファイル、CSSファイル、画像などです。

DNSサーバ

DNSサーバとはドメインをIPアドレスに変換してくれるサーバです。ユーザーはWebサーバにデータを要求すれば、Webページ閲覧に必要なデータは取得できますが、要求を出すWebサーバがWeb上のどこにあるのかを知っている必要があります。正確に言うと、WebサーバのIPアドレスを知っている必要があります。そのWebサーバのIPアドレスを教えてくれるのがこのDNSサーバです。

ドメイン

ドメインとは住所のようなもので、数字だけのIPアドレスを人が直感で理解できるように文字列で表してくれているものです。弊社では「kabufuji.com」にあたります。ドメインは、覚えやすい一方で、数字だけのIPアドレスは覚えにくいです。

Webページ表示の仕組みと表示までの流れ

 

①IPアドレスDNSサーバへ問合せる

ユーザーが入力したURLから「ドメイン」部分だけを抜き出し、そのドメインのIPアドレスをDNSサーバに対して要求します。上の例だと「kabufuji.com」のIPアドレスを要求します。

 

②IPアドレスの返答
DNSサーバは要求されたドメインのIPアドレスを特定し、そのIPアドレスをユーザーに返答します。例に当てはめれば、DNSサーバは「kabufuji.com」のIPアドレスを特定し、そのIPアドレス「192.168.0.1」をユーザーに返答します。

これによりユーザーは見たいWebサイトに必要となるデータの要求先WebサーバのIPアドレスを知ることができます。続いてそのWebサーバに対して実際にデータの要求を行います。

 

③Webサーバへデータ要求
次にユーザーは得られたIPアドレスのWebサーバに接続しデータを要求します。

 

④要求されたページのデータ転送
Webサーバは要求されたWebページを閲覧するのに必要なHTMLをユーザーに送信します。ユーザーは受信したデータをWebブラウザによりページを画面に描画されます。

キャッシュ動作時のページ表示の流れ

Webページ表示する際に毎回この①から④が実行されるかというと、実はそういうわけではありません。それはキャッシュという機能があるからです。

キャッシュ

キャッシュというのは、直近でDNSサーバやWebサーバから取得した情報やデータを一時的に保存しておき、もし同じWebページの表示が要求された場合にはDNSサーバやWebサーバから取得するのではなく、その一時的に保存している情報やデータの方を使用する機能です。キャッシュを利用することで、ページ表示の速度が上がる・ページ表示時のデータ通信量が減るというメリットがある。

 

一度Webページを表示して、すぐに同じドメイン内の違うページを表示させる場合は、そのドメインに対応するWebサーバのアドレスを既にユーザーは知っている(DNSキャッシュしている)ためDNSサーバに問い合わせする必要がありません。そのため、DNSサーバとのやりとりは行わずにすぐにWebサーバへページの要求を行います。

 

さらに、すぐにまた同じWebページを表示した場合は、そのWebページを表示するために必要なデータをユーザーはすでに持っている(ブラウザキャッシュしている)ためWebサーバのやりとりも行うこともなくWebページを表示することができます。キャッシュによって①から④の処理が省略されるようになりますが、最初の一度目のWebページ表示時は必ず①から④の処理が行われます。

まとめ

今回はWebサイトの表示の仕組みについて説明しました。ユーザーはブラウザを開いて検索するか、URLを入力すれば簡単にWebサイトを閲覧できますが、その裏でDNSサーバー、Webサーバーがそれぞれ機能してます。これからWebサイトを作成する、もしくはWebサーバーを変更したいと言った場合には、ただWebサーバーにアップロードすれば良いのではなく、DNSサーバーなどそれに関連した設定も必要になってきますので、仕組みを理解しておくとより良いと思います。