Chromeでスーパーリロードする方法を解説!キャッシュクリア/効かない場合

Chromeでスーパーリロードする方法を解説!キャッシュクリア/効かない場合

Chromeのスーパーリロードと言われる再読み込みの方法について解説します。スーパーリロードをすることでCSS/JSS/画像ファイルなどの外部ファイルのキャッシュに依存しない形でページをリフレッシュできます。ぜひやり方をマスターしましょう。


目次[非表示]

  1. Chromeのスーパーリロードとは
  2. Chromeでスーパーリロードする方法
  3. 常にスーパーリロード状態にできる?
  4. Chromeでスーパーリロードが効かない場合
  5. まとめ

Chromeのスーパーリロードとは

みなさんはChromeのスーパーリロードをご存知でしょうか?

はじめて聞く方もいるかと思いますので、まずスーパーリロードとは何かについて説明します。通常ChromeでWEBサイトにアクセスすると、HTML/CSS/JavaScript/画像ファイルなどのWEBページを構成するファイルが読み込まれます。

実は2回目にアクセスする際やリフレッシュ時にはChrome側でCSS/JavaScriptなどのファイルをキャッシュする事をしています。

どのくらいの期間キャッシュするかはサイト側の設定によりますが、ネットワークやサーバー側の負荷を少なくするためにChromeではキャッシュすることを行います。

キャッシュ自体は悪いものではないのですが、もしも開発者がCSSやJavaScriptを更新していた場合にはいくらリロードしても効かないという事態になります。

その時にChromeのスーパーリロードという方法を使うことで、キャッシュファイルを使わずに逐一サーバー側にHTML/CSS/JavaScript/画像などを取りに行くという事をします。

つまりスーパーリロードはキャッシュに依存しないリロード方法と言えます。

今回はChromeでスーパーリロードを行う方法と、サイト更新をしている方向けにスーパーリロードをしても効かない場合に見るべきポイントをご紹介していきます。

Chromeでスーパーリロードする方法

Chromeでスーパーリロードする方法ですが、ショートカットで行えます。

[Windows]
Shift + F5

[Mac]
Command + Shift + R

上記のショートカットでスーパーリロードを実行することができます。

またスーパーリロード以外でサイトごとや全体でキャッシュを削除(クリア)する方法もあります。スーパーリロードはキーの入力ミスなどで、失敗する可能性も0ではありませんが、キャッシュクリアではより確実にキャッシュがない状態でのリロードと言えるかと思います。

キャッシュクリアをする方法は下記の記事にまとめていますので、参考にしてみて下さい。

chromeのキャッシュクリアの方法を解説!特定のサイト/ショートカット/アドオン/自動でキャッシュを削除

chromeのキャッシュクリアの方法を解説いたします。chromeのキャッシュの削除方法とあわせて自動的にchromeのキャッシュを削除する方法・特定のサイトのみ削除する方法・chromeのキャッシュのサイズの変更方法などをご紹介します。

Thumb

更にChromeでcookieを編集したり確認、削除なども行うことができます。cookieの操作が必要となる方は下記の記事も参考にしてみるといいかと思います。

chromeのcookie(クッキー)の保存場所は?cookieの確認・編集・削除方法を解説!

chromeのcookie(クッキー)の保存場所やcookieの中身の確認・編集・削除方法について解説していきます。cookie(クッキー)とは何かという事から、chromeの拡張機能やデベロッパーツールを使っての中身の確認や編集・削除方法をご紹介します。

Thumb

常にスーパーリロード状態にできる?

Chromeのデベロッパーツールを使うことで毎回スーパーリロードの状態(つまり、キャッシュを利用しない)に近い事はできます。

設定するにはまずデベロッパーツールを開きましょう。下記のショートカットで開きます。

[Windows]
Ctrl + Shift + I

[Mac]
Command + Option + I

デベロッパーツールのメニュー
デベロッパーツールのメニューの「Settings」を開きましょう。
Networkの設定
Networkの箇所の「Disable cache(while DevTools is open)」にチェックを入れます。

こうすることで、デベロッパーツールを開いているときだけ、キャッシュに依存しなくなります。

毎回デベロッパーツールを開くという制約はありますが、この方法でキャッシュを無効にすることができます。

Chromeでスーパーリロードが効かない場合

サイト開発者の方でスーパーリロードしてもファイルが更新されない、効かないという経験があるかと思います。その場合は下記ポイントを確認してみましょう。

ファイルが更新されていない

サーバーにデプロイしたファイルが更新されていないというケースはよくあります。

再度本当にファイルを更新したのか、またはサーバー上にデプロイされているのか確認をしましょう。

サーバー・CDNなどのキャッシュが効いている

WEBサーバー側のキャッシュや、CDNなどを利用している場合はCDNでキャッシュを保持していて、そのキャッシュを返している場合があります。

サーバー側のキャッシュ、CDN側のキャッシュをクリアして再度確認してみましょう。

まとめ

いかがでしたでしょうか。Chromeのスーパーリロードについて方法や、ファイル更新されない場合にチェックすべきポイントなどをまとめました。

ブラウザをただたんにサイト閲覧のために利用しているユーザーの方はスーパーリロードを必要とする機会はあまりないかもしれませんが、WEBサイト開発者の方はよく利用することになるかと思います。

毎回調べなくてもいいように、今回したスーパーリロードのショートカットだけ覚えておきましょう。


関連記事