【キャッシュクリアで解決】サイトが更新されないときのキャッシュ削除手順～Google Chrome～

キャッシュとはなにか？

web制作やサイトの運営を始めたばかりだと「キャッシュ」という言葉を初めて知った方もいるでしょう。

キャッシュには「ブラウザキャッシュ」と「サーバーキャッシュ」があります。

キャッシュとは、1度表示したデバイスにサイトの情報を保存したデータ

普段パソコンやスマートフォンで閲覧しているサイトは、実はパソコンなどのデバイスに一時的にデータ保存されています。

1度閲覧したサイトのデータを保存したものが「ブラウザキャッシュ」と呼ばれるものです。

そして、2回目以降、同じサイトやwebページを表示する際にブラウザキャッシュが使われます。

キャッシュのメリットは、2回目以降のページ表示速度をあげること

ブラウザキャッシュを保存しておくことで、2回目以降サイトを表示する際は、②③のサーバーとのやり取りを省くことができます。

その結果、ユーザーにページを早く表示させることができるのです！

ページの表示速度はSEO対策にも関わるので、キャッシュを残すこと自体が悪いわけではありません。

キャッシュが残っていると、サイトの変更が反映されないことがある

今回のテーマでもありますが、サイトの変更をしたときに、いくら更新しても実際のページで反映されないことがあります。

その場合「キャッシュが残っていることが原因」という場合が多いのです。

上記の図でも触れましたが、2回目以降サイトを表示させるのに、ブラウザはある一定期間キャッシュを使います。

ブラウザのキャッシュは簡単に削除できる

ブラウザキャッシュは、自分のデバイスに保存されたデータなので、簡単に削除できます！

• ブラウザキャッシュは自分が使っているデバイスの「ブラウザ」に保存されたデータ
  ＝自分で削除ができる
• サーバーキャッシュはwebサイトがある「サーバー」に保存されたデータ
  ＝サーバーから削除する（サーバー管理者・サイト管理者がするのが一般的）

キャッシュを貯めすぎるとブラウザの動作が遅くなるので、更新頻度に応じて定期的にキャッシュ削除をすると良いでしょう。

”キャッシュクリア”の手順～Google Chrome～

ブラウザのキャッシュクリアには2つ方法があります。

• 特定のサイトやページのみキャッシュクリアする
• ブラウザのキャッシュそのものを削除する

まず、私がサイト制作時に時々使う「特定のサイトやwebページでキャッシュクリアする方法」をご紹介します。

この方法だと、

「ブラウザに記憶させているログイン情報やパスワードのデータまで間違って削除してしまった･･･」

ということがないため、安心です。

キャッシュクリアする前に確認したいことはこちらで解説しています！

1 キャッシュを消したいページを開く

変更が反映されないサイトのページをブラウザ（Google Chrome）で開きます。

2 デベロッパーツールを開く

サイトを開いた状態でデベロッパーツールを開きます。

• Windowsでは「F12キー」もしくは「Ctrl + Shift + I（or C）」
• Macでは「⌘command + option + I（or C）」

上記のショートカットキーで開けます！

3 更新ボタンを長押しする

デベロッパーツールを開くと、おそらく右側にいろいろと表示されますが、無視してください！

必要なのは左上！

下記の「更新」ボタンを長押しします。

すると、再読み込みの表示が3つでてきます。

4 ”キャッシュの消去とハード再読み込み”をクリックする

上記赤枠の「キャッシュの消去とハード再読み込み」をクリック。

すぐに再読み込みされるので、変更箇所を確認してみましょう！

ブラウザの設定で”キャッシュクリア”する場合

もう1つの方法として、ブラウザの設定からキャッシュをクリアする方法があります。

サイトの制作やブログの運営などをしている場合は、上記のデベロッパーツールを使う手順でキャッシュの削除ができます。

しかし、お客様の中には「デベロッパーツール」という聞き慣れない単語やショートカットキーに馴染みがなく、抵抗がある方もいます。

ページ右上の3点アイコンから「閲覧履歴を消去」をクリック

Google Chromeのメニューから「閲覧履歴を消去」をクリックします。

”キャッシュされた画像とファイル”にチェックが入った状態で「データを削除」する

「キャッシュされた画像とファイル」のチェックを入れて「データを削除」で完了です！

注意点として上記赤枠の「Cookieと他のサイトデータ」のチェックは外しましょう！
Cookieを削除してしまうと、ログイン情報やパスワードを記憶させているサイトからログアウトしてしまいます。

【制作者向け】キャッシュを残さない設定”キャッシュの無効化”

サイト制作をするなら、そもそも不要なキャッシュデータを残さないように無効化できます！

「デベロッパーツール」を開いている間にはなりますが、キャッシュの無効化ができます。

1 デベロッパーツールを開く

すでにショートカットキーを紹介しましたが、もう1度載せます。

• Windowsでは「F12キー」もしくは「Ctrl + Shift + I（or C）」
• Macでは「⌘command + option + I（or C）」

2 ネットワークを開いて”キャッシュを無効化”のチェックを入れる

デベロッパーツールの「ネットワーク」というタブを開きます。

もし、ネットワークという表示が見当たらなければ、下記画像でネットワーク横にある「>>」をクリックすると表示されます。

上記のように「キャッシュを無効化」もしくは「Disable cache」にチェックを入れたらOKです！

まとめ：サイトの変更が反映されない時はキャッシュを疑おう

最後まで読んでいただきありがとうございます！

今回の記事では

1. キャッシュとは何か？
2. Google Chromeでキャッシュクリアする方法・手順
3. キャッシュを残さない設定「キャッシュの無効化」

以上、3点について解説させていただきました！

特に重要なポイントは、以下の3つです。

サイトを制作・運用中で変更が反映されずお悩みの場合や、これからサイト制作を始めたい方の参考になりましたら幸いです。

今後もwebに関する運用情報を発信していく予定ですので、是非ご覧ください！