ブラウザのキャッシュはWebページを速く表示するための仕組み
ホームページを修正したのに、
「変更したはずなのに表示が変わらない」
「画像を差し替えたのに前の画像が出てくる」
といった経験はありませんか？
このようなとき、原因のひとつとして考えられるのがブラウザのキャッシュです。
キャッシュは、Webサイトを快適に表示するために使われている便利な仕組みです。
しかし、保存されている古いデータが表示されることで、Webサイトの変更内容がすぐに確認できない場合があります。
この記事では、
- ブラウザのキャッシュとは何か
- なぜキャッシュが必要なのか
- キャッシュを削除するとどうなるのか
- 修正が反映されないときに確認したいこと
について、できるだけわかりやすく解説します。
ブラウザのキャッシュとは？
ブラウザのキャッシュとは、一度表示したWebページのデータを一時的にパソコンやスマートフォンへ保存しておく仕組みです。
Google ChromeやSafari、Microsoft Edgeなどのブラウザには、このキャッシュ機能があります。
Webサイトを表示するときには、
- 画像
- CSS
- JavaScript
- フォント
- その他のWebページを構成するデータ
など、さまざまなファイルを読み込んでいます。
毎回すべてのデータをインターネット上から読み込むと、ページの表示に時間がかかります。
そこで、一度読み込んだデータの一部を端末側に保存しておき、次回アクセスしたときに再利用するのがキャッシュです。
キャッシュがあるとWebページを速く表示できる
たとえば、あるWebサイトのロゴ画像を初めて表示したとします。
初回アクセス時には、サーバーからロゴ画像をダウンロードしてブラウザに表示します。
その画像をキャッシュとして保存しておけば、同じページや別のページを開いたときに、保存済みの画像を利用できます。
イメージとしては、
毎回サーバーへ取りに行くのではなく、一度持ってきたものを手元に置いておく
という感じです。
そのため、キャッシュには、
- ページの表示速度を速くする
- 通信量を減らす
- サーバーへの負荷を減らす
といったメリットがあります。
基本的には、キャッシュそのものは悪いものではありません。
なぜキャッシュが原因で修正が反映されないの？
キャッシュでよく起こるのが、Webサイトを修正したのに古い状態が表示される現象です。
たとえば、ホームページの背景色を、
青 → 緑
へ変更したとします。
サーバー上ではすでに緑へ変更されていても、ブラウザ側に以前のCSSファイルが残っていると、ブラウザが古いファイルを使用してしまうことがあります。
その結果、
「WordPressでは変更したのに青いまま」
という状態になることがあります。
これはWebサイトの修正に失敗しているのではなく、単純にブラウザ側で古い情報が表示されているだけかもしれません。
キャッシュが原因かどうか簡単に確認する方法
Webサイトを変更したのに反映されない場合は、いきなり設定を変更する前に簡単な方法から試してみましょう。
ページを再読み込みする
まずは通常の再読み込みです。
ブラウザの更新ボタンを押すか、ページを開き直して確認します。
これだけで最新の状態へ更新されることもあります。
シークレットモードで確認する
Chromeなどのブラウザには「シークレットモード」があります。
通常利用しているブラウザとは異なる状態でページを確認できるため、
「自分のブラウザだけ古い表示になっているのか」
を切り分けるときに便利です。
シークレットモードで最新の状態が表示されるのであれば、通常ブラウザ側のキャッシュなどが影響している可能性があります。
別のブラウザで確認する
普段Chromeを利用しているのであれば、
- Safari
- Microsoft Edge
- Firefox
など、別のブラウザから確認する方法もあります。
別のブラウザでは修正後の状態になっている場合、普段使用しているブラウザに古いデータが残っている可能性があります。
スマートフォンから確認する
パソコンで修正したWebサイトをスマートフォンから開いてみるのも、簡単な確認方法です。
ただし、スマートフォン側にもキャッシュが存在するため、必ず最新状態になるとは限りません。
あくまで原因を切り分ける方法のひとつとして利用しましょう。
キャッシュを削除するとどうなる？
ブラウザのキャッシュを削除すると、一時的に保存されていたWebページのデータが削除されます。
次にWebサイトへアクセスしたときには、必要なデータを改めてサーバーから取得します。
そのため、古いCSSや画像などが残っていた場合は、最新の状態が表示される可能性があります。
ただし、キャッシュを削除した直後はページのデータを再取得するため、初回表示だけ少し時間がかかることがあります。
その後は再びキャッシュが作成されるため、通常は大きな問題にはなりません。
キャッシュを削除してもパスワードは消える？
ここは少し注意したいポイントです。
ブラウザの設定画面には、
- 閲覧履歴
- Cookie
- キャッシュされた画像とファイル
- 保存したパスワード
など、複数の削除項目が表示されることがあります。
キャッシュだけを削除するのであれば、基本的に保存されたパスワードまで削除する必要はありません。
ただし、削除する項目としてCookieなども一緒に選択した場合は、Webサイトからログアウトすることがあります。
そのため、キャッシュを削除するときは、選択されている項目を確認してから実行しましょう。
Cookieとキャッシュは同じもの？
キャッシュとCookieは混同されやすいですが、役割が異なります。
キャッシュ
Webページを速く表示するために、画像やCSSなどのデータを保存します。
Cookie
ログイン状態やサイト上での設定など、ユーザーに関する情報を保存するために利用されます。
簡単に分けると、
キャッシュは「表示を速くするためのデータ」
Cookieは「利用状態を覚えておくためのデータ」
と考えるとわかりやすいでしょう。
そのため、Webサイトの修正が反映されないからといって、必ずしもCookieまで削除する必要はありません。
まずはキャッシュから確認するのがおすすめです。
WordPressで修正が反映されない原因はブラウザだけではない
WordPressでホームページを制作している場合、修正が反映されない原因はブラウザのキャッシュだけとは限りません。
WordPressには複数の場所でキャッシュが使われることがあります。
代表的なものとして、
- ブラウザキャッシュ
- WordPressのキャッシュプラグイン
- レンタルサーバー側のキャッシュ
- CDNのキャッシュ
- テーマ独自のキャッシュ
などがあります。
そのため、ブラウザキャッシュを削除しても変化がない場合は、別の場所にキャッシュが残っている可能性があります。
レンタルサーバー側のキャッシュにも注意
WordPressを利用している場合、レンタルサーバー側にキャッシュ機能が用意されていることもあります。
たとえば、ページを高速表示するためにサーバー側でWebページのデータを保存している場合があります。
この場合、
WordPressを修正
↓
サーバー上では修正済み
↓
キャッシュされた古いページが表示される
ということもあります。
ブラウザを変更しても古い状態が表示される場合は、サーバー側のキャッシュも確認してみましょう。
CSSやJavaScriptだけ反映されない場合もある
Web制作をしていると、
「文章は変更されたのにCSSだけ変わらない」
「JavaScriptを修正したのに動きが以前のまま」
というケースもあります。
CSSやJavaScriptはキャッシュされやすいファイルのひとつです。
そのため、
- HTMLの変更は反映された
- 画像も新しくなった
- でもデザインだけ古い
という場合には、CSSファイルのキャッシュを疑ってみてもよいでしょう。
特に制作中のWebサイトでは比較的よく遭遇する現象です。
キャッシュは頻繁に削除した方がいい？
基本的には、毎日のようにキャッシュを削除する必要はありません。
キャッシュはWebサイトを速く表示するための便利な機能だからです。
普段のWeb閲覧で問題がなければ、そのままで大丈夫です。
キャッシュ削除を検討するのは、
- Webサイトの修正が反映されない
- ページのデザインが崩れている
- 古い画像が表示される
- ブラウザだけ表示がおかしい
- サイトの動作に違和感がある
といったときでよいでしょう。
「とりあえず毎回全部削除する」という使い方は、あまりおすすめしません。
Webサイトを修正したら自分だけで判断しない
Webサイトを制作・更新するときに注意したいのが、
自分の画面だけを見て「反映されていない」と判断しないことです。
自分のブラウザにはキャッシュが残っていても、初めてサイトを見る人には最新状態が表示されている可能性があります。
修正後に表示がおかしい場合は、
- ページを再読み込みする
- シークレットモードで確認する
- 別ブラウザで確認する
- 別端末で確認する
- ブラウザキャッシュを確認する
- WordPressやサーバー側のキャッシュを確認する
というように、一つずつ原因を切り分けると判断しやすくなります。
まとめ｜キャッシュは便利だけど古い表示の原因になることもある
ブラウザのキャッシュは、Webサイトを速く表示するために必要な便利な仕組みです。
一度読み込んだ画像やCSSなどを一時的に保存することで、次回以降のページ表示を速くしてくれます。
その一方で、Webサイトを修正したときには、保存されている古いデータが原因で変更内容が反映されない場合があります。
そんなときは、
- 再読み込み
- シークレットモード
- 別ブラウザ
- 別端末
- キャッシュ削除
などを試しながら原因を切り分けてみましょう。
また、WordPressではブラウザ以外にも、プラグインやレンタルサーバーなど複数の場所でキャッシュが利用される場合があります。
ブラウザのキャッシュを削除しても直らないからといって、すぐに「WordPressが壊れた」と判断する必要はありません。
どこに古いデータが残っているのかを、一つずつ確認していくことが大切です。
