ユーザーから「ページが変更されてない」を回避するキャッシュをクリアする方法

ホームページの更新を依頼して、制作担当者から「更新できました」と連絡を受けて、ホームページを見たところ、指示した個所が変わっていない、もしくは表示が崩れてしまっているなどの経験はありませんか？
制作担当者の場合は、お客様から「何も変わってない」とクレームの連絡があったことはありませんか？
その原因のほどんどが、ブラウザの「キャッシュ」が原因となっています。
今回はユーザー側、制作者側、両方の立場で「キャッシュ」をクリアする方法を紹介します。

ブラウザの「キャッシュ」とは

キャッシュとは、一度アクセスしたことのあるページのデータを一時保存する仕組になります。
画像やテキストなどHTMLデータを一時的にブラウザに保存しておくことによって、同じページに再びアクセスした時に、ブラウザ内に保存されたデータを読み込ますことによって、短い時間でページを表示することが出来ます。

キャッシュの役割とメリット

ページを読み込む時間を短縮

始めて訪れたページを表示するには、ページのデータをサーバーからダウンロードしなければなりません。そのため、ページのデータが重たいと表示するのに時間がかかってしまいます。
同じページを何度も表示する場合、その都度サーバーにアクセスして画像やHTMLなどのデータを取得してるとページを表示するのに時間かかってしまい非効率です。
それを解消するために一度訪れたページのデータをブラウザのキャッシュで保存する事によって2日目以降ページに訪れた場合、キャッシュのデータを使うことで表示時間を短縮することができます。

通信料の節約

キャッシュは利用してる端末に保存されます。そのためサーバーから画像や文章などのデータをダウンロードする事なくページを表示することが出来るのでデータ通信量を節約することができます。
スマホなどの場合、1ヵ月の通信料が決められていることが多いので通信データ容量が抑えることが出来ることができるのは非常に便利です。

キャッシュのデメリット

デバイスの容量を圧迫

キャッシュはPCやスマホなどのデバイス内にデータが保存されます。そのため、ブラウザキャッシュが溜まりすぎるとストレージ容量を圧迫することがあります。
キャッシュが溜まりすぎるとブラウザの動作が重くなってしまいます。
スマートフォンの場合キャッシュがどんどん蓄積するとWebブラウザやアプリが急激に重くなったりします。

Webサイトの更新が反映されない

キャッシュはい一度アクセスしたページのデータを保存して、再度ページに訪れた時に表示速度を上げるためにキャッシュ内のデータを利用します。
ページを更新・修正しても、キャッシュ内のデータが表示されてしまうと、古い情報が表示してしまいます。
その為、せっかくページを更新してもユーザには古い情報が表示してしまうことがあります。

キャッシュをクリアする方法

ユーザー側の場合

制作担当者から「更新できました」と連絡を受けて、ページを見たが変わってない場合は、下記の方法で画面のリロードを試してください。

パソコンの場合
ページを表示した状態で、以下のキーを入力します。
Windows：Ctrl＋F5キー同時押し
Mac：⌘Command+Rキー同時押し

制作者側場合

制作者の場合、お客様から「何も変わってない」と連絡を受けて、その都度、キャッシュの仕組みやリロード方法を説明するのは時間を取られてしまいます。
そんな場合Cache Busting（キャッシュバスティング）を使うことで、古いデータを読み込まさないようにする事によって、ブラウザのキャッシュを制御することが出来ます。
設定方法は簡単で、ファイル名の末部にパラメーターを付ける方法です。

例えば、画像変更した場合

＜img src=”画像名.jpg”＞
↓拡張子の後ろに?〇〇を追加
＜img src=”画像名.jpg?20230216“＞

この?〇〇をパラメーターと呼びます。

.css?〇〇
.js?〇〇
など、CSSファイルやJavaScriptにも使えます。

まとめ

ユーザーに更新できないと言われないためにも、制作者側は更新したフィアルのCache Busting（キャッシュバスティング）の設定をすることをオススメします。
Cache Busting（キャッシュバスティング）の設定をすることで、ユーザー側は画面のリロードをすることなく、更新したページを見ることが出来るので、更新のトラブルを未然に防ぐことが出来ます。
また、過去の記事で「便利なブラウザのリロード（更新）方法まとめ」の記事をかいています。