Cache-Control ヘッダーの設定ガイド — max-age・no-cache・immutableの使い分け
HTTPキャッシュはWebパフォーマンスの根幹です。Cache-Controlヘッダーを適切に設定することで、ブラウザ・CDN・プロキシがレスポンスをキャッシュし、サーバー負荷の削減とユーザー体験の向上を実現できます。HTTP Cache Header Builderで各ディレクティブを組み合わせて最適な設定を見つけましょう。
max-age と s-maxage の違い
max-ageはブラウザとCDN両方に適用されるキャッシュ有効期間（秒）です。s-maxageはCDN（共有キャッシュ）にのみ適用され、max-ageを上書きします。「ブラウザは1時間、CDNは1日キャッシュしてほしい」場合はmax-age=3600, s-maxage=86400と設定します。
no-cache と no-store の違い
no-cacheはキャッシュを保存するが毎回オリジンに再検証する設定です（ETagやLast-Modifiedで304が返ればキャッシュを利用）。no-storeはキャッシュ自体を一切保存しません。セキュリティ要件が高い認証ページにはno-storeを使い、動的だが帯域節約したいページにはno-cacheを使います。
stale-while-revalidate でUXを向上
stale-while-revalidateを設定すると、max-age経過後でも指定秒数内はバックグラウンドで再検証しながら古いキャッシュをすぐに返します。ユーザーには常にキャッシュから即座にレスポンスが届き、バックグラウンドで更新が走るため体感速度が大幅に改善します。例：Cache-Control: max-age=60, stale-while-revalidate=300
immutable で静的アセットを最適化
CSSやJSファイルにコンテンツハッシュを付けたファイル名（app.a1b2c3.js）を使う場合、immutableを設定するとキャッシュ期限内に再検証リクエストすら送りません。Cache-Control: max-age=31536000, immutableが静的アセットの定番設定です。ファイル名が変われば新しいURLになるため古いキャッシュは使われません。