09. キャッシュの基本

この章では、キャッシュの基本を学びます。

Web制作では、「修正したのに反映されない」「自分だけ古い表示になる」「クライアントの画面だけ直っていない」ということがよくあります。

その原因の1つがキャッシュです。

キャッシュとは

キャッシュは、一度読み込んだデータを一時的に保存して、次回以降の表示を速くする仕組みです。

たとえば、同じCSSや画像を毎回サーバーから取り直すのではなく、ブラウザに保存しておいたものを使うことがあります。

キャッシュがあると、ページの表示は速くなります。

一方で、修正したファイルではなく、古いファイルが使われてしまうことがあります。

ブラウザキャッシュ

ブラウザキャッシュは、ブラウザが手元に保存しているキャッシュです。

CSS、JavaScript、画像、フォントなどがキャッシュされることがあります。

たとえば、CSSを修正してアップロードしても、ブラウザが古いCSSを使っていると、見た目が変わりません。

その場合、ハードリロードやキャッシュ削除で確認します。

サーバー側のキャッシュ

サーバー側でキャッシュが使われていることもあります。

特にWordPressやCMS、レンタルサーバーの高速化機能では、ページの内容がキャッシュされることがあります。

この場合、ブラウザのキャッシュを消しても、サーバーから返ってくる内容自体が古いことがあります。

サーバーやCMSの管理画面にキャッシュ削除機能がある場合は、そこから削除します。

CDNキャッシュ

CDNを使っている場合、CDN側にもキャッシュがあります。

CDNは、ユーザーに近い場所からファイルを配信するために、HTML、CSS、画像などを一時保存することがあります。

このキャッシュが残っていると、サーバー上のファイルを更新しても、しばらく古い内容が表示されることがあります。

CDNを使っているサイトでは、CDN側のキャッシュ削除が必要になる場合があります。

修正したのに反映されない理由

修正が反映されない時、原因はキャッシュだけとは限りません。

よくある原因は次の通りです。

  • そもそもファイルをアップロードしていない
  • 編集したファイルと公開されているファイルが違う
  • パスが違う
  • ブラウザキャッシュが残っている
  • サーバー側のキャッシュが残っている
  • CDNキャッシュが残っている
  • ビルド後のファイルを更新していない

「キャッシュだと思ったら、単に別ファイルを編集していた」ということもあります。

まずは、公開されているファイルが本当に更新されているか確認します。

ハードリロード

ハードリロードは、ブラウザキャッシュを無視してページを再読み込みする方法です。

Chromeでは、DevToolsを開いた状態でリロードボタンを長押しすると、キャッシュ削除とハード再読み込みを選べることがあります。

ショートカットは環境によって違います。

重要なのは、通常の再読み込みだけでは古いキャッシュが残ることがある、という点です。

シークレットウィンドウで確認する意味

シークレットウィンドウやプライベートブラウズを使うと、通常のブラウザ状態とは別の環境で確認できます。

キャッシュやログイン状態の影響を切り分けたい時に役立ちます。

ただし、シークレットウィンドウでも完全にすべてのキャッシュやネットワークの影響を避けられるわけではありません。

それでも、まず確認する方法としては便利です。

ファイル名変更とキャッシュバスティング

CSSやJavaScriptの更新を確実に反映させるために、ファイル名にハッシュを付けることがあります。

ハッシュ付きファイル名の例
style.a1b2c3.css
main.d4e5f6.js

ファイル名が変わると、ブラウザは別のファイルとして読み込みます。

このように、キャッシュを避けるためにURLやファイル名を変える考え方を、キャッシュバスティングと呼ぶことがあります。

Astroなどのビルドツールでは、本番ビルド時にハッシュ付きのファイル名が生成されることがあります。

キャッシュを疑うタイミング

次のような時は、キャッシュを疑います。

  • 修正したはずのCSSが反映されない
  • 自分のPCでは直っているがクライアントは古い表示のまま
  • スマホだけ古い画像が出る
  • CDNを使っている
  • WordPressのキャッシュプラグインを使っている
  • サーバーの高速化機能を使っている

ただし、キャッシュと決めつけず、ファイルのアップロードやパスも確認します。

確認の順番

反映されない時は、次の順番で確認します。

  1. 編集したファイルが正しいか確認する
  2. 本番にアップロードまたはデプロイされているか確認する
  3. Networkタブで読み込まれているファイルURLを確認する
  4. ハードリロードする
  5. シークレットウィンドウで確認する
  6. CMSやサーバーのキャッシュを削除する
  7. CDNキャッシュを削除する
  8. 別端末や別回線で確認する

この章のまとめ

  • キャッシュは表示を速くするためにデータを一時保存する仕組み
  • キャッシュには、ブラウザ、サーバー、CMS、CDNなど複数の種類がある
  • 修正が反映されない時は、キャッシュだけでなくアップロード漏れやパスミスも疑う
  • ハードリロードやシークレットウィンドウは切り分けに役立つ
  • 本番では、キャッシュ削除やファイル名変更が必要になることがある