はじめに
「サイトを更新したのに、自分の画面だけ前のまま…」
「何回読み込み直しても、修正した画像や文章が反映されない…」
そんなふうに、F5キーを押したり、スマホで何度もページを開き直したりしていませんか。
実は、その原因はサイト側ではなく、パソコンやスマホに残っている「キャッシュ」にあることが少なくありません。ブラウザは、一度見たページの画像や文章を一時的に保存するため、サイトを更新したあとも、前の状態を表示してしまうことがあります。
たとえば、バナー画像を差し替えたのに前の画像のまま表示される、修正した文章だけ古いまま残る、スマホでは変わっているのにパソコンでは変わらない、といった状態です。こうした場合は、キャッシュを削除するだけで数秒で直ることもあります。
ただ、ChromeやSafari、PCとスマホでは操作方法が少しずつ違うため、「どこを押せばいいの？」と迷いやすいところでもあります。
この記事では、キャッシュクリアが必要な場面から、PC・スマホ別の削除手順、消しても直らないときの対処まで、順を追ってやさしく説明していきます。
WEBサイトが更新されないときはキャッシュクリアを試す
「修正したのに前の画像や文章のまま表示される…」という場合は、ブラウザに古いデータが残っていることが原因かもしれません。
特に、更新直後や何度も同じページを開いて確認していると、最新の内容ではなく前回の表示がそのまま読み込まれることがあります。
まずは、古い表示のままになる原因と、キャッシュクリアで直るケース・直らないケースを確認していきます。
WEBサイトを更新したのに古い表示のままになる原因
WEBサイトを更新したのに古い表示のままになるのは、ブラウザが前回保存したキャッシュを再利用しているためです。
たとえば、画像を差し替えた、文章を修正した、ボタンの色を変更したあとでも、ブラウザ側に1時間〜数日残っている古いデータが優先されると、更新前のページが表示されます。
特に、Google ChromeやSafariでは、一度開いたWEBサイトのHTML・画像・CSSを自動で保存し、次回アクセス時は保存済みデータを0.1〜0.5秒程度で読み込む仕組みになっています。
そのため、サーバー上では修正が完了していても、ブラウザが新しいデータを取りに行かず、更新前のまま見えてしまいます。
この状態では、何度ページを再読み込みしても同じ古い情報が表示され続けるため、ブラウザに保存されたキャッシュを削除し、新しいデータを再取得させる必要があります。
キャッシュクリアで直るケース・直らないケース
キャッシュクリアで直るのは、ブラウザ側に古いHTML・画像・CSS・JavaScriptが残っている場合です。
たとえば、文章を修正したのに前の文章が表示される、画像を差し替えたのに古い画像のままになる、ボタンの色やレイアウトを変更したのに見た目が変わらない、といった状態であれば、キャッシュを削除した直後に新しい表示へ切り替わります。
一方で、サーバーに修正内容が反映されていない場合や、WordPressのキャッシュプラグイン、CDN、サーバーキャッシュに古いデータが残っている場合は、ブラウザのキャッシュクリアだけでは直りません。
この場合は、別ブラウザや別端末でも同じ古い表示になるため、ブラウザ側ではなくサーバー側に原因があります。
つまり、自分のブラウザだけ古い表示になっているならキャッシュクリアで直る可能性が高く、他の端末やスマホでも同じ状態なら、キャッシュクリアでは直らず、サーバー側の確認が必要です。
ブラウザ別｜WEBサイトのキャッシュクリア方法
キャッシュクリアの手順は、使っているブラウザによって少しずつ異なります。たとえば、Google Chromeでは「閲覧履歴データを削除」から操作しますが、SafariやMicrosoft Edgeでは開く場所や項目名が変わります。
ここでは、よく使われるブラウザごとに、PC・スマホ別のキャッシュ削除手順を順番に確認していきます。
Google ChromeでWEBサイトのキャッシュを削除する方法｜PC・スマホ
PC版のGoogle Chromeでは、右上の「︙」をクリックし、「閲覧履歴を削除」を開きます。
表示された画面で期間を「全期間」に変更し、「キャッシュされた画像とファイル」だけにチェックを入れて「データを削除」を押すと、数秒〜30秒ほどでキャッシュが削除されます。
そのあと、更新が反映されないWEBサイトを開き直し、キーボードの「Ctrl＋F5」または「Shift＋F5」を押すと、新しいデータが読み込まれます。
スマホ版のGoogle Chromeでは、右上の「︙」から「履歴」→「閲覧履歴データを削除」を開きます。
期間を「全期間」に変更し、「キャッシュされた画像とファイル」のみにチェックを入れて「データを削除」を押してください。
削除後にWEBサイトを閉じて再度開くと、更新後の表示に切り替わります。
SafariでWEBサイトのキャッシュを削除する方法｜iPhone・Mac
iPhoneのSafariでは、「設定」アプリを開き、「Safari」→「履歴とWebサイトデータを消去」を押します。
確認画面で「履歴とデータを消去」を選ぶと、Safariに保存されているキャッシュが削除されます。
削除後にSafariを開き直し、更新されないWEBサイトを再表示すると、新しい内容が読み込まれます。
MacのSafariでは、画面上部の「Safari」→「設定」→「詳細」を開き、「メニューバーに“開発”メニューを表示」にチェックを入れます。
そのあと、画面上部の「開発」→「キャッシュを空にする」をクリックすると、その場でキャッシュが削除されます。
削除後にWEBサイトを再読み込みすると、更新後の表示に切り替わります。
Microsoft EdgeでWEBサイトのキャッシュを削除する方法｜PC
PC版のMicrosoft Edgeでは、右上の「…」をクリックし、「設定」→「プライバシー、検索、サービス」を開きます。
「閲覧データをクリア」の項目にある「クリアするデータの選択」を押し、期間を「すべての期間」に変更します。
そのうえで、「キャッシュされた画像とファイル」だけにチェックを入れ、「今すぐクリア」をクリックすると、数秒〜30秒ほどでキャッシュが削除されます。
削除後は、更新が反映されないWEBサイトを開き直し、キーボードの「Ctrl＋F5」を押してください。
保存されていた古いデータを使わず、サーバー上の最新データを再読み込みできます。
キャッシュクリアとは？
キャッシュクリアという言葉は聞いたことがあっても、「そもそもキャッシュって何？」「なぜ古い表示のままになるの？」と感じる人は多いかもしれません。
実際には、ページを速く表示するために一度見たデータをブラウザが保存していることが原因です。
まずは、キャッシュがどのような仕組みで保存され、なぜ更新後も古い表示が残ってしまうのかを順番に確認していきます。
キャッシュの仕組みを一言で理解する
キャッシュとは、一度表示したWEBサイトの画像・文字・デザイン情報を、ブラウザがパソコンやスマホの中に一時保存しておく仕組みです。
次に同じWEBサイトを開いたときは、毎回サーバーから読み込み直すのではなく、保存済みのデータを使うため、表示時間を1〜数秒短くできます。
ただし、保存されているデータが古いままだと、WEBサイトを更新したあとでも前の表示が残ります。
そのため、古いデータを削除して、最新の情報を読み込み直す操作がキャッシュクリアです。
なぜWEBサイトの表示が古いまま残るのか
WEBサイトの表示が古いまま残るのは、ブラウザが前回保存したキャッシュを優先して表示するためです。
たとえば、サーバー上では10:00に画像や文章を更新していても、ブラウザ側に9:00時点のデータが残っていると、ページを開いたときに古いデータが先に表示されます。
ブラウザは表示速度を速くするため、同じURLの画像・CSS・HTMLを数時間〜数日保存し、その期間内は新しいデータを取りに行かないことがあります。
その結果、サーバーでは更新済みなのに、自分の画面だけ以前のままに見える状態になります。
キャッシュクリアしてもWEBサイトが直らないときの対処
キャッシュを削除しても表示が変わらない場合は、ブラウザ以外の場所に古いデータが残っている可能性があります。
たとえば、ページを強制的に再読み込みしないと最新情報が取得されないことや、別のブラウザでは正常に表示されることがあります。
また、自分の端末ではなく、サーバーやCDN側に古いデータが残っていて、更新内容がまだ配信されていないケースもあります。
ここでは、キャッシュクリアで直らなかったときに順番に確認したい対処法を見ていきます。
強制再読み込みを試す
キャッシュクリアをしても古い表示のままなら、ブラウザに残っている一時データを無視して、サーバーから最新データを直接読み込む強制再読み込みを試します。
Windowsでは、更新されないWEBサイトを開いた状態で「Ctrl＋F5」または「Shift＋F5」を押してください。
Macでは「Command＋Shift＋R」を押すと、保存済みの画像・CSS・HTMLを使わずに再読み込みできます。
通常の再読み込みはブラウザ内の保存データを再利用することがありますが、強制再読み込みは毎回サーバー側の最新データを取得するため、キャッシュが残っている場合でも更新後の表示に切り替わります。
別ブラウザ・別端末でWEBサイトを確認する
キャッシュクリアと強制再読み込みをしても直らない場合は、別のブラウザや別の端末で同じWEBサイトを開いて確認します。
たとえば、普段Google Chromeを使っているならSafariやMicrosoft Edgeで開き、パソコンで見ているならスマホでも同じURLを表示してください。
別ブラウザや別端末では更新後の表示になっている場合は、今使っているブラウザだけに古いキャッシュが残っています。
一方で、どのブラウザ・どの端末でも同じ古い表示になる場合は、サーバー側やCDN側に古いデータが残っている状態です。
つまり、自分の環境だけの問題なのか、WEBサイト全体の問題なのかを切り分けられます。
サーバー側・CDN側のキャッシュを確認する
別ブラウザや別端末でも古い表示のままなら、サーバー側またはCDN側に古いキャッシュが残っています。
WordPressを使っている場合は、キャッシュ系プラグインの「キャッシュ削除」「Purge Cache」を実行してください。
サーバー会社の管理画面にキャッシュ機能がある場合も、「キャッシュ削除」や「高速化キャッシュを無効化」を押す必要があります。
また、Cloudflare などのCDNを使っている場合は、管理画面から「Purge Cache」または「Purge Everything」を実行しない限り、数時間〜24時間ほど古いデータが配信され続けます。
サーバー側とCDN側のキャッシュを削除したあとに、ブラウザで再読み込みすると、更新後のWEBサイトが表示されます。
まとめ
サイトを更新したのに前の画像や文章のまま表示されると、「修正できていないのかも…」と不安になりますよね。ただ、その原因はサイト側ではなく、パソコンやスマホに残ったキャッシュであることがほとんどです。
特に、画像の差し替えや文章の修正をした直後は、ブラウザが前回のデータを表示してしまい、自分の画面だけ古いままに見えることがあります。
そんなときは、まずキャッシュクリアを試してみてください。数秒で最新の表示に切り替わることも少なくありません。
もし変わらない場合は、強制再読み込みをする、別のブラウザや端末で確認する、サーバーやCDN側のキャッシュを確認する、という順番で見ていけば大丈夫です。
「更新したのに反映されない」と感じたときは、あわてずに1つずつ確認していけば、原因を見つけやすくなります。
