HOME
Web制作におけるキャッシュ問題
Webサイトを制作していると度々直面するのが、「ファイルを修正したのに表示が変わらない」「CSSを変更したのに反映されない」「画像を差し替えたのに古いものが表示される」といったキャッシュによって引き起こされる問題です。
キャッシュについておさらい
キャッシュとは、アクセスしたWebページのデータを使用中のデバイスに一時的に保存しておき、同じページを開くときにはサーバーから読み込むのではなく、一時保存したデータを使って読み込みを行うことでページを素早く表示できるようにするという仕組みのことです。
Webサイトを快適に閲覧できるようする目的で作られた仕組みではあるのの、サーバー側で元のファイルが更新されていても、キャッシュが存在すれば古いデータを表示してしまうという弊害をもたらしてしまうのです。
キャッシュによる課題をどう解決するか？
Webサイトにおいてはこのキャッシュによって引き起こされる問題をどう解決するかが悩みの種のひとつです。
作業時におけるキャッシュに関しては、自分で適宜キャッシュをクリアすれば良いかもしれません。
しかしクライアントやサイトを訪れる不特定多数のユーザーに対して、キャッシュのクリアを要求するのは困難です。
ユーザーのキャッシュ環境に左右されないよう、あらかじめWebサイト側（HTMLやCSS側）でキャッシュを読みこまないように工夫しておくことが最善策です。
このページでは、Cache Basting（キャッシュバスティング）と呼ばれるHTMLやCSS側でキャッシュを回避する方法について解説します。
HTMLやCSS側でキャッシュを回避する方法【Cache Busting】
簡単に言うならば、Cache Busting（キャッシュバスティング）とはキャッシュを利用せずに読み込みするように指定することです。
ブラウザはWebページを読み込む際、画像やCSSなどのファイルパスを識別してキャッシュに保存されていればキャッシュのデータを使い、無ければ新しいデータとしてサーバーから取得して表示を行います。
Cache Bustingは、それらのファイルパスにパラメーターを付け加えることで、ブラウザに新しいファイルとして認識させキャッシュの読み込みを回避させ、サーバーからファイルを読み込むようにできます。
ファイル読み込み時にパラメーターを付け加える
パラメーターとはURLの末尾に加えることができる変数のことで、ユーザーがアクセスした際の情報などをサーバーに伝える目的で利用されます。
パラメーターは次のようにファイルパスの末尾に「?」をつけて書き加えます。（HTMLでもCSSでもどちらでも可能です）
imgタグだけでなく、スタイルシートやJavascriptの読み込みやCSSのbackground-imageなどのファイルパスでもOKです。また、パラメーターにはアルファベットでも数字でも利用できます。
パラメーターを「ファイルの修正前」と1文字でも異なる文字列にさえしておけば、ブラウザにキャッシュを回避させることが可能です。
HTML
<img src="./uploads/images/sample.jpg?ver=1.0.1"> <link rel="stylesheet" href="./css/style.css?20230101"> <script type="text/javascript" src="./js/common.js?hogehoge"></script>
CSS
.box{
background:url("./uploads/images/sample.jpg?date20230101");
}
読み込み速度の低下に注意
当然ながらキャッシュを回避しているので、ページにアクセスするたびに毎回サーバーからデータを読み込んで表示することになります。
画像データが多い場合はキャッシュを利用しないとページの表示速度に大きく影響しますので注意が必要です。
まとめ
以上がHTMLやCSS側からブラウザのキャッシュを回避するCache Bustingの方法です。
サイトの修正などでクライアントとやり取りする際にネックになるキャッシュ問題ですが、このように意外と簡単な方法で回避することができます。
読み込み速度などに気を使いながら活用してみてください。
