ハイパフォーマンスWebサイト フロントエンドのパフォーマンスの重要性から続いています。

Webサイトの高速化 ルール13 ETagsを正しく設定する!

July 23, 2007

——————————————————————————

http://developer.yahoo.net/blog/archives/performance/より翻訳。

Steve Souders は Yahoo!の「Chief Performance Yahoo!」です。

これは彼の「パフォーマンス改善のベストプラクティス」を書いた一連のブログです。

——————————————————————————

Entityタグ(ETags)はWebサーバやブラウザが、ブラウザのキャッシュされたコンポーネントと、Webサーバ上のオリジナルが一致しているかどうかを決定するためのメカニズムです。 “entity”とは、コンポーネント(画像とかスクリプトとかスタイルシートとか)と呼んでいるものと同じ意味です。

ETagは、最終更新日(last-modified date)での比較よりもより柔軟性があるコンポーネントの検証メカニズムです。ETagは、コンポーネントのバージョンをユニークな文字列で示します。WebサーバはコンポーネントのETagをレスポンスヘッダで特定します。

  1. HTTP/1.1 200 OK
  2. Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
  3. ETag: "10c24bc-4ab-457e1c1f"
  4. Content-Length: 12195

ブラウザは、次におなじコンポーネントをリクエストする際に、If-None-Matchヘッダーと一緒に以前受け取ったETagをWebサーバに送ります。もし、ETagが一致していれば、サーバはステータス304だけを返します。

  1. GET /i/yahoo.gif HTTP/1.1
  2. Host: us.yimg.com
  3. If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
  4. If-None-Match: "10c24bc-4ab-457e1c1f"
  5. HTTP/1.1 304 Not Modified

ETagの問題は、Webサーバの特定の一台にヒモづけられるような属性によって作成されるということです。つまり、Webサーバが複数台で運用されている場合に、コンポーネントへのリクエストが違うWebサーバに届いた場合は、ETagが異なった値になるので、304ではなく、実際のコンポーネントが戻されてしまうということになります。デフォルトの場合、ApacheでもIISでも、ETagにはサーバが異なれば別の値が生成される要素が含まれます。

Apacheの1.3や2.xの場合、ETagはiNode、ファイルサイズ、更新日時で生成されます。同じディレクトリィ構成の複数のサーバの場合、ファイルサイズや更新日時は一致しても、iNodeは必ず違う値になります。

IIS5やIIS6の場合も同じ問題が発生します。IISの場合のETagの形式は、更新日時とChangeNumberというもので構成されます。ChangeNumberとはIISがコンフィグの変更を管理するためのカウンタです。これは、Webサーバ間で同じ値であることはあまりありません。

結果として、Webサーバが異なれば、同じコンポーネント(画像とか)であってもETagの値は異なることになります。ETagの値が異なれば、ユーザはよりサイズが小さい304レスポンスの替わりに、200レスポンスとサイズの大きなコンポーネント自身を受け取ることになります。Webサイトを1台のサーバで運用している限り問題にはなりませんが、複数台で運用している場合にはページ表示は遅くなりサーバの負荷も高くなります。また、ネットワーク帯域も消費され、プロキシサーバも有効にキャッシュしてくれません。たとえ、遠い未来の期日のExpiresヘッダーを使っても、ユーザがリロードやリフレッシュするたびに、コンポーネントに対するgetリクエストが発生してしまいます。

もしETagが提供する柔軟な検証メカニズムを利用しないなら、ETagを全部取り除いたほうが良いでしょう。その場合、Last-Modifiedヘッダーが更新日付に基づいてコンポーネントを比較します。ETagを取り除けば、レスポンスとそれに続くリクエストのHTTPヘッダーのサイズも減らせます。

Microsoft Support の記事にIISでのETagの除去の方法が記載されています。

Apacheの場合は設定ファイルに以下の行を追加するだけです。

  1. FileETag none

Steve Souders

——————————————————————–
◆◆訳注◆◆

FileETag Mtime Size
とすると記載している例が多いが、中途半端で疑問。

FileETag none
で良いはず。

関連情報として、ETagのこと(第一回)ETagのこと(第ニ回)

———————————————————————
エントリ一覧

Webサイトの高速化 フロントエンドのパフォーマンスの重要性
Webサイトの高速化 ルール1 HTTPリクエストの数を減らそう!
Webサイトの高速化 ルール2 CDNを使おう!
Webサイトの高速化 ルール3 Expiresヘッダーを追加しよう!
Webサイトの高速化 ルール4 コンポーネントを圧縮しよう!
Webサイトの高速化 ルール5 CSSは上に!
Webサイトの高速化 ルール6 scriptは下に!
Webサイトの高速化 ルール7 CSSのExpression()は使わない!
Webサイトの高速化 ルール8 JavaScriptとCSSは外部ファイルに!
Webサイトの高速化 ルール9 DNS Lookupsを減らそう!
Webサイトの高速化 ルール10 コードのサイズを圧縮する!
Webサイトの高速化 ルール11 リダイレクトを避けよう!
Webサイトの高速化 ルール12 スクリプトの重複に気をつける!
Webサイトの高速化 ルール13 ETagを正しく設定する!