連載
» 2018年11月14日 05時00分 公開

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

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

[島田広道,デジタルアドバンテージ]
「Google Chrome完全ガイド」のインデックス

連載目次

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

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

 しかし、Webサーバとキャッシュの間で同一であるはずのデータが(何らかの問題により)食い違ってしまうと、ページ表示が乱れてしまうことがあります。

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

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

 Chromeでキャッシュを消去するには通常、メニューボタン−[設定]で設定画面を開いてから、[詳細設定]−[閲覧履歴データを消去する]−[詳細設定]−[キャッシュされた画像とファイル]をオンにする、というようにステップ数が多く、面倒です(手順の詳細は本連載の「Google Chromeに蓄えられた閲覧履歴やパスワードを消去・削除する」を参照してください)。

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

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

  • Windows OS: [Shift]+[Ctrl]+[R]キーまたは[Ctrl]+[F5]キー
  • macOS: [shift]+[command]+[R]キー

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

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

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

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

  • Windows OS: [Shift]+[Ctrl]+[I]キーまたは[F12]キー
  • macOS: [option]+[command]+[I]キー

 次に、ブラウザウィンドウのアドレスバー(オムニボックス)脇にある再読み込みボタンを右クリックします(長押しクリックも可)。するとメニューが表示されるので、[キャッシュの消去とハード再読み込み]をクリックします。

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

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

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

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

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

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

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

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

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

 またキャッシュは全て消去されます。[キャッシュの消去とハード再読み込み]の実行時に開いていたWebページの分だけではありません。そのため[キャッシュの消去とハード再読み込み]の実行後は、他のWebページでも(キャッシュではなく)Webサーバからファイル/データが読み込まれるため、(少なくとも1回目の)表示は遅くなりがちです。

デベロッパーツールでキャッシュの利用を禁止するには

 デベロッパーツールの起動中であれば、全面的にキャッシュの利用を禁止する方法もあります。それには、デベロッパーツールのウィンドウで[Network]タブを選び、上部バーに表示される[Disable cache]チェックボックスにチェックを入れてオンにします。

デベロッパーツールでキャッシュの利用を一時的に禁止する デベロッパーツールでキャッシュの利用を一時的に禁止する

 このように設定すると、次のキーを押して通常の再読み込みをした場合でも、キャッシュは利用されず、Webサーバからファイルやデータが読み込まれます。

  • Windows OS: [Ctrl]+[R]キーまたは[F5]キー
  • macOS: [command]+[R]キー

 この機能もデベロッパーツールを閉じると無効になるので注意しましょう。

「Google Chrome完全ガイド」のインデックス

Google Chrome完全ガイド

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。