キャッシュとは、一度読み込んだデータをパソコンやスマホ（ブラウザ）に一時的に保存する機能です。例えばWebサイトの場合、一度訪問したサイトのデータ（画像・コード）を保存するため次回訪問時のページの表示速度が速くなります。その反面、キャッシュが溜まりすぎるとかえって表示速度が低下したり、過去に保存したデータが表示されてしまうデメリットもあります。
今回は変更内容をクライアントに確認していただくという前提で、強制的にキャッシュを無効化する方法を紹介します。
強制的にキャッシュを無効化する方法
CSSの場合
CSSファイルを読み込ませる場合、一般的に<head></head>間に下記のコードを記述します。
<link rel="stylesheet" type="text/css" href="〇〇〇.css">
強制的にキャッシュを無効化する場合、このコードに少し手を加えます。
<link rel="stylesheet" type="text/css" href="〇〇〇.css?ver=1.0.0">
ファイル名の末尾に?ver=1.0.0 のようにバージョン情報を追加するだけでキャッシュを無効化することができます。
さらにCSSを変更した場合はバージョン情報の部分を?ver=1.0.1 ?ver=1.0.2のように書き換えてサーバーにアップロードすれば、クライアント側でキャッシュクリアしなくても、強制的にキャッシュを無効化することができます。
（以降紹介する「JavaScriptの場合」「画像の場合」も同様）
JavaScriptの場合
JavaScriptファイルを読み込ませる場合、一般的に<head></head>間に下記のコードを記述します。
<script type="text/javascript" src="〇〇〇.js"></script>
JavaScriptもCSSと同じように
<script type="text/javascript" src="〇〇〇.js?ver=1.0.0"></script>
とバージョン情報を追加すればOKです。
画像の場合
画像ファイルを読み込ませる場合の記述は
<img src="〇〇〇.png" alt="〇〇〇">
強制的にキャッシュを無効化する場合は
<img src="〇〇〇.png?20211108" alt="〇〇〇">
拡張子の後ろに?20211108 のようなパラメーター（?以降の文字列は任意）を付与すればキャッシュを無効化することができます。
.htaccessでキャッシュを無効化する方法（一例）
.htaccessファイルに以下の記述を追加します。
<Files ~ "¥.(html|php|jpe?g|gif|png|css|js|pdf)$">
Header add Pragma "no-cache"
Header set Cache-Control no-cache
</Files>
この記述の場合、html、php、jpeg、gif、png、css、js、pdfファイルのキャッシュを無効にします。
最後に
今回紹介した方法はあくまでもキャッシュを”無効”にする方法で、”消去”する方法ではございません。
強制的にキャッシュを無効化する方法を制作案件に合わせて使用することで、より効率的に作業が進められると思います。
参考にしたサイト
「キャッシュの削除お願いします」をなくせ！強制的にCSSのキャッシュを無効化する２つの方法
https://haniwaman.com/cache-delete/
.htaccess（ブラウザキャッシュ高速化・無効化）制御による表示速度UP
https://lpeg.info/html/htaccess_cache.html
岐阜県内でホームページ制作依頼をご検討中の方
まずはお気軽にお問い合わせください。
お電話、ご相談、お見積り無料です！
※フォーム送信後2～3日が経過しても連絡が無い場合は、お手数ですが再度送信してください。