ブラウザにはWebページの高速表示のためにキャッシュ機能が備わっています。
しかし、キャッシュが残ったままだと最新の表示(特に画像の表示)がされない場合があったりします。
そこで、Webページをキャッシュを使用しないで表示する方法を紹介したいと思います。
キャッシュとは
そもそも、キャッシュと言っても何かよくわからないという人もいると思います。
キャッシュというのは、一時的に保存するファイルとその仕組みのことです。
最近のWebページは画像等の重いファイルが多用され、どうしてもダウンロードに時間がかかってしまいます。
そこで使用されているのがキャッシュ機能です。
Webページへの最初の接続時にダウンロードしたファイルをキャッシュとして一時保存します。
次に同じページに接続した時はそのファイルを使用してダウンロードの時間を短縮し、高速に表示させるという仕組みです。
キャッシュの欠点
Webページを配置しているサーバの負荷や、ブラウザでの表示時間を短縮できるとても有用な機能ですが、欠点もあります。
それは、Webページが更新された後に、ブラウザで確認してもキャッシュを参照してしまい、古いページが表示されてしまうことです。
キャッシュ自体に保存期間が存在するので、古すぎるページは再度ダウンロードされますし、最新のWebページとキャッシュを比較し、キャッシュが古ければ新しいページをダウンロードするという機能は備わっています。
しかし、何らかの理由でWebページが更新されてもキャッシュが利用されてしまい表示がおかしくなってしまうことがあります。
Webページをキャッシュを使用しないで表示する方法
何かWebページの表示がおかしいなと感じたら、キャッシュが原因なことが多いので、とりあえずこの「Webページをキャッシュを使用しないで表示する方法」を試してみることをおすすめします。
ハードリロードを使用する
ショートカットキーの[F5]キーを押下するとWebページがリロード(再読み込み)されますが、この方法だとキャッシュも使用されています。
ハードリロードという方法で再読み込みさせると、キャッシュを使わないでリロードされます。「スーパーリロード」と言われたりもします。
ハードリロードは正確には「外部ファイル(CSS、画像ファイル等)はキャッシュを使用せずにリロードする」という機能で、一部の動的ファイルにより生成されたキャッシュは使用されていますが、まずは簡単なこの方法から試してみると良いと思います。
ブラウザごとに方法が色々とあります。
ブラウザ | ショートカットーキー |
---|---|
Internet Explorer | [Ctrl] + [F5] [Ctrl] + [更新]ボタン |
Microsoft Edge | [Ctrl] + [F5] [Ctrl] + [更新]ボタン |
Google Chrome | [Ctrl] + [F5] [Ctrl] + [更新]ボタン [Shift] + [F5] [Shift] + [更新]ボタン [Ctrl] + [Shift] + [R] |
Mozilla Firefox | [Ctrl] + [F5] [Ctrl] + [Shift] +[R] [Shift] + [更新]ボタン |
共通して[Ctrl] + [F5]は使えるのでこれを覚えておけばよいのではないかと思います。
キャッシュを削除する
ハードリロードでは完全にすべてのキャッシュを読み込みなおしているわけではないのでWebページの仕組みによっては表示が最新にならない場合があります。
その場合は、保存しているキャッシュを完全に削除するしかありません。
削除後に再度そのページを表示すればキャッシュを使用せずに表示したことになります。
Internet Explorer
右上の[ツール]ボタンをクリックし、メニューから[インターネットオプション]を選択します。

「全般」タブの「閲覧の履歴」にある[削除]をクリックします。

「閲覧の履歴の削除」画面が表示されるため[インターネット一時ファイルおよびWebサイトのファイル]にチェックを入れ[削除]をクリックします。

Microsoft Edge
右上の[設定など]ボタンをクリックし、メニューから[設定]を選択します。

「設定」メニューから[プライバシーとサービス]を選択します。

「閲覧データをクリア」から[クリアするデータの選択]をクリックします。
![Microsoft Edgeの「設定」画面で[クリアするデータの選択]を選択する画像](https://tsuredurediary.com/wp-content/uploads/2020/03/edge-no-cache-03.jpg)
「時間の範囲」で削除したいキャッシュの期間を選択し[キャッシュされた画像とファイル]にチェックを入れ今すぐクリア]をクリックします。

Google Chrome
Google Chromeの場合は、デベロッパーツールを使用することで簡単に削除することも可能です。
デベロッパーツールの「キャッシュの消去とハード再読み込み」を使用する
[F12]キーを押して「デベロッパーツール」を呼び出した後[このページを再読み込みします]ボタンを右クリックか、長押しします。

表示されたメニューから[キャッシュの消去とハード再読み込み]をクリックします。
![Google Chromeで[キャッシュの消去とハード再読み込み]を選択する画像](https://tsuredurediary.com/wp-content/uploads/2020/03/chrome-no-cache-02.jpg)
少し時間はかかりますが、これでキャッシュをすべて削除したうえでハードリロードがかかります。
Webページが表示されたら、もう1度[F5]キーを押下するか、ツールの右上の[×(閉じる)]ボタンをクリックしてデベロッパーツールを閉じてください。
もちろん、他のブラウザと同様にキャッシュを削除する方法もあります。
キャッシュを削除する
画面右上の[Google Chromeの設定]ボタンをクリックし、メニューから[その他のツール]-[閲覧履歴を消去]を選択します。

「基本設定」タブの「期間」で削除したいキャッシュの期間を選択し[キャッシュされた画像とファイル]にチェックを入れ[データを削除]をクリックします。

Mozilla Firefox
画面右上の[メニューを開きます]ボタンをクリックし、メニューから[オプション]を選択します。

左のメニューから[プライバシーとセキュリティ]を選択し「Cookieとサイトデータ」の[データを消去]をクリックします。
![Mozilla Firefoxの「オプション」画面で[データを消去]を選択する画像](https://tsuredurediary.com/wp-content/uploads/2020/03/firefox-no-cache-02.jpg)
「データを消去」画面で[ウェブコンテンツのキャッシュ]にチェックを入れ[消去]クリックします。

コメント