Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Webサイト高速化に必要なHTTPの仕組みを理解する

これから身につけるWebサイト高速化テクニック(2)

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載ではWeb担当者やWebデザイナー、コーダーの方々に向けて、Webサイト高速化に関する手法や技術について解説していきます。第2回は、Webサイトの高速化に欠かせない前提知識として「HTTP」の概要を解説します。

目次

はじめに

 こんにちは、クラスメソッド株式会社でWebを担当している野中です。これから身につけるWebサイト高速化テクニック第2回目です。

 第1回の「Webサイト高速化対策の現状」は読んでいただけましたか?「Webサイト高速化対策の現状」では高速化対策がなぜ必要なのかを紹介しているので、この回を読む前にぜひ読んでおいてください。

 今回は、Webサイトの高速化に大きく関係するHTTPについて復習したいと思います。高速化対策と言ってもWebサイトが遅延する原因はさまざまです。

 読み込むファイル数が多いことやサーバー側の処理に時間がかかっている、またはエンドユーザーが利用しているネットワークが原因かもしれません。

 ところが原因を探っていくと、Webサイトが遅くなってしまう要因の多くにHTTPが関係しています。

 実際の高速化手法も大事ですが、事前知識としてHTTPについて知っておきましょう。

対象読者

 この連載は、Webサイト高速化に興味のあるWebデザイナー、フロントエンドエンジニア、サーバーサイドエンジニア、Webディレクター、Web担当者を対象にしています。

HTTPとは

 名前を聞いたことのない方はいないと思いますが、HTTP(Hypertext Transfer Protocol)とは主にPCやスマートフォンでWebサイト・アプリケーションを閲覧する際の送受信に利用している通信プロトコルです。

 普段、Webサイトを見ているときに当たり前のように利用している技術です。URLの頭によく付いていますよね。

 少し深く説明すると、異機種間のデータ通信を実現するためのOSI参照モデル(OSI reference model)という基本方針があり、HTTPは7つ目のアプリケーション層に位置します。

 OSI参照モデルは、基本情報処理技術者試験で最初に勉強することですが、デザイナーよりの方ほど目に触れる機会は少ないのではないかと思います。OSI参照モデルについて詳しく覚える必要はありません。何となくイメージを持ってください。

 実際にOSI参照モデルをもとに、サーバーとクライアントがどのような流れで通信するか簡単に説明するとこうなります。

2大通信ルール(トランスポート・プロトコル)

 HTTPと関連してクライアントとサーバーがお互いに通信し合う際に利用される2大通信ルール(トランスポート・プロトコル)が、TCP(Transmission Control Protocol)UDP(User Datagram Protocol)というパケット型の通信です。

 ちなみにTCPやUDPは第4層に属しています。それぞれの特性を紹介しましょう。

 ネットワーク上に流れる情報は、すごく不安定なもので時々どこかへいってしまいます。そこで、誰かがその情報について信頼性を保証できるよう動いていたりします。信頼性を保証するためにいろいろなチェックを行っているわけですね。それを担っているのがTCPというプロトコルです。TCPは通信の信頼性を保証する代わりに、少しチェックするための時間がかかります。逆に信頼性を保証せず、短い時間で多くの通信を優先するプロトコルがあります。それがUDPです。

 一般的なWebサイトやアプリケーションは信頼性が必要なのでTCPが利用され、ストリーミング配信などにUDPが利用されています。

 ここではHTTPとTCPの関係について、もう少し深く見ていきましょう。

HTTPリクエストとレスポンスについて

 HTTPは基本的に1つのリクエスト(要求)に対して1つのレスポンス(返答)を返します。

 リクエストおよびレスポンスでやり取りされるデータの中身は、大きく分けて3つの情報で構成されています。

  1. リクエスト/レスポンス行
    どのようにデータを取得するかの要求内容とそれに対する返答(リクエスト時とレスポンス時で異なります)
  2. ヘッダー
    通信相手にクライアント・サーバーに関する自身の状態や要求を示すためのメタデータ
  3. ボディ
    通信相手に提供する実際のコンテンツ(HTMLや画像、POSTデータなど)

 リクエスト/レスポンス行、ヘッダーのメタデータについて詳しく見ていきましょう。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

修正履歴

  • 2013/04/02 15:45 タイトルを修正いたしました

著者プロフィール

バックナンバー

連載:これから身につけるWebサイト高速化テクニック

おすすめ記事

All contents copyright © 2006-2016 Shoeisha Co., Ltd. All rights reserved. ver.1.5