スーパーリロードでCSSの変更がChromeで反映された！キャッシュの消去とハード再読み込み

今年に入ってから、地味に自分のサイトの更新もボチボチしています。そこで最近ひっかかったのが、WordPressのテーマを変更して、CSSのカスタマイズをした時。

確かに合ってるよね？と思って変更しているのだけど、全然反映されない…なんで～～（泣）
キャッシュが原因なのでは？とすぐ疑ったけれど、削除しても反映されず、さて困った…

結局、キャッシュの削除の仕方によっても、違うのだとわかったのでメモっておきます。
「キャッシュの消去とハード再読み込み」で解決しました。

ネットがらみでおかしいと思ったらキャッシュの削除

キャッシュには2種類あって、ひとつはインターネットを閲覧する際のもの、もうひとつはPCなどを操作している時にメモリに保存するものです。今回は、インターネットにおけるキャッシュの削除についての話です。

まずは、キャッシュって何？という方もいると思うので、その話。

インターネットで様々なサイトを見ている時、次回見る時にすぐ表示されるようにとそのページのデータを一時的にPCなどに保存しています。それによって、次回同じページ閲覧時には、保存されたデータを参照するために表示されるスピードが早くなります。
このキャッシュは、インターネット一時ファイルとも呼ばれます。

私がPCを始めた頃は、電話回線を使ってインターネットに接続していたので、それはそれはありがたいものでした。表示に時間がかかると、その分通信代が膨大な金額になるからです。
今のように固定の金額で接続し放題なんてなかったですから。

しかし、今では動画もサクッと表示できるほどの通信速度が普及し、このキャッシュのありがたみもわかりづらくなっています。

だからこそ、キャッシュなんて知らないという人も多く、いざ困ったことがあった時に「キャッシュって何？？？インターネット一時ファイルって何？」となるわけです。

一般的に、表示がおかしいとか反映されないなど、ネットがらみで何かおかしいことがあった場合、キャッシュの削除をしましょうと言われますから、覚えておきましょう。

これは私も同じことをPC教室で授業した時から生徒さんにも言っていて、実体験としてキャッシュの削除をすれば、かなりの確率で不具合が解消するという経験をずっとしてきています。

特にGoogle Chromeは、最近困ったことが多いような気がします。他のブラウザでは大丈夫だけど、Chromeだとダメということも増えました。ブラウザ上にキャッシュを保存したりするそうですから、そういうのもあるのでしょうかね？

＜キャッシュが溜まるとこんな事で困るという例＞

PCやスマホなどのデバイス自体の動作が重い
アプリの動作がおかしい
インターネットの表示スピードが異常に遅い
設定の変更をしても、それが反映されない
動画が再生されない
WordPressでエラーが起こる

などなど、よくあるパターンはこんな感じでしょうか？

これ以外でも、まだまだこんな事があったよ！という方もいるでしょう。
私の場合だと、画像を保存しようとすると、拡張子BMPでしか保存できなくなったことがあります。それもキャッシュの削除で解決しましたね。

そして！！
ここからが今回の本番の内容です。

Chromeでスーパーリロードしてみたら

今までキャッシュの削除をすることで、たいていの問題はクリアしてきた私ですが、どうしても困ったことがありました。
それが冒頭で記載したCSSの変更です。

正しいはずだと思っているのに変更箇所が変わらず、だんだん不安になって～と2日間は苦しみ続け、ハッと気づいて別のブラウザで見たら反映されていたという…

キャッシュを削除したり、更新したり、再起動したり…
アップロードしたファイルに反映しているのか？とDLしなおして内容チェックしたりと、考えられることがすべてやっても反映されず。

他のブラウザで確認するという基本的なことをせず、自分がどれだけパニクっていたのか後からあきれるほどドツボにはまっていました。

それが、スーパーリロードすることでケロッと変更が反映されてびっくり。

よく「更新しましょう」などと言われて、ブラウザのアドレスバーの横にあるくるっと円を描いているような矢印をクリックしますね。それはリロードとも呼ばれ、しかし、この通常の再読み込みは、キャッシュを読み込んでしまうことがあります。

それに対して、強制的にキャッシュを無視してWEBサーバーの最新のデータを再読み込みするのがスーパーリロードです。
あんなにバタバタしたことが、こんなに簡単に解消できるとは！！

いざという時のために、普通のキャッシュの削除や再読み込みだけではなく、スーパーリロードもできるよう覚えておきましょう。

一般的なキャッシュの削除方法はこちらを参照

強制再読み込み（スーパーリロード）をする方法

ショートカットを知っておくと手軽にできますね。

＜普通の更新（リロード）ショートカット＞
Google Chrome：「F5」キーあるいは「Ctrl + R」キー
Microsoft Edge：「F5」キー
Firefox：「F5」キー
Safari：「Ctrl + R」キー

＜強制再読み込み（スーパーリロード）ショートカット＞
Google Chrome：「Ctrl + F5」キーあるいは「Ctrl + shift + R」キー
Microsoft Edge：「Ctrl + F5」キー
Firefox：「Ctrl + F5」キーあるいは「Ctrl + shift + R」キー
Safari：「Ctrl + shift + R」キー

Google Chromeをメインで利用している私の最もおすすめする方法は、デベロッパーツールを開いた状態で、更新ボタンを右クリックする方法です。