📝

ブラウザとキャッシュについて改めて分かりやすく説明します【スーパーリロード？キャッシュの寿命？】

2020/01/26に公開

こんにちは、たつきちです。

Webサイトを作る人なら、 「サイトを更新したのにユーザーから『更新されてないんですけど？』と言われた」 という経験は誰しもあると思います。

このような現象を引き起こす最大の要因として「ブラウザのキャッシュ」というものがあります。

「キャッシュ…聞いたことはあるけど実は詳しく理解してないんだよな」という人も多いのではないでしょうか。

ここで改めて理解しておきましょう！

キャッシュ

サイト内のHTML・画像・CSS・JavaScriptなどのファイルは、ブラウザが気を利かせて一定期間 キャッシュ （一時保存）しています。

これは、一度読み込んだファイルについて、2回目以降はキャッシュ済みのファイルを利用することによって、サイトの表示にかかる時間を短縮するための機構です。

キャッシュにはWebサーバー側の設定によってファイルごとに異なる寿命が与えられ、ブラウザは自分が保持しているキャッシュの寿命が切れていなければそれを表示し、寿命が切れていれば改めてWebサーバーからコンテンツを取り寄せるという仕組みになっています。

便利なはずのこのキャッシュという機構に起因して、次のような問題が起こる場合があります。

サイトが更新された直後にいつも利用しているブラウザでサイトを訪問すると、

という状態になることがあり、更新後のHTMLと更新前の画像・CSS・JavaScriptに整合性がない場合、画面の表示内容などに不具合が起こります。

このような場合、 ブラウザのキャッシュを削除してページを再読み込み することで、整合な状態となって不具合が直ります。

「キャッシュを削除してページを再読み込み」という機能はほとんどのブラウザに標準装備されていて、一般的に Shift + F5 や Shift + Ctrl + R などのショートカットで利用できます。この操作を俗に スーパーリロード などと呼んだりします。

一度スーパーリロードを行うと、 更新後 の画像・CSS・JavaScriptが改めてキャッシュされるので、それ以降はスーパーリロードしなくても正しく表示されるようになります。

というわけで、Webサイトを見ていて「画面の表示がなんかおかしいぞ？」と思ったらとりあえずスーパーリロードを試してみるのがよいでしょう。

「ブラウザにどれぐらいの寿命でキャッシュを持たせるか」はWebサイト運営者やWebサーバー管理者の設定次第で複雑に変わります。

キャッシュ戦略は実はエンジニアにとってもノウハウや専門性を問われる難しい分野だったりします。

ただ、レンタルサーバーなどで運用されている静的なサイトでは、サーバーから明示的にキャッシュの寿命を指定していないことが多いです。

明示的に指定されていない場合、標準的なブラウザは「そのファイルの最終更新日時」と「今」の時間差の10%をキャッシュの寿命と見なすそうです。（参考）

つまり、

ということになりますね。