頼りになるけど憎いやつ、ブラウザキャッシュのあれこれ

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. 頼りになるけど憎いやつ、ブラウザキャッシュのあれこれ

頼りになるけど憎いやつ、ブラウザキャッシュのあれこれ

頼りになるけど憎いやつ、ブラウザキャッシュのあれこれ

こんにちは、三輪です。

Webサイトを制作または閲覧していて、更新されているはずの情報が新しくなっていないことに「!?」となった経験のある方は多いのではないでしょうか。私はしょっちゅうです。

そういう時、原因となることが多いのがブラウザのキャッシュ。

私自身、立て続けにキャッシュに冷や汗をかかされたので、ここらでひとつ、キャッシュについての情報を(主に忘れっぽい自分のために)まとめてみたいと思います。

キャッシュとは?

キャッシュとは、Webページを表示した時に、そのページ内で使用されている画像やHTMLファイル等のデータを、使用しているパソコンに一時的に保管しておく仕組みです。
(「キャッシュ」という言葉は、一時保管する仕組みそのものを指す場合と、保管されたデータのことを指す場合があります)

Webページを表示する際、初回アクセス時はサーバーに「必要なデータをください」と伝え(リクエスト)、ダウンロードしながら表示します。
一度アクセスしたページに再びアクセスした場合、パソコン内にキャッシュが存在していれば、ブラウザはパソコン内のデータを優先的に使用します。

つまり、初回よりダウンロードするデータが少なくて済むため、表示速度が速くなります。

キャッシュの注意点

良いことづくめに見えるキャッシュ機能ですが、世の中そんなに甘くない。

データがキャッシュに保管されていれば、ブラウザはそちらを優先して使用するので、新しくデータをダウンロードしてくる必要がありません。
しかし、保存されているキャッシュは最新であるとは限らないのです。

古い情報が残ったままになっていると、表示される情報も古いまま…という結果になり、(私のように)滝汗をかく羽目になります。

キャッシュによるトラブルの回避

変わっているはずの情報が変わっていない!となった時、試していただきたい内容について、主なOSやブラウザごとにご紹介します。

リロード(再読み込み)

一番手っ取り早いのは、ページをもう一度表示し直すこと。ブラウザやタブを開き直さなくても、キーボードから再読み込みを行うことができます。
OSによってキー操作が異なりますので、ご注意ください。

なお、ここで言う「更新ボタン」とは、各ブラウザの再読み込みするためのアイコンを指します。

Windows
ブラウザ共通
  • 更新ボタン
  • F5
Mac
ブラウザ共通
  • 更新ボタン
  • Command + R
iOS / Android
ブラウザ共通
  • 更新ボタン
  • 画面を下側に引っ張る(スライドする)

スーパーリロード(強制リロード)

通常の再読み込みで問題なく表示されればそれに越したことはありませんが、それだけでは更新されない頑固なキャッシュがたまに存在します。

そんな時は、キャッシュを強制的に吹っ飛ばす(無視する)方法があります。
OSやブラウザによって操作が違うので、ご利用のブラウザに合った方法をお試しください。
基本的には、太字になっているキー操作を試していただいて、それで駄目なら他を試す、ぐらいで良いと思います。

Windows
Google Chrome
  • Ctrl + 更新ボタン
  • Shift + 更新ボタン
  • Ctrl + F5
  • Shift + F5
Internet Explorer
  • Ctrl + F5
  • Ctrl + 更新ボタン
Microsoft Edge
  • Ctrl + F5
  • Ctrl + 更新ボタン
Firefox
  • Ctrl + F5
  • Shift + 更新ボタン
  • Ctrl + Shift + R
Mac
Google Chrome
  • Command + Shift + R
  • Shift + 更新ボタン
Firefox
  • Command + Shift + R
Safari
  • Command + Option + E
  • Shift + 更新ボタン
iOS / Androidの各ブラウザ …には、残念ながらスーパーリロード機能はありません(2020年9月時点)
通常の再読み込みで改善されない場合は、以下のキャッシュクリアをお試しください。

キャッシュのクリア

スーパーリロードまで試して全然解決しないことは稀だと思いますが、なおも言うことを聞かない時は、思い切ってキャッシュ自体を削除してみるのも有効です。

なお、以下の操作を行った場合、選択する項目によってはログイン中のサイトからログアウトされる場合がありますのでご注意ください。

PC
Google Chrome
  1. 画面右上のメニュー(「・」が縦に3つ並んだ箇所)をクリックして、表示されるメニューから「設定」を選択します。
  2. プライバシーとセキュリティ」欄の「閲覧履歴データの削除」をクリックし、削除したい項目を選択して「データを削除」をクリックします。
Internet Explorer
  1. 画面右上、歯車アイコンから「インターネットオプション」をクリックします。
  2. 全般」タブ内の「閲覧履歴」欄にある「削除」をクリックし、削除したい項目を選択して「OK」をクリックします。
Microsoft Edge
  1. 画面右上のメニュー(「…」)をクリックして、表示されるメニューから「設定」を選択します。
  2. 左側のメニューから「プライバシー、検索、サービス」をクリックします。
  3. 閲覧データをクリア」欄の「クリアするデータの選択」をクリックし、削除したい項目を選択して「今すぐクリア」をクリックします。
FireFox
  1. 画面右上のメニュー(3本線のアイコン)をクリックして、表示されるメニューから「オプション」を選択します。
  2. 左側のメニューから「プライバシーとセキュリティ」をクリックします。
  3. Cookieとサイトデータ」欄の「データを消去」をクリックし、削除したい項目を選択して「消去」をクリックします。
Safari
  1. メニューバーの「Safari」→「環境設定」を開きます。
  2. 詳細」の一番下、「メニューバーに”開発”メニューを表示」にチェック入れて、環境設定を閉じます。
  3. メニューバーに追加された「開発」→「キャッシュを空にする」をクリックします。
スマートフォン・タブレット
Google Chrome
  1. 画面右上のメニュー(「・」が縦に3つ並んだ箇所)をタップして、表示されるメニューから「設定」を選択します。
  2. プライバシー」をタップします。
  3. 閲覧履歴データの削除」をタップし、削除したい項目を選択して「データを削除」をタップします。
FireFox
  1. 画面右下のメニュー(「・」が縦に3つ並んだ箇所)をタップして、表示されるメニューから「設定」を選択します。
  2. プライバシーとセキュリティ」欄の「ブラウジングデータを削除」をタップし、削除したい項目を選択して「ブラウジングデータを削除」をタップします。
Safari
  1. 設定」アプリを起動して、アプリの一覧から「Safari」を選択します。
  2. 履歴とWebサイトデータを消去」をタップし、削除したい項目を選択して「履歴とデータを消去」をタップします。

まとめ

表示速度をアップしたりサーバーへのリクエスト回数を減らしたりと、ありがたい面が多々ある一方で、表示トラブルの原因となることも多いキャッシュ機能。
そして、時にはご紹介したような方法だけでは改善されない場合もあります。

そんな時は、しばらく時間を置いてから再度アクセスしてみるのも一つの手です。
これだけ書いてそんなオチかと言われそうですが、解決しない時は試す価値ありですので、記憶の片隅にでも置いておいていただけたら。

あれ?おかしい!となると、つい慌ててしまいますが、ぜひ一度試してみてください。

前後の記事

Basic認証の使い方

Web制作では公開前のサイトや検索結果に表示させたくないページをBaisc認証を使って閲覧制限をかけることが多くあります。 「とりあえずhtaccessにこれ書いておけば動く」と、仕組みはよくわからず…

お電話でのお問い合わせはこちら:06-6292-8577。受付時間は平日9:30~18:30 インターネットからは24時間受付中!お問い合わせフォームはこちら