【Google Chrome】素早くキャッシュをクリアしてページを正しく表示させる：Google Chrome完全ガイド

WebブラウザでWebページが正しく表示されない原因の一つに、Webブラウザのキャッシュが悪影響を及ぼしていることが挙げられます。Windows OS／macOS版Google Chromeで、そのキャッシュを素早く消去しつつページを再読み込みしてトラブルを解消する方法を紹介します。

» 2024年01月24日 05時00分公開

[島田広道，デジタルアドバンテージ]

連載目次

明らかにレイアウトが乱れている……　再読み込みボタンを押しても直らない……　Chromeで素早くキャッシュをクリアしてページを正しく表示させる

対象：Windows OS／macOS向け（デスクトップ版）Google Chrome

Webページの表示がおかしいのはブラウザキャッシュのせい!?

　インターネット上のWebページを見て回っていると、しばしば表示内容が明らかに乱れたページに遭遇することがあります。またWebページ制作に関わっているなら、Webサーバ側で画像などを更新したのにWebブラウザで見ると更新されてない、という経験をしたこともあるでしょう。

　こうしたトラブルの原因の一つとして、Webブラウザのキャッシュ機能が挙げられます。この場合のキャッシュとは、WebブラウザがWebサーバから読み込んだファイル／データをローカルPCのディスクなどに蓄えておき、再利用できるようにすることでページ表示を速める機能です。

　しかし、Webサーバとキャッシュの間で同一であるはずのデータが（何らかの問題により）食い違ってしまうと、ページ表示が乱れてしまうことになります。特に同じファイル名で画像が更新されたような場合、ページ表示が乱れてしまいがちです。

　本記事ではWindows OS版およびmacOS版の「Google Chrome」（以下、「Chrome」）を対象として、素早くキャッシュを消去してページの表示の乱れを改善する方法を紹介します。

Chromeの設定画面でキャッシュを消去するのは面倒

　Chromeでキャッシュを消去するには通常、Chromeの設定ページにある［閲覧履歴データの削除］ダイアログを呼び出す必要があります。マウス操作で呼び出すには、［︙ メニュー］アイコン－［設定］－［プライバシーとセキュリティ］－［閲覧履歴データの削除］、というようにステップ数が多く、面倒です。

　キーボード操作なら、以下のショートカットで対象のダイアログを呼び出せます：

Windows OS：［Shift］＋［Ctrl］＋［Delete］キー
macOS：［shift ⇧］＋［command ⌘］＋［delete ⌫」キー

　あるいは、URLとして「chrome://settings/clearBrowserData」を指定しても構いません（手順の詳細は本連載の「Google Chromeに蓄えられた閲覧履歴やパスワードを消去・削除する」を参照してください）。

　ただし、その後に表示されたダイアログで複数のチェックボックスやプルダウンリストボックスを設定しなければならず、素早くできるとは言い難いものとなっています。そのうえ、うっかり誤って閲覧履歴やCookieまで削除してしまう恐れもあります。

「閲覧履歴データの削除」ダイアログを開いてキャッシュをクリア

「ハード再読み込み」ならキャッシュは利用されない？

　ChromeでWebページを開いた後、次のキー押すと「ハード再読み込み」が実行されます。

Windows OS：［Shift］＋［Ctrl］＋［R］キーまたは［Shift］＋［F5］キー
macOS：［shift ⇧］＋［command ⌘］＋［R］キー

　これは、対象のWebページに載っている画像あるいは各種ファイル（CSSやJavaScriptなど）を、キャッシュを使わずにWebサーバからダウンロードしつつ、再読み込みをする機能です。つまり、前述のキャッシュ消去をしなくても、キャッシュのトラブルを回避できそうです。

　しかし、この機能でも、対象ページに直接由来していない（間接的に読み込まれる）ファイル／データについては、キャッシュが利用されてしまいます。つまり完全にキャッシュを無視するわけではありません。

キャッシュを消去しつつ「ハード再読み込み」を実行するには

　実は、キャッシュの消去と「ハード再読み込み」を一緒に実行する方法があります。それにはまず、次のキーを押してChrome内蔵の「デベロッパーツール」を起動します。

Windows OS：［Shift］＋［Ctrl］＋［J］キーまたは［F12］キー
macOS：［option ⌥］＋［command ⌘］＋［I］キー

　次に、ブラウザウィンドウのアドレスバー（オムニボックス）左側にある再読み込みボタンを右クリックまたは長押しクリックします。するとメニューが表示されるので、［キャッシュの消去とハード再読み込み］をクリックします。

Chromeでキャッシュの消去とハード再読み込みを一度に実行する

　すると、ページの読み込み前にキャッシュのクリアが実行されます。実際、Webサーバから読み込まれる（ダウンロードされる）データ量は、単なる「ハード再読み込み」より増加します。

■「ハード再読み込み」でのデータ転送容量

■「キャッシュの消去とハード再読み込み」でのデータ転送容量

　上の画面は、それぞれの再読み込み時にWebサーバからダウンロードされたデータ量を表しています。「キャッシュの消去とハード再読み込み」は単なる「ハード再読み込み」の約1.4倍の容量をダウンロードしており、「ハード再読み込み」では少なからずキャッシュが利用されていることが分かります。

●［キャッシュの消去とハード再読み込み］の注意点

　デベロッパーツールを閉じると、［キャッシュの消去とハード再読み込み］を含むメニューは表示されず、使えなくなります。

　またキャッシュは全て消去されます。［キャッシュの消去とハード再読み込み］の実行時に開いていたWebページの分だけではない点に注意してください。［キャッシュの消去とハード再読み込み］の実行後は、他のWebページでも（キャッシュではなく）Webサーバからファイル／データが読み込まれるため、（少なくとも1回目の）表示は遅くなりがちです。