ecサイト|eコマース|パッケージ|アクセス解析|広告効果測定|Webマーケティング構築・開発

株式会社インターオフィス

Webサイトの高速化ルール3　Expiresヘッダーを追加しよう! (Yahoo! developer netoworkより翻訳)

カテゴリー： Webサイト開発日記, アーキテクチャー

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

Webサイトの高速化ルール3　Expiresヘッダーを追加しよう!

May 24, 2007

------------------------------------------------------------------------------

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

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

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

------------------------------------------------------------------------------

Webページのデザインはますますリッチになっています。つまり、ページ中に使用されるJavascript、スタイルシート、画像、Flash等は数が増えているということです。サイトを始めて訪問するユーザは多くのhttpリクエストをする必要があります。

でもExpiresヘッダーを使えば、それらのコンポーネントをキャッシュさせて、不必要なhttpリクエストを避けることができます。Expiresヘッダーはよく画像をキャッシュさせるために使用されますが、Javascript、スタイルシート、Flashといったすべてのコンポーネントでも使用すべきです。

ブラウザやプロキシサーバにキャッシュさせることで、httpリクエストの数もサイズも減らして、より高速にページをロードできるようになります。Webサーバは、httpレスポンスのExpiresヘッダーによって、そのコンポーネントがいつまでキャッシュして良いか、クライアントに知らせることができます。

つまり、以下のExpiresヘッダーは、このコンポーネントは2010年の4月15日までは、キャッシュしていても古くなることはないと、ブラウザに知らせることが出来るのです。

Expires: Thu, 15 Apr 2010 20:00:00 GMT

もしwebサーバにApacheを使っているなら、ExiresDefaultディレクティブによって、当日からの相対的な日数によって期限を指定することができます。

以下のExiresDefaultディレクティブの例は、リクエスト時から10年間で期限を指定しています。

ExpiresDefault "access plus 10 years"

非常に遠い未来の期限をExpiresヘッダーに指定した場合、コンポーネントを実際に変更する必要があれば、コンポーネントのファイル名を変更しなければならないことを忘れないで下さい
Yahoo!では、コンポーネントのファイル名にバージョン番号を含める（例えばyahoo_2.0.6.js.のように）ことで、ビルドプロセスでこの作業を実施しています。

非常に遠い未来の期限をExpiresヘッダーに指定することは、訪問済みのユーザのページビューに影響する場合があるということです。

初回訪問のユーザやブラウザキャッシュをクリアして空になっているユーザのHTTPリクエスト数には影響はありません。パフォーマンス改善に対するインパクトは、ブラウザ上にキャッシュしているユーザがどれくらいかに影響されます。

我々がYahoo!でユーザのキャッシュの有無を測定したところ、75-85%程度でした。

非常に遠い未来の期限をExpiresヘッダーに指定してユーザのブラウザキャッシュを再利用することで、ユーザとの接続において、1byteも送信すること無しにページを表示することができようになります。

Steve Souders

---------------------------------------------------------------------
◆◆訳注◆◆
「HTTPリクエストの数を減らす」ためには、トータルとしてはこれが一番効果がでるはずだ。
ただし、ブログのようなユーザが画像をアップするサイトでは、画像ファイル名は連番等で使い捨てるように設計する必要がある。
画像の内容が更新されても、キャッシュしたままで良いように。逆に設計がまずいと画像が更新されないという単純なバグになってしまう。

ちなみにこんな感じ。

PLAIN TEXT

CODE: