SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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


  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 こんにちは、クラスメソッド株式会社で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データなど)

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

次のページ
リクエスト/レスポンス行とは

修正履歴

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
これから身につけるWebサイト高速化テクニック連載記事一覧

もっと読む

この記事の著者

野中 龍一(クラスメソッド株式会社)(ノナカ リュウイチ(クラスメソッドカブシキガイシャ))

クラスメソッドで企画、制作、運用までやるWebマスター。Webデザイン、Webサイト高速化、広義のHTML5、JavaScript、jQuery、CSS3、PHP、AWSを広く浅くやってます。クラスメソッド開発ブログを作ってる中の人。http://dev.classmethod.jp/author/nonaka-ryuichi/

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7065 2013/04/02 15:54

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング