ブラウザで古い画面が出るのはなぜ? キャッシュと再読み込みの仕組み

ウェブサイトを修正したのに、パソコンでは古いデザインが表示される。スマートフォンでは新しく見えるのに、別の端末では直っていない。そんな経験はありませんか。ブラウザが以前取得したデータを再利用する「キャッシュ」が関係している場合があります。ただし、古い表示の理由を何でもキャッシュのせいにするのも正しくありません。

毎回すべてを取り直すと時間がかかる

ウェブページは文章だけでなく、画像、スタイルシート、プログラムなど複数の部品でできています。ページを開くたびにすべてを通信で取り直すと、表示が遅くなり、通信量も増えます。そこで、一度受け取ったファイルを一時的に保存し、条件が合えば再利用する仕組みがあります。

この仕組みがキャッシュです。例えばサイトのロゴ画像が昨日と変わっていなければ、端末内の保存済み画像を使う方が速く表示できる場合があります。画面を開くたびに同じ画像を送り直さなくて済むからです。これは単なる手抜きではなく、利用者にとっての待ち時間を減らす合理的な工夫です。

しかし、ページを修正した直後には、古い部品が残っていると表示が食い違うことがあります。ロゴだけ古い、文字の大きさだけ前のまま、といった現象も起こり得ます。ページ全体が一つのファイルではないことを思い出すと、原因を探しやすくなります。

「保存できる」と「新しい」は別の条件

HTTPという通信の仕組みには、キャッシュしたデータをいつまで新しいとみなすか、毎回サーバーへ確認するかなどを伝える方法があります。例えば Cache-Control: max-age=3600 という指定は、適切な条件下で最大3600秒、つまり1時間の鮮度期間を示します。

ただし、これは「絶対に1時間後に消える」という意味ではありません。新しさを判定するための期限であって、保存領域からの削除時刻を指定しているわけではないからです。期限を過ぎたデータも、サーバーへ更新の有無を確かめてから再利用できる場合があります。

この確認にはETagやLast-Modifiedなどの仕組みが用いられることがあります。サーバー側に変更がなければ、データ本体を再送する代わりに「変更なし」を伝えられます。速さと新しさを両立させるために、保存と再確認を組み合わせているのです。

再読み込みでも直らない場合がある

ブラウザの再読み込みで新しい内容が表示されることもありますが、いつでもすべてのキャッシュを捨てるとは限りません。履歴から戻る操作では、以前のページの状態をそのまま復元する仕組みが働く場合もあります。再読み込みの種類やブラウザの実装によって結果が変わることがあります。

また、キャッシュは利用者のブラウザだけにあるとは限りません。サービス提供側や途中のネットワークで、画像やページの複製が保存される構成もあります。端末のキャッシュを消したのに古い表示が続く場合、別の場所のキャッシュやサーバー側の更新漏れが影響しているかもしれません。

古い表示が出たとき、むやみにすべてを削除する前に、どの端末で、どのURLで、いつから起きているかを記録しましょう。ページの表示に使うファイル名を変える方法など、サイト運営側の設計で解決できる問題もあります。

ブラウザによっては、WindowsでCtrl+Shift+R、macOSでCommand+Shift+Rなどの操作で、通常の再読み込みよりキャッシュを使わない取得を試せます。ただし操作方法や効果はブラウザと設定によって異なり、配信側のキャッシュまで必ず消えるわけではありません。

自分のサイトで原因を切り分ける実験

練習用のページを用意し、背景色と見出しを変えた二つの版を作ります。変更したHTMLだけでなく、CSSや画像も別のファイルになっているなら、どの部品を変更したか記録します。異なるブラウザやプライベートウィンドウで表示を比べると、保存済みデータの影響を調べる手がかりになります。

実験の結果、通常のウィンドウだけ古く見えたとしても、それだけで原因を確定しないでください。ログイン状態や拡張機能、サイト側の個別表示の設定が違うこともあります。どの条件を同じにし、どの条件だけを変えたかを明確にすることが大切です。

ブラウザの開発者向け機能を使えるなら、読み込まれた画像やCSSのURLと応答情報を観察できます。専門的な機能を使わなくても、ページを開いた日時、端末、ブラウザ、変更した箇所を書いた記録は、原因を探す大きな助けになります。

キャッシュは悪者ではなく、使い分ける道具

キャッシュをまったく使わなければ、常に最新データを取りに行く場面は増えますが、通信時間や通信量の負担も増えます。反対に長期間再利用すれば速くなる一方、更新された情報に気づくまで時間がかかる場合があります。正しさと速さのどちらをどこまで優先するか、用途によって判断が変わるのです。

ニュースの本文やログイン後の個人情報を含むページと、めったに変わらないロゴ画像では、適した扱いが同じとは限りません。セキュリティや個人情報の保護に関する設定も必要で、単純に「長く保存するほどよい」とは言えません。

ページが古いときには「表示を直すためキャッシュを消す」という操作だけを覚えるのではなく、何を保存し、いつ確認し直す仕組みなのかを考えてみましょう。現象の理由が分かれば、サイト運営でも閲覧でも、より確かな対応を選べるようになります。

サイト運営者が画像を差し替えた直後、利用者の端末で前の画像が表示される場面を考えます。キャッシュに「一定時間は新しいとみなす」という指定があれば、ブラウザが保存済み画像を再利用している場合があります。ただし、元のサーバーで更新が終わっていない可能性もあります。

まず公開先のURLとファイル名が合っているかを確認し、次に別の端末や新しい閲覧状態で結果を比較します。開く端末によって違いがあるなら保存済みデータの影響が疑われますが、同時に端末の設定も考慮しましょう。サーバー側で古いファイルが配信されていれば、ブラウザを消去しても直りません。

修正時には、重要なページで即時更新が必要なのか、長期間変わらない画像なのかを分けて設定することが有効です。速さのためのキャッシュを一律に否定せず、必要な情報だけ新しさを確認できる設計を選ぶ方が、サイト全体の使いやすさにつながります。

参考資料

おすすめの記事