気軽に楽しくプログラムと遊ぶ

自分が興味があってためになるかもって思う情報を提供しています。

CDNの画像キャッシュとmax-ageの関係性

CDNの画像とキャッシュの扱いについての理解を整理しておきます。

前提

  • CDNに画面で読み込む画像が保存してある
  • max-ageを用いて、CDNへの更新確認における通信量を減らしたい

CDNから画像を取得する流れ

https://knowledge.sakura.ad.jp/images/2018/11/cdn02-680x235.png

画像引用元

上記画像のコンテンツはhtmlですが、画像として参照して下さい。

①キャッシュない場合、まずはCDNから画像を読み込む。
②その後、ローカルにキャッシュする。
③次にアクセス行ったときはmax-ageをみて期限切れであれば、CDNを参照する。
CDNで画像更新がなければ、 HTTP 304 Not Modifiedが返却され、ローカルキャッシュを参照する。
CDNで画像更新があればCDNから画像を取得してローカルキャッシュを更新する。

max-ageの設定例

1 ブラウザに一切、キャッシュさせたくない場合

サーバからクライアントへのHTTP応答ヘッダ
→ Cache-Control "no-cache"

常時、アクセスが必要な動画コンテンツなどはこの設定にした方が安全。
ローカルキャッシュされないので、常にサーバーにアクセスが発生します。

2 ブラウザにキャッシュさせるけど、変更ないか都度確認するようにしたい

サーバからクライアントへのHTTP応答ヘッダ
→ Cache-Control "max-age=0"
→ Expires "Mon, 26 Jul 1997 05:00:00 GMT"

最初から既に期限切れ。
期限切れなので、常にサーバーに画像が更新されているか確認します。
変更なしであれば、 HTTP 304 Not Modified が返却され、画像を返却をせずに通信量を減らせます。
この場合は、ローカルキャッシュが参照されます。

3 ブラウザにキャッシュさせ、都度確認はそれほど必要ない

サーバからクライアントへのHTTP応答ヘッダ
→ Cache-Control "max-age=秒数" 例:86400など(この場合は1日)
→ Expires "ここに期限の日時"

max-ageの期限に達していない限り、ブラウザはサーバに問い合わせを行いません。
期限がきれた後の挙動は、2と同じです。

キャッシュ対象

一般的には2パターンの指定方法があります。

サブドメイン指定

  • サブドメイン配下の全ファイルをCDN経由にする
  • サブドメイン配下に画像や動画などデータ量が多いファイルを集めておいて、キャッシュする
  • メリデメ:ファイル転送量は削減できるが、根本的なサーバへの負荷は減らせない可能性がある

ドメイン指定

  • サイトすべてをCDN経由にする
  • ファイル単位でキャッシュするかどうかを設定
  • メリデメ:全ファイルをキャッシュできるが、更新しても反映されないという事故が発生しうる

参考URL

ブラウザのキャッシュコントロールを正しく理解する - Qiita