サイトのデザインを更新したのになかなか反映されない‥そんなお悩みありませんか?

お客様から依頼を受け、修正が完了したにも関わらず「変わっていないよ」なんてケースも‥大事なお客様との信頼関係を損ねる問題になりかねません。

WEBサイトを制作する上で悩まされるキャッシュ問題、今回はそんなキャッシュのお悩みから解放される方法をいくつかご紹介したいと思います。

【目次】
1.そもそもキャッシュとは?
2.簡単削除!「スーパーリロード」
3.ブラウザのキャッシュをまるっと削除
4.シークレットモードでキャッシュを回避
5.デベロッパーツールでキャッシュを削除
6.まとめ

1.そもそもキャッシュとは?

ASCII.jpデジタル用語辞典の解説では以下のように説明されています。

よく使うデータへのアクセスを速くするために、より高速な記憶装置に一時的に保存する仕組み。たとえば、アプリケーションの作業中のデータは、ハードディスクからメインメモリーに読み込んでおくことで、処理を高速化できる。また、Webブラウザーやサーバーのキャッシュ機能では、一度表示したページの内容をファイルに保存することで、次回からは、そのページをすばやく表示できる。
※引用元:ASCII.jpデジタル用語辞典の解説

つまりキャッシュとはブラウザが一度表示したWEBのデータを記憶し、二度目以降の表示をすばやくしてくれる仕組みのことです。

キャッシュは保存場所によって「ブラウザキャッシュ」と「サーバーキャッシュ」の2つに分かれており、ブラウザキャッシュはデバイス上に、サーバーキャッシュは名前の通り、サーバー上にキャッシュが保存されます。

ここではブラウザキャッシュの対策法を詳しく説明していきます。

2.簡単削除!「スーパーリロード」

サイトのデザインを変更した後、動作チェックの為にまず最初に行うのは更新ボタンのクリック。何度クリックしても反映されない時は「スーパーリロード」を行ってみてください。ショートカットキーで簡単にキャッシュの削除が行えます。

Windowsの場合
Ctrl + F5
もしくは
Shift + F5

Macの場合
Command + R

とっても簡単!

スーパーリロードはブラウザが記憶しているキャッシュを強制的に再読み込みし、上書きすることが出来ます。
ただし、ページから直接参照されているファイルのキャッシュを上書きするものなので、スーパーリロードを使っても全然反映されないよ‥なんてこともあったりします。

3.ブラウザのキャッシュをまるっと削除

そんな時にはこちらをお試しください。

ブラウザ右上のメニューから設定を開き、ページ下の「詳細設定を表示」をクリック。

プライバシーとセキュリティの欄に「閲覧履歴データの削除」があるのでこちらをクリック。

「キャッシュされた画像とファイル」をチェックし、「データを削除」をクリックするとキャッシュの削除が完了します。

こちらもショートカットキーで簡単に開くことが出来ますので、覚えておくと便利です!

Windowsの場合
Ctrl + Shift + Delete

Macの場合
Shift + Command + Delete

4.シークレットモードでキャッシュを回避

Google chromeの「シークレットモード」はブラウザで保存されたキャッシュを使用せずWEBページを閲覧することが出来ます。画面にある通り、シークレットモードでの閲覧履歴、cookie、フォームに入力した情報などは残りません。

ただし、注意点としてシークレットモードを開いている間は通常通りキャッシュが記憶されます。デザインの更新後、動作チェックをする際には開いていたシークレットモードを一度閉じて再度起動しなければキャッシュの回避にはなりません。シークレットウィンドウは「閉じれば残らない」これがお約束です!

ブラウザ右上のメニューから「シークレットウィンドウを開く」で起動出来ます。

ショートカットキーで簡単に開くことも出来ますのでこちらもぜひ覚えてみて下さい。

Windowsの場合
Ctrl + Shift + N

Macの場合
Command + Shift + N

参考:シークレットブラウジングの仕組み

5.デベロッパーツールでキャッシュを削除

ご存知でしたか?WEBサイトを制作している方にはお馴染みのデベロッパーツールでもキャッシュの削除を行うことが出来るんです。

デベロッパーツールの起動のさせ方はこちら。

Windowsの場合
F12

Macの場合
Command + option + I

デベロッパーツールを起動するとこのようなパネルが開きます。

デベロッパーツールを起動したまま、ブラウザ左上にある更新ボタンを長押しすると、「キャッシュの消去とハード再読み込み」がありますので、こちらをクリックするとキャッシュの削除が完了します。

6.まとめ

WEBの世界にいる以上、キャッシュという言葉はよく使いますが、お客様に具体的にどう説明したら良いものか悩みますよね。

今回紹介したブラウザキャッシュの削除方法は、どれも簡単に行えるものばかりなので、お客様にも説明しやすいのではないでしょうか。

WEBサイトを制作する上で長く付き合っていかなくてはならいキャッシュ、同じように悩まれている方の参考になれば幸いです。