DevToolsで確認するキャッシュ
はじめに
ブラウザには複数のキャッシュの仕組みが存在し、それぞれに異なる役割や動作タイミングがあります。
今回は、そんなブラウザのキャッシュの仕組みの中で、DevToolsで確認しやすい以下の3つをピックアップして確認方法から用途についてまとめてみました 🙌
- インメモリキャッシュ：同じタブ内での再描画を高速にする
- ブラウザキャッシュ (HTTP/ディスクキャッシュ)：再訪問時の読み込み時間を短縮する
- Service Worker キャッシュ：オフラインでもアプリを動かすための土台
これらはすべて、Chrome DevToolsの Networkタブ や Applicationタブ で確認ができるため、「このキャッシュはいつ・なぜ使われているのか？」 実際に目で見て理解できるという大きなメリットがあります。
大まかに図で理解する
| 特性 | 🔍 インメモリキャッシュ | 💾 ブラウザキャッシュ | ⚙️ Service Worker キャッシュ |
|---|---|---|---|
| 🗂️ 保存場所 | メモリ (RAM) | ディスク (HDD/SSD) | ディスク/IndexedDB |
| 🧠 保持期間 | タブを閉じると消える | ブラウザ再起動後も保持 | 明示的に削除するまで保持 |
| 🔗 共有範囲 | 同じタブ内のみ | ブラウザ全体で共有 | ブラウザ全体で共有 |
| 🔄 リセットされる条件 | タブを閉じる or リロード | HTTPヘッダ設定 or 手動削除 | SW更新 or 手動削除 |
| 🚀 ユースケース | ページ内の再描画を高速化 | 画像・CSSなどの静的リソース | オフライン対応や動的データ管理 |
| 📏 容量制限 | メモリ依存 | ブラウザ設定/OS依存 | ブラウザ設定/OS依存 |
| 🛠️ 制御方法 | JS変数に直接格納 | HTTPヘッダで設定 | SWスクリプト内でAPI制御 |
インメモリキャッシュ
インメモリキャッシュは、ブラウザのタブごとに管理される一時的なキャッシュです。
同じタブ内でのみ有効で、ページの再描画を高速化するために活用されます。
インメモリキャッシュの仕組み
- 各タブは独立したメモリ領域を持っており、タブをまたいでの共有はできない
- タブを閉じるとキャッシュへの参照がなくなり解放される
- ハードリロード (Ctrl+Shift+R) や DevToolsのキャッシュ無効化時は再取得される
つまり、「同じタブでの通常リロード」には有効ですが、 「別タブ」や「ハードリロード」では再取得が必要となるのがポイントです。
DevToolsで確認してみる
Chrome DevTools の Networkタブで、リソースの「Size」欄に memory cache と表示されれば、インメモリキャッシュが効いている状態です。
同じタブでの確認
- GitHub を開く
- DevTools > Networkタブ を開いた状態でページをリロード
-
「Size」列に
memory cacheが表示される
💡 「Time」列を確認すると、0ms〜1ms程度の超高速でリソースが取得されていることがわかります。
別タブでの挙動を確認
インメモリキャッシュがタブをまたいで共有されないことを確認してみましょう。
- 新しいタブを開き、再び GitHub へアクセス
- DevTools > Networkタブ で「Size」列を確認
-
disk cacheと表示され、前回より遅い取得時間 (約10〜20ms) になっているはずです
これは、インメモリキャッシュではなくディスクキャッシュから取得されているためです。
ユースケース
- SPA（シングルページアプリケーション）：ページ遷移をせず、同じタブ内でデータを使い回すとき
- 大容量のリスト描画：DOM再描画時にキャッシュしたデータを即時再利用
- ユーザー操作の即時反映：計算済みのデータやフィルター結果を保持し、体感速度を向上
ブラウザキャッシュ（HTTP/ディスクキャッシュ）
ブラウザキャッシュは、Webサイトのパフォーマンスを向上させるために、HTTPヘッダーの設定をもとにリソースをローカルディスクに保存し、再利用する仕組みです。
一度取得したリソースをキャッシュすることで、次回アクセス時の読み込み時間を大幅に短縮できるため、ページ表示速度の改善やネットワーク負荷の軽減をすることができます。
仕組みを支える3つのHTTPヘッダー
ブラウザキャッシュは、以下のHTTPヘッダーで挙動をコントロールします。
-
Cache-Control：キャッシュ可能期間や再検証ルールを指定 -
Expires：キャッシュの有効期限を指定（Cache-Control優先） -
ETag：サーバー側でリソースのバージョンを判定
これらの設定を適切に組み合わせることで、最新データを取得するタイミングと、キャッシュを活用して効率的に表示するタイミングを制御できます。
DevToolsで確認してみる
ブラウザキャッシュの挙動は、Chrome DevTools の Networkタブで簡単に確認できます。
以下の手順に沿って、キャッシュの有効性や取得元を確認してみましょう！
キャッシュヒットの確認手順
- 新規タブで GitHub を開く
- DevTools > Networkタブ を開き、ページをリロード
-
「Size」列に
disk cacheと表示されていれば、ブラウザキャッシュが有効です
キャッシュが使われている場合、取得時間(Time列)が数ms程度に短縮されているはずです。
初回アクセス時の挙動を再現する方法
「初回アクセス時の挙動」を確認するためには、Chrome DevTools で キャッシュを無効化した状態でリロードします。
手順
- Networkタブを開く
- 上部の「Disable Cache」にチェックを入れる
- Ctrl+R（通常リロード） or Ctrl+Shift+R（ハードリロード）
これで、キャッシュなしでリソースが再取得される様子を確認できます。
引用: Chrome DevTools Network Reference
ユースケース
- ランディングページ：画像やCSS、JSをキャッシュして、訪問時に即表示
- 画像ギャラリー：サムネイル画像を事前キャッシュしてスクロール時に遅延なし表示
- データダッシュボード：更新頻度が低いグラフやデータをキャッシュしてパフォーマンス向上
Service Worker キャッシュ
Service Worker キャッシュは、ブラウザの内部データベースやディスク上に保存され、Cache Storage API を使って Service Worker が管理するキャッシュ機構です。
これにより、オフライン時や再読み込み時でもネットワークを介さずにリソースを取得できるため、PWA（Progressive Web Apps） などでオフライン対応を実現できます。
Service Worker キャッシュの特長
- オフライン時でもページ表示が可能：ネット接続がない状態でもキャッシュからリソースを取得
- 複数タブで共有可能：インメモリキャッシュと異なり、タブを超えてキャッシュを共有
- パフォーマンス向上：頻繁に使うAPIレスポンスや画像をキャッシュし、読み込みを高速化
キャッシュのリセットタイミング
Service Worker キャッシュは、ハードリロード時にも削除されないため、以下の条件でのみ再取得されます。
- DevToolsで手動削除された場合
-
Service Worker が新しいバージョンに更新された場合 (
activateイベント時) -
キャッシュ管理ロジックで
cache.delete()が実行された場合
💡 PWAで古いコンテンツが残る原因は、Service Workerの更新タイミングを制御していないケースが多いです。
DevToolsで確認してみる
Service Worker キャッシュの中身は、 Chrome DevTools の「Applicationタブ」 で確認できます。
確認手順
- ページを開いた状態で DevTools を起動
- 「Applicationタブ」 を選択
- 左側のメニューから 「Cache Storage」 をクリック
- キャッシュリストを選び、内容を確認
引用: Chrome DevTools Documentation
ユースケース
- ニュースアプリ：記事や画像をキャッシュ → オフラインでも閲覧可能
- 地図アプリ：ユーザーが閲覧したエリアのマップタイルをキャッシュ → 地下鉄や飛行機でも表示可能
- ECアプリ：商品のサムネイル画像をキャッシュ → スクロール時の表示を高速化
💡 Google KeepやGoogle Docsでは、Service Workerでオフライン編集を実現し、 ネット接続復帰時に変更内容を同期する仕組みが使われています。
最後に
ブラウザのキャッシュには、今回紹介した 「インメモリキャッシュ」「ブラウザキャッシュ」「Service Worker キャッシュ」 のほかにも、以下のような仕組みがあります。
- Back/Forward Cache (bfcache)：ページの戻る/進む操作を高速化
- Prefetch/Preload/Prerender キャッシュ：ユーザーが次に必要になりそうなリソースを先読みして事前キャッシュ
これらのキャッシュは、通常の Networkタブには表示されない場合があるため、 今回は DevToolsで確認できるキャッシュ にフォーカスして解説しました。
キャッシュを正しく理解し活用することで、アプリの体感速度とUXを大きく向上できますので参考になればと思います🙇♂️
Discussion