ブラウザキャッシュ（HTTP Cache）

📌

ブラウザキャッシュとは

ブラウザキャッシュは、以前取得したWebリソースをローカルに保存し、再アクセス時のネットワーク通信を省略する仕組みです。HTTPレスポンスヘッダー（Cache-Control、ETag等）でキャッシュの有効期限や検証方法を制御します。冷蔵庫に例えてみましょう。毎回スーパーに買い物に行く代わりに、冷蔵庫（キャッシュ）に食材を保存しておけば、すぐに料理を始められます。ただし賞味期限（max-age）が切れたら、まだ食べられるか確認（条件付きリクエスト）してから使うか、新しいものを買い直す（200 OK）必要があります。

キャッシュはWebパフォーマンスの最も効果的な最適化手法の一つです。適切に設定すれば、ページロード時間を大幅に短縮し、サーバー負荷を劇的に削減できます。特にCSS・JS・画像などの静的アセットは、長期間キャッシュすることで初回以降のアクセスがほぼ瞬時になります。上のツールで「キャッシュヒット」シナリオを再生すると、サーバーにリクエストを送信せずにレスポンスが返る様子が確認できます。「条件付きリクエスト」シナリオでは、304 Not Modifiedによる帯域節約の仕組みが確認できます。

📌

特徴

• 🎛️Cache-Control：レスポンスヘッダーでキャッシュの挙動を制御するディレクティブです。max-age（有効期限秒数）、no-cache（毎回サーバーに検証）、no-store（キャッシュ禁止）、public（共有キャッシュ可）、private（ブラウザキャッシュのみ）など、きめ細かな制御が可能です。複数のディレクティブを組み合わせて、リソースの種類に応じた最適なキャッシュ戦略を設定します。
• 🔖ETag：リソースの「フィンガープリント（指紋）」として機能するハッシュ値です。サーバーはリソースの内容からETagを生成し、レスポンスヘッダーに含めます。ブラウザは条件付きリクエスト（If-None-Match）でこのETagを送信し、サーバーが現在のリソースのETagと比較することで、変更の有無を判定します。リソースが1バイトでも変わればETagも変わるため、正確な変更検出が可能です。
• 🔄条件付きリクエスト：If-None-Match（ETag比較）やIf-Modified-Since（更新日時比較）ヘッダーを使って、リソースの変更有無をサーバーに問い合わせます。変更がなければ304 Not Modified（ボディなし）で応答し、帯域を節約します。数MBの画像や巨大なJSバンドルでも、変更がなければヘッダーだけの軽量な304レスポンスで済みます。
• 📚キャッシュ階層：ブラウザのキャッシュは複数の層で構成されています。memory cache（メモリ内、最速だがタブを閉じると消える）→ disk cache（ディスク上、永続的だが読み込みがやや遅い）→ network（サーバーに問い合わせ）の順で検索されます。ChromeのDevToolsのNetworkタブで「(from memory cache)」「(from disk cache)」と表示されるのがこの階層です。

📌

ユースケース

📌

用語解説

📌

キャッシュ判定フローチャート

ブラウザがリソースをリクエストしたとき、キャッシュをどう扱うかの判定フローです。

📌

Cache-Controlディレクティブ一覧