SHOEISHA iD

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

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

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

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

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


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

リクエスト/レスポンス行とは

 リクエスト/レスポンス行はリクエスト(要求)時とレスポンス(返答)時、それぞれ項目が異なります。

リクエスト(要求)の場合

 リクエスト行では1つ目にメソッド名(処理の要求)、2つ目にURI(コンテンツの場所)、3つ目にプロトコル(通常はHTTPのバージョン1.1)です。

GET /sample.html HTTP/1.1

 項目ごとに分解してみます。

メソッド URI プロトコル
GET /sample.html HTTP/1.1

レスポンス(返答)の場合

 レスポンス行では1つ目にプロトコル、2つ目ステータスコード(状態)、3つ目にメッセージという項目が送られてきます。

HTTP/1.1 200 OK

 こちらも項目ごとに分解してみましょう。

プロトコル ステータスコード メッセージ
HTTP/1.1 200 OK

主要なメソッド(HTTP1.1)

 リクエスト行で指定されているメソッドとは、通信する相手側にどのような処理を要求するかを表します。

メソッド 説明
GET サーバーに対してHTMLや画像のリソースを要求します。
広く一般的に利用されているメソッドでWebサイトを閲覧する際のほとんどに
このメソッドを利用しています。
HEAD ボディのないヘッダのみを要求するメソッドです。
POST PHPやRubyなどサーバー側に情報を提供して処理を変えたい時などに利用します。
具体的な例としては、お問い合わせフォームがあります。

主要なHTTPステータスコード(HTTP1.1)

 レスポンス行に指定されているステータスコードとは、通信する際に相手に自身の状態を示します。よく404や503などを見かけることがあるのではないでしょうか。ステータスコードを見ることで、要求しているファイルの状態を知ることができます。

 ここで主要なステータスコードを覚えておきましょう。

コード ステータス
200 リクエストが成功し、要求したドキュメントが返ってきたとき。
304 ドキュメントが更新されていれば新しいドキュメントを返すようリクエストしたが、
更新されていない場合に返ってくるステータスコード。
403 アクセス権がないときなど、実行を拒否したとき。
404 要求したURIに一致するリソースが見つからなかったとき。
500 サーバー内でのエラーにより処理できないとき。
503 サーバーの過負荷かメンテナンスで処理できないとき。

 また、ステータスコードはエラーの状態を確認するだけではなく、ファイルのキャッシュ状態を確認する場合にも利用できます。

 確認方法は別の回で紹介しますが、簡単に説明すると「200」か「304」かでファイルをサーバーからロードしているのか、ローカルキャッシュを利用しているのか判断することができます。

HTTPヘッダーとは

 HTTPヘッダーは、通信相手にクライアント・サーバーに関する自身の状態や要求を提供するためのメタ情報です。

 HTTPヘッダーはリクエスト時とレスポンス時で内容が異なります。

 さらに、HTTPヘッダーには高速化対策に関わるメタデータがいくつか含まれています。

 後々高速化対策の度合いを確認するために必要な知識になるので、どういった情報が含まれているのかここで理解しておきましょう。

リクエストヘッダー

 リクエストヘッダーはユーザーが利用しているブラウザ(要求する側)が作り、サーバー側へ送ります。

 あるサイトのHTMLを要求した時のリクエストヘッダーをみてみましょう(細かな項目を覚える必要はありません)。

Host: dev.classmethod.jp
Connection: keep-alive
Cache-Control: max-age=0
If-Modified-Since: Sun, 13 Jan 2013 15:49:45 GMT
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.52 Safari/537.17
Accept: */*
Referer: http://dev.classmethod.jp/web_acceleration_sample/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: ja,en-US;q=0.8,en;q=0.6
Accept-Charset: UTF-8,*;q=0.5
Cookie: logged_in=yes

 CacheやUser Agentなど、ぱっと見て何か分かりそうなものもありますね。

レスポンスヘッダー

 続いてレスポンスヘッダーです。HTTPリクエストを受け取ったサーバー側が返すレスポンスヘッダーのサンプルは、こうなります。

Server: dev.classmethod.jp
Date: Thu, 17 Jan 2013 12:37:45 GMT
Content-Type: image/png
Content-Length: 1312
Last-Modified: Sun, 13 Jan 2013 15:49:45 GMT
Connection: keep-alive
Expires: Fri, 18 Jan 2013 12:37:45 GMT
Cache-Control: max-age=86400
Accept-Ranges: none

 リクエストヘッダーとはまた違った項目が含まれていますね。

主なメタ情報

 ヘッダーに含まれるメタ情報は主に3つの種類に分かれます。

  • 汎用ヘッダー
    リクエスト/レスポンスどちらでも利用する
  • リクエストヘッダー
    リクエスト時のみ利用する
  • エンティティヘッダー
    エンコード形式など

 この記事ではよく見かけることのあるメタ情報について紹介します。

 どのような意味を表すメタ情報なのか理解しておきましょう。

項目名 リクエスト/レスポンス 説明
Accept リクエスト 受信可能なデータ形式をサーバーに通知します。
Cache-Control リクエスト/レスポンス キャッシュに関する指示をサーバーに通知します。
Connection リクエスト/レスポンス 接続的接続(Keep-Alive)のサポート状態を
サーバーに通知します。
Accept-Encoding リクエスト ブラウザが受信可能なエンコード方式(gzip)を
サーバーに通知します。
Content-Encoding リクエスト/レスポンス コンテンツのエンコード方式(gzip)を
サーバーに通知します。
Content-Type リクエスト/レスポンス MIMEタイプを通知します。
Date リクエスト/レスポンス 応答を返す時刻を通知します。
Expires リクエスト/レスポンス ロードしたコンポーネント(画像やCSS,JavaScriptなど)の
キャッシュ期限
を通知します。
Host リクエスト HTTP1.1で必須とされている項目です。
サーバーに対して要求しているホスト名を通知します。
If-Modified-Since リクエスト クライアント側にキャッシュがある場合、
新しいものがあれば転送するようサーバー側に要求します。
新しいものがなければ304のステータスコードを返し、
引き続きクライアント側のキャッシュを利用します。
Etags レスポンス キャッシュされているコンポーネントが、
Webサーバー上のオリジナルと一致しているか検証します。
Last-Modified リクエスト/レスポンス コンポーネントが最後に更新された時刻を通知します。
Referer リクエスト 要求元になったページのURLをサーバー側に通知します。
User-Agent リクエスト ブラウザのユーザーエージェントをサーバーに通知します。
Warning リクエスト/レスポンス ワーニングとメッセージを通知します。

次のページ
HTTPボディとは

修正履歴

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング