キャッシュについて整理してみた

  • 188
    いいね
  • 0
    コメント

Web制作あるある「直ってないです:rage:」「Ctrl+F5してみてください:confounded:」「直りました:smiley:

キャッシュとは

使用頻度の高いデータを高速な記憶装置に蓄えておくことにより、いちいち低速な装置から読み出す無駄を省いて高速化すること。また、その際に使われる高速な記憶装置や、複製されたデータそのもののこと。
- IT用語辞典

Webサイトの表示においては、一度アクセスしたページのデータを特定の場所に保存することで、次回アクセス時の表示を速くし、サーバへの無駄なリクエストを減らせるというメリットがあります。また一口にキャッシュといっても下記の2種類があるので、どちらを指しているのか(あるいは両方か)意識しておきましょう。

  • ブラウザのキャッシュ:そのパソコンのユーザーが見たページのデータがローカルに溜まっていく。
  • キャッシュサーバのキャッシュ:不特定多数のユーザーが見たページのデータがネットワーク上に溜まっていく。

キャッシュの制御方法

:pencil2: HTTPレスポンスヘッダ で制御

:arrow_right: Cache-Control ヘッダ

ブラウザやキャッシュサーバに対して、キャッシュの動作や有効期限を指定するためのものです。

ディレクティブ(コマンド) 説明
must-revalidate キャッシュが期限切れだった場合、オリジンサーバでの確認無しにキャッシュを利用してはならない
no-cache オリジンサーバでの確認無しにキャッシュを利用してはならない
no-store リクエスト、レスポンスの一切を保存してはならない
no-transform 中継者は形式変換してはならない(画像の再圧縮等を防ぐ)
public 複数ユーザーで共有できるようにキャッシュしてよい(主にキャッシュサーバ)
private 特定ユーザーだけが使えるようにキャッシュしてよい(主にブラウザ)
proxy-revalidate privateキャッシュには適用されないことを除き、must-revalidateと同じ
max-age キャッシュの有効期限を設定する(秒数)
s-maxage 共有キャッシュにおいて、max-ageディレクティブまたはExpiresヘッダで指定された値を上書きする

:arrow_right: Expires ヘッダ

Expires "Mon, 26 Jul 1997 05:00:00 GMT"

キャッシュの有効期限を指定します。Cache-Control: max-age と同じですが、 Google Developers によると、

より広くサポートされているため、Cache-Control: max-age よりも Expires をおすすめします

とのこと。

:arrow_right: ETag ヘッダ

同じファイルかどうか比較するための検証子です。一意に識別する値(バージョンやコンテンツハッシュ)を設定。ブラウザからのIf-None-Match リクエストヘッダと比較判断します。

:arrow_right: Last-Modified ヘッダ

同じファイルかどうか比較するための検証子です。最後に改変された日付時刻を設定。ブラウザからのIf-Modified-Since リクエストヘッダと比較判断します。

ETagとLast-Modifiedは両方指定すると冗長になるので、どちらかだけでOK。

:arrow_right: Vary ヘッダ

指定したヘッダ(言語、ユーザーエージェント等)毎に応答表現が変わることを伝えます。
これにより、例えば同一URLでPC向け・スマホ向けページを出し分けている場合、それぞれでキャッシュを持つことが出来ます。

:pencil2: HTMLの<meta>タグで制御

HTML4.xでは<meta>タグでブラウザキャッシュの制御が可能です。(ただしキャッシュサーバのキャッシュを使用してしまう可能性は残ります。)

  • キャッシュさせない
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
  • キャッシュの有効期限を設定
<meta http-equiv="Expires" content="Tue, 16 Feb 2016 14:25:27 GMT">

HTML5ではhttp-equiv属性に対してキャッシュに関するキーワードを設定することは出来ません。

Pragma directives corresponding to headers that affect the HTTP processing model (e.g. caching) must not be registered
- 4.2.5.4 Other pragma directives

なおWebアプリをオフラインで使う目的で策定が進められていたApplication cache APIは廃止予定 とのことです。

参考サイト