webサイトを更新した後「反映されてません…」を無くすため強制的に CSS や画像のキャッシュを無効化する方法
今回は、ホームページやブログ内の情報や画像を更新した後に、更新（変更）されたwebページの確認時に発生する面倒な「キャッシュの削除」を行わずにリロードで確認できようにするための方法をご紹介。
ウェブに関わってますと、クライアント様とのやり取りでよくあるお話しです。
ホームページを更新した後、更新された情報を表示するための記述
「更新しました」や「変更しました」と伝えたあと、
クライアント様に「変わってないです…」と言われることがあります。
また、最近ではスマホで確認する方も多いため、「リロード」や「スーパーリロード」の他に「ブラウザのキャッシュの削除」や「スマホブラウザアプリの履歴データの削除」をお願いしておりますが、なかなかスムーズに伝わりらず、説明だけでも多くのやり取りが発生してしまいます。
上記のような事を回避するためにもお勧めの方法と思います。
通常、HTMLからCSSファイルを読み込む場合以下の記述となります。
例《CSSファイル名 style.css の場合》
<link type="text/css" rel="stylesheet" href="styles.css">
以下のような記述に変更します。
<link type="text/css" rel="stylesheet" href="style.css?20190810">
「CSSのファイル名」の直後に「?」記号を追加しその後に分かりやすい文字列を加えます。文字列は何でもよいですが、更新日や時間等を記述しておくのがわかりやすいと思います。
例《画像ファイル名 images.jpg の場合》
<img src="images/bana01.jpg" alt="バナー01">
以下のような記述に変更します。
<img src="images/bana01.jpg?20190810" alt="バナー01">
こちらも同じように「画像ファイル名」の直後に「?」記号を追加しその後に更新日として20190810と入力してます。
更新時に上記のような記述を追加するだけで、ブラウザは異なるURLと判断します。
更新後は「?」以降の異なった文字列を入力するだけでブラウザはキャッシュデータを読みこまず更新された情報を表示するようになります。
とても簡単です！
あのやり取りを考えると…必須ですね＾＾
以上、webサイトを更新した後のキャッシュの削除等の無駄な時間を無くすため、強制的に CSS や画像のキャッシュを無効化する方法でした。
キャッシュの削除方法はこちら
コメントを残す