こんにちは！さこちゃんです。
今回の記事は「キャッシュ対策」についてです。
ホームページを更新したのに、お客さんから変更されていないって連絡がきた・・・・
原因はキャッシュかもしれないよ！一緒に対策しよう〜
キャッシュってなんだ？
キャッシュとは、一度アクセスしたWebサイトの情報を一時的に保存しておく仕組みのことです。
具体的には、画像、HTML、CSS、JavaScriptが保存されます。
では一体なぜこんな仕組みが必要なのか？
それは、Webページの表示を高速化させるために必要だからです。
ブラウザやサーバーは、一度読み込んだWebサイトの情報を保存（＝キャッシュ）することで、次回以降のアクセス時にそれらの情報を再利用し、Webサイトの表示速度を高速化することができるのです。
これにより、ユーザーはより快適にWebサイトを閲覧できるようになります。
キャッシュ対策
お客さんには更新済みの状態で確認してほしい・・・どうしたらいいの・・・
大丈夫！さこちゃんがいつも実践している方法を教えるね。
①パラメーターを付与する
パラメーターを付与することで、ブラウザが別のデータとして認識し、キャッシュを削除することができます。
方法はとっても簡単。
キャッシュクリアしたいものに「?〇〇〇〇」や「?=ver1.0」などを付与するだけです。
パターン別に見ていきましょう。
▼CSSの場合
<link rel="stylesheet" href="/css/style.css?20250727">
<link rel="stylesheet" href="/css/style.css?=ver1.0">▼JavaScriptの場合
<script src="/js/common.js?20250727"></script>
<script src="/js/common.js?=ver1.0"></script>▼画像の場合
<img src="/img/img.jpg?20250727" alt="">
<img src="/img/img.jpg?=ver1.0" alt="">またPHPファイルであれば、「date()」を使って動的にパラメーターを出力ですることができます。
▼PHPの場合
<link rel="stylesheet" href="/css/style.css?<?php print date('Ymd'); ?>">②HTTPヘッダーでキャッシュを制御する
.htaccessを使って、サーバー側へキャッシュ削除の指示を行うことができます。
.htaccessに下記を記述しましょう。
下記はHTML/CSS/JS/JPG/PNGに対してキャッシュ削除をする設定です。
<FilesMatch "\.(html|css|js|jpg|png)$">
Header set Cache-Control "no-cache, no-store, must-revalidate"
</FilesMatch>キャッシュ有効期限を1ヶ月に設定する場合は、以下のような記述を追加します。
この設定により、画像ファイルはクライアント側で1ヶ月間キャッシュされ、2回目以降のアクセスでは、サーバーへのリクエストをせずに表示されます。
<FilesMatch "\.(html|css|js|jpg|png)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>.htaccessの設定は、サーバーの環境に直接変更を加える設定です。
設定を誤ると、Webサイトが表示されなくなるなどの問題が発生する可能性もあるため、バックアップをとってから作業を行うなど、慎重に行いましょう。
③先方にキャッシュクリアを実行してもらう
この方法は先方を少し手間取らせてしまいますが、最も確実な方法です。
以下に、ブラウザ別にクリア方法を詳しく解説します。
Chromeの場合
- Chromeを開き、右上の3点リーダーをクリックします。
- 「その他のツール」から「閲覧履歴の削除」を選択します。
- 期間を選択し、「キャッシュされた画像とファイル」にチェックを入れて、「データを削除」をクリックします。
Firefoxの場合
- Firefoxを開き、右上の3本線をクリックします。
- 「オプション」→「プライバシーとセキュリティ」を選択します。
- 「Cookieとサイトデータ」の「データを消去」をクリックします。
- 「キャッシュされたウェブコンテンツ」にチェックを入れて、「消去」をクリックします。
Safariの場合
- Safariを開き、「Safari」メニューから「履歴を消去」を選択します。
- 期間を選択し、「履歴を消去」をクリックします。Safariの場合は、キャッシュと履歴がまとめて消去されます。
Edgeの場合
- Edgeを開き、右上の3点リーダーをクリックします。
- 「設定」→「プライバシー、検索、サービス」を選択します。
- 「閲覧データのクリア」の「クリアするデータの選択」をクリックします。
- 期間を選択し、「キャッシュされた画像とファイル」にチェックを入れて、「今すぐクリア」をクリックします。
④先方にシークレットモードで確認してもらう
この方法も先方を少し手間取らせてしまいますが、かなり確実な方法です。
Chromeの場合
- Chromeを開く
- 右上の「︙（三点メニュー）」をクリック
- 「シークレット ウィンドウを開く」を選択
Firefoxの場合
- Firefoxを開く
- 右上の「≡（三本線メニュー）」をクリック
- 「新しいプライベートウィンドウ」を選択
Safariの場合
- Safariを開く
- メニューバーから「ファイル」をクリック
- 「新規プライベートウインドウ」を選択
Edgeの場合
- Edgeを開く
- 右上の「︙（三点メニュー）」をクリック
- 「新しい InPrivate ウィンドウ」を選択
番外編：WordPressの場合
キャッシュ系プラグインを活用することで、サーバーサイドのキャッシュ対策を簡単に行うことができます。
代表的なキャッシュ系プラグインは下記の通りです。
※導入方法は割愛させていただきます。
おわりに
今回は「キャッシュ対策」について紹介しました。
ちなみに、さこちゃんは①で対応することが多いです。
ぜひ参考にしてみてください。
以上、最後まで読んでいただき、ありがとうございました！