トラブルシュート

差し替え後に一部だけ古い表示になるときの原因と直し方

HTMLファイルを差し替えたはずなのにページの一部だけ古い表示のままになる現象は、ブラウザキャッシュとCDNのエッジキャッシュが二重に機能している場合に多く起きます。どのレイヤーのキャッシュが問題かを素早く見極めて対処する手順を解説します。

よくある原因

最もよくあるのはCDNのエッジキャッシュが古いHTMLを保持しているケースです。ファイルをアップロードし直してもCloudflareなどのエッジサーバーが旧バージョンをキャッシュしており、TTLが切れるまで新しいファイルが配信されません。管理コンソールの「キャッシュパージ」ボタンを押すか、CLIで`curl -X POST`を使ってパージAPIを叩くと即時反映されます。

もう一つよくあるのは、差し替えたファイルのパスが微妙に異なるケースです。たとえば`index.html`と`Index.html`のように大文字小文字が変わると別ファイルとして扱われ、古いファイルが残り続けます。MacではファイルシステムがCase-Insensitiveのため気づかずに通過し、本番のLinuxサーバーやCDNで初めて問題が現れます。

  • 相手がログインなしで開ける状態か確認する
  • PCとスマホで最低1回ずつ表示を確認する
  • 内部情報・個人情報・不要な外部送信が残っていないか見る
  • レビュー期限と修正時の差し替え方を決めておく

自分側で確認すること

ハードリフレッシュ(Windowsは`Ctrl+Shift+R`、Macは`Cmd+Shift+R`)でページを再読み込みし、それでも古い表示が残るかどうか確認してください。ハードリフレッシュ後に新しい内容が表示されればブラウザキャッシュが原因で、CDNには既に新しいファイルが届いています。

DevToolsのNetworkタブで問題のリソースのレスポンスヘッダーを確認し、`X-Cache: HIT`や`cf-cache-status: HIT`が表示されていればCDNキャッシュが原因です。`Age`ヘッダーの値が大きいほど古いキャッシュが使われています。この場合はCDN側でキャッシュパージを実行してください。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

相手側で確認すること

相手にも古い表示が見えている場合は、CDNのエッジキャッシュが原因である可能性が高いです。相手のブラウザキャッシュのせいであれば別の端末や別のネットワークでは新しい表示になるはずなので、「スマートフォンのデータ通信で同じURLを開いてみてください」と依頼して切り分けます。

どうしても古い表示が消えない相手には、URLの末尾に`?v=20240101`のような日付クエリパラメータを付与した新URLを伝えてください。CDNはクエリ込みのURLを別リソースとして扱うため、強制的に新しいファイルを配信させられます。恒久対策ではありませんが緊急時の即効手段として有効です。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

再発防止の運用

ファイルを差し替えるたびにキャッシュパージを自動実行するCIを組み込んでおくと、人的ミスを防げます。GitHub ActionsやCloudflare Pagesのデプロイフックにキャッシュパージのステップを追加すれば、アップロードと同時にパージが走ります。

資産ファイル(CSS・JS・画像)にはコンテンツハッシュをファイル名に含めるキャッシュバスティング戦略が効果的です。`style.abc123.css`のようにハッシュ付きのファイル名にすれば、更新のたびにURLが変わるためキャッシュの問題が根本的に起きにくくなります。静的HTMLを手動で管理している場合も、更新ごとにファイル名にバージョン番号を付けるだけで同様の効果があります。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

よくある質問

キャッシュパージを実行しても反映に時間がかかるのはなぜですか?

CDNは世界中に分散したエッジサーバーを持っており、パージ指示が全拠点に伝わるまで数秒から数十秒かかります。通常1分以内に全拠点に反映されますが、混雑時は数分かかることもあります。

同じURLで差し替えたのに一部のユーザーだけ古い画面を見ているのはなぜですか?

CDNのエッジサーバーは地理的に分散しており、パージの伝播タイミングが拠点ごとに異なります。特定地域のユーザーだけ古いキャッシュを見ている場合は、しばらく待つか再度パージを実行してください。

画像だけが古い表示のままになる場合の対処法は?

HTMLは更新されても画像URLが同じなら画像キャッシュは更新されません。画像ファイルを差し替えた場合は画像URLも変更するか、キャッシュパージで画像URLも明示的にパージリストに含めてください。

関連記事

トラブルシュート

OGP画像が更新されないときの原因と直し方

HTMLページを更新してもOGP画像が変わらない原因と直し方を知りたいWeb制作者向けに、キャッシュの仕組み・デバッグツールの使い方・再発防止の運用を具体的な手順で解説する記事。

5分で読める
トラブルシュート

ファビコンが更新されないときの原因と直し方

ファビコンが更新されない現象に悩むWeb制作者・デザイナー向けに、ブラウザキャッシュ・CDNキャッシュ・HTML記述ミスの3層を切り分けて解決する手順をまとめた記事。

5分で読める
トラブルシュート

QRコードで開くと404になるときの原因と直し方

QRコードを読み取ると404になってしまう問題を解決したい制作者・担当者向けに、URL設定ミス・ページ削除・認証壁の3パターンを切り分けて修正する手順をまとめた記事。

5分で読める
「トラブルシュート」の記事をもっと見る →