ウェブサイトのCSSやJavaScriptでキャッシュの衝突を避ける

by
カテゴリ:

CSSやJavascriptのキャッシュはブラウジングの速度に貢献する一方、更新がクライアントサイドに適切に反映されない場合があります。

ブラウザがキャッシュしている場合、キャッシュの有効起源切れを待つかスーパリロードを使うという手もあります。スーパーリロードはChromeやFirefoxではCtrl+Shift+Enterのキーボードショートカットでも実行できます。

しかし、ページ閲覧者の体験を損なっています。

また、昨今ではコンテンツデリバリネットワーク(CDN)により、サーバーサイドにキャッシュされたファイルが配信され、スーパーリロードをしてさえ古いファイルを参照してしまう場合があります。

筆者の場合、Cloudflare Pagesで静的ウェブサイトをホスティングしたところ、上記の問題に悩まされました。

このような問題はファイルを更新するごとに名前を固有のものに変更すると回避できます。

力技な感じがしますが、Hugoなどでページをビルドしている場合は、テーマの記述方法を変えるだけで簡単に実現できます。以下のページに方法が詳解されてますので、参考にしてみてください。

HugoでJSやCSSのブラウザキャッシュをいい感じに再読込させる by kamoqqさん

ENJOY