ブラウザ扱う人の永遠のテーマ、キャッシュ
WEBブラウジングを快適にする仕組みとしてリソースをキャッシュする仕組みが大抵のWEBブラウザに組み込まれています。
しかしこのキャッシュ、開発者にとってはとても厄介な代物で
何も手を入れていない場合、
更新リリース時に修正したはずのjsファイルやcssファイルがブラウザのローカルキャッシュから表示され、
ユーザから処理エラーやデザイン崩れなどのクレームを山程受けることになるという極めて危険な代物です。
（都度スーパーリロードしてね。とアナウンスすることになる。）
まずはリソースがキャッシュから表示されているのか問題を切り分ける
開発者ツール＞ネットワークタブで読み込んだリソースの一覧が表示されますが、
そのサイズの欄に(from disk cache)、または(from memory cache)とあるリソースはキャッシュから表示されていることを表します。
なので、何か問題が発生しキャッシュが疑わしい場合は、ここを見ることで問題の切り分けができます。
回避策は？
回避策として考えられるのは大きく３点です。
思い切ってキャッシュしない
多くの人が採用する方法ですかね。個人的にはあまりno-cacheを信用していないのでどうかなと感じでいます。
あと、モバイル端末とかで表示するなら割と画面表示が遅くなってしまう気がするのも引っかかるところです。（ECサイトとかヤバそう。。。）
どんな風に指定する？
コード的にはよく見るやつですが、以下のmetaタグを入れることでキャシュがされなくなるそうです。（半信半疑）
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">特定の時間キャッシュする
これも個人的にあまり信用してないやつです。
Cache-ControlとExpiresの信用度の低さは何なのだろう。本当に消えるの・・・？
とはいいつつみんな消えると言ってるので。消えるんでしょうね・・・。
どんな風に指定する？
これもコード的にはよく見るやつです。
以下のmetaタグを入れることで指定の時間が経過した段階でキャッシュは削除されるるそうです。（半信半疑２）
<!-- 中間サーバによる共有キャッシュを1時間、ブラウザによる私用キャッシュを1時間に設定 -->
<meta http-equiv="Cache-Control" content="s-maxage=3600,max-age=3600">
<!-- 実際に画面を表示した時の1時間後の時刻をGMTで指定 -->
<meta http-equiv="Expires" content="Mon, 31 Aug 2020 22:00:00 GMT">特定のファイルだけキャッシュする
対応としては読み込む対象のリソースのURLの末尾に
意味のないクエリ文字列を付与して常に最新のリソースを取得しよう。というものです。
おしゃれに言うとCache Bustingとか呼ばれてると思います。
どんな風に指定する？
ざっくりこんな感じのコードになります。
<!-- CSSの例 -->
<style type="text/css" href="css/style.css?20200812">これはscriptタグでもimgタグでも同様となります。
ただ読み込むリソースが多すぎる場合に
馬鹿正直に一つずつにクエリ文字列を付与していくと大変なことになるので、
例えばJavaであればクエリ文字列を付与するカスタムタグとか作ってやるなど工夫が必要です。
総括
画像を多用するシステムで速度を気にするならno-cacheは無しかなと思います。
また。キャッシュの有効期限を定める場合は、
どれぐらいの時間キャッシュを保持するのかなどちゃんと検討しないとまたユーザからの問い合わせが来る羽目になると思います。
Cache BustingはCache Bustingで個人で適当に作ってる場合はさておき、業務システムの場合は共通化の作り込みは必須かと思うので少し大事かなと思います。
じゃあ何にすんのよということですが、、、まぁ。。。うん、何がベストプラクティスなんでしょうねぇ。
僕にもわからないです。
コメント