WEB — Webサイトの基礎
更新したサイトが古く見えるときのキャッシュ確認
修正したはずの画像や文章が古いまま見えるときは、公開ファイルとキャッシュを分けて確認します。ブラウザの全データを消す前に、どの層で古い内容が残っているか探します。
この記事の目次
本当に公開されたか確認する
編集ファイルの保存と本番への公開は別です。配信サービスの公開結果を確認し、対象URLに使われるファイルかを見ます。プレビューだけ更新されていないか、別のブランチを公開していないかも確認します。
ブラウザ側の状態を比べる
通常の再読み込みと、ブラウザの案内に従った強制再読み込みを比較します。開発者ツールでキャッシュを無効にしているときだけ直るなら、その条件を記録します。Cookieやログイン情報までまとめて消す必要があるとは限りません。
CDNなど別の保存層を見る
ブラウザを替えても古い場合は、CDNやサーバー側で保持している応答も確認します。応答のCache-Controlなどを手がかりにしますが、サービス独自の設定が影響する場合もあるため、そのサービスの説明と照合します。
更新方法を設計する
CSSやJSに版を含むファイル名を使う方法などで、新しい内容を別のURLとして配信できます。HTMLが古いファイルを参照したままでは効果が出ないため、参照先も同時に確認します。キャッシュを一律に無効にする前に、更新頻度に合わせた設定を考えます。
画像を選ぶと拡大できます。
- 対象のURLへ新しいファイルが公開されているか確認します。
- 再読み込みの条件を変え、ブラウザ側の保存状態を比べます。
- ほかのブラウザでも古い場合は、CDNなど別の保存層も調べます。
古いものが何かを具体的に選ぶ
キャッシュを調べる前に、変わるはずだった箇所を一つ決めます。見出しの一文なのか、画像なのか、レイアウトなのかを特定し、新旧を見分ける手がかりを残します。「何となく古い」状態のままでは、再読み込みによって何が変わったかを比較しにくくなります。
原稿、生成した公開ファイル、本番で返る内容の順に確認すると、まだ公開されていない変更をキャッシュの問題として扱わずに済みます。特定のプレビューURLでだけ新しく見える場合は、本番への反映を先に調べます。キャッシュを消す前に、配信している版を確かめます。
CSSを直したのに見た目が変わらない例
本文の間隔を調整して公開したのに、普段のブラウザでは古い見た目が残る場面を考えます。最初に公開したHTMLがどのCSSを参照しているかを見ます。新しいCSSを配置していても、HTMLが古いURLを指していれば、参照の更新が必要です。
参照が合っているなら、通常の読み込みとキャッシュを使わない条件で、取得するCSSと見た目を比べます。ブラウザを替えても古い場合は、すぐに端末側の全データを消さず、配信側の応答と設定を確認します。原因が分かったら該当する更新方法を直し、通常の閲覧条件で新しい表示になるかを再確認します。
結果と次の調査を対応させる
| 比較結果 | 次に確認すること |
|---|---|
| ローカルだけ新しい | 本番へ公開した版 |
| HTMLが旧CSSを指す | 生成や参照先の更新 |
| 特定ブラウザだけ古い | そのブラウザの取得条件 |
| 複数環境で同じ古い応答 | 公開ファイルと配信側の保持状態 |
版付きのURLを使うなら、新しいファイルを置くこととHTMLの参照を更新することを一組にします。元のファイルを上書きする運用では、どのように再取得されるかを配信設定と照合します。キャッシュを一律に無効化するのではなく、更新後に正しい版へ進める仕組みを確認します。検査のために変えたブラウザ設定も最後に戻します。