Open10

HTTPキャッシュ/CDN/Fastly

  • ローカルキャッシュ
  • シェアードキャッシュ

Cache-Controlヘッダ

Cache-Control: public, max-age=604800
  • public, private, no-store ディレクティブ
    • no-storeはFastlyではキャッシュされるので実装の違いに注意すること
  • max-age ディレクティブ
    • s-maxage ディレクティブはシェアードキャッシュにおいてmax-ageより優先される
    • 指定された有効期限内は、クライアントはサーバに対してリクエストすることなくキャッシュを利用する
  • immutable ディレクティブ
    • リロード時も含めて永続的にキャッシュ有効性検証が行われない

キャッシュの有効性検証 (revalidate)

  • 有効期限が指定されない、期限が切れた場合に行われる
  • キャッシュが有効であれば 304 Not Modified が返され、ダウンロードすることなくキャッシュが使用される
  • キャッシュが無効であれば 200 OK が返される
  • 有効性検証を必須にする場合には no-cache, must-revalidate を使用する
    • no-cache は有効性検証をしてからでないとキャッシュが使用できないものであり、キャッシュを使用しないというものではないため注意が必要
    • must-revalidate は no-cache と同じだが、有効性検証時にサーバに到達できない場合には 504 Gateway Timeout として明示的にエラーを返さなければならない強い制約がある

Etag, If-None-Match

  • Etag は受信時のレスポンスヘッダにファイル内容を元にしたハッシュ値が入る
    • ハッシュ値の生成サーバによって生成ロジックは異なる
  • If-None-Match は検証時のリクエストヘッダに付与する
    • ハッシュが同じ値であれば 304 Not Modified を返す

stale-while-revalidate, stale-if-error

Cache-Control: max-age=300, stale-while-revalidate=60
  • 5分の有効期限がの有効期限が切れた後の60秒は、新しいコンテンツを取得するまで期限切れキャッシュを使用する
    • これは裏で非同期にキャッシュを取得しに行く振る舞いを意図している
  • stale-if-error=86400 はオリジンサーバがエラーが発生してる場合でも1日は期限切れキャッシュを表示する

Vary ヘッダ

  • キャッシュのバリエーション制御
    • 同じ URL で別のコンテンツを出力する場合、PC/SPや国際化対応

Fastly

Surrogate

  • Surrogate-Control
  • Surrogate-Capability
  • Surrogate-Key
    • Fastlyが独自に実装
    • スペースで区切られた任意のキー
    • キャッシュのパージのグルーピングに使用される
  • Surrogateヘッダはクライアントに配信する時点で削除されるが Fastly-Debugヘッダを用いることで取得可能

デフォルトでキャッシュされない条件

  • リクエストメソッドがGET, HEAD以外
  • レスポンスヘッダにCache-Control: private
  • レスポンスヘッダにSet-Cookie

有効期限

  1. Surrogate-Control
  2. Cache-Control:s-maxage
  3. Cache-Control: max-age
  4. Expires

キャッシュの削除

  • インスタントパージ
  • ソフトパージ
    • TTLを0にする
    • stale-while-revalidateとの併用が有用
    • 取得に時間のかかるコンテンツなど

キャッシュパージの対象

  • Purge URL - 指定したURL
  • Purge Key - 指定したSurrogate-Keyヘッダを持つコンテンツ
  • Purge All - 全てのコンテンツ
    • ソフトパージは使えない

キャッシュしない

  • privateでなければすべてキャッシュするので、max-age=0
  • シェアードキャッシュしない場合にはprivate, no-store

ESI

  • Edge Side Include
<body>
  <esi:include src="/header.html" />
  <esi:include src="/main.html" />
</body>

JSとCSSのキャッシュ

  • revving
    • [name].[hash].js
  • ServiceWorkerはmax-age=0で配信する
    • ChoromeなどではHTTPキャッシュを参照しない
ログインするとコメントできます