ウェブサイトのキャッシュを削除する方法

ウェブサイトを閲覧するときに、キャッシュが残っていると読み込みが早くなり便利ですが、修正作業中などに更新がリアルタイムに反映されずに不便なこともあります。クライアント側、サーバー側での対処法をそれぞれ紹介します。

クライアント側

ブラウザからキャッシュを削除すればよいのですが、毎回そんなことやってられません。手軽にキャッシュを更新する方法を紹介します。

（1）スーパーリロード

ページを更新するときに、ブラウザの更新ボタン、F5 キー、Windows ならCtrl + R、Mac ならCommand + Rを使うと思います。これだとキャッシュを保持したままの更新となりますが、下記のショートカットでのリロードはキャッシュを読み込みません。これをスーパーリロードと呼びます。

Windows … Ctrl + Shift + R
Mac … Command + Shift + R

（2）Disable cache を使う

Google Chrome でしか使えない方法ですが、クライアント側のキャッシュクリアはこれが一番確実です。

F12もしくはCtrl + Shift + I（Mac は⌘+option+i ）でディベロッパーツールを起動する
Network パネルを選択し、Disable cache にチェックをつける
ディベロッパーツールを開いた状態で更新する

デベロッパーツールを閉じてしまうと Disable Cache は動作しなくなってしまうので注意しましょう。一度設定してしまえば、次回ディベロッパーツールを開いた時にも設定が保存されています。

（3）シークレットウィンドウで確認する

ブラウザがアクティブな状態のときに、下記のショートカットでシークレットウィンドウを開くことができます（ Windows の場合）。.htaccess を変更してリダイレクト処理を何度も確認したいときには、(2)の方法よりもこちらがオススメです。

Internet Explorer … Ctrl + Shift + P
Firefox … Ctrl + Shift + P
Chrome … Ctrl + Shift + T

シークレットウィンドウではキャッシュを読み込みませんが、注意点としてシークレットウィンドウは開いてる間のみキャッシュを取るので、二回目以降の更新はキャッシュを読み込む可能性があります。ただシークレットウィンドウは一度全て閉じるとキャッシュを削除してくれるので、一度閉じてから開けばキャッシュを読まずにサイトにアクセスできます。

サーバー側

実際にサイトを閲覧する方がキャッシュクリアの方法を知っているとは限りません。そもそも、キャッシュを読んでるかどうかなんて判断できないですよね。

（1）ファイルにパラメーターを付与する

当たり前ですが、ファイル名を変更するとブラウザはキャッシュを読み込めません。しかし、毎回ファイル名を変更するのは面倒です。実はファイル名まで変えなくても、パラメータを与える/変更するだけで異なるファイルとみなされるのでキャッシュを読み込まなくなります。

例：CSS ファイル

読み込むソースファイル等に対して<link href="css/styles.css?180723">のようにパラメーターを振ります。日付の数字などにすると分かりやすいでしょう。画像や JS ファイルも同じような形で使えます。

styles.css
↓
styles.css?180723

PHP なら下記のようにパラメータとして常に現在の年月日時刻を出力させて、1秒ごとに異なるパラメータを付与し続けるという荒業もできます。とはいえ、常にキャッシュを読ませないのはユーザーにとって余計な通信をさせてしまい、読み込み速度の低下にもつながるため注意しましょう。自サイトの修正時など、何度も確認が必要な時だけ設定するのはアリだと思います。

<link href="css/styles.css?<?= date('YmdHis') ?>">

ソースファイルに書いてあるパスに注意

CSS や Javascript ではファイル内で他のファイルを読み込んでいる（例えば、CSS の background-image: url( ... ) など）場合は、その読み込みパスにもパラメータを付与しなくてはなりません。

（2）.htaccessで制御する

全てのファイルに対してキャッシュを取らなくなります。こちらも先ほどと同様、ユーザーにとっては不便なので、デメリットを理解した上で使用しましょう。

Header set Pragma no-cache
Header set Cache-Control no-cache