【Cocoon】ブラウザキャッシュとは?ONにしたときのデメリット

Cocoon」にあるブラウザキャッシュの有効化という機能は一体何をしているのか?

を調べた結果メモ。

▲高速化→ブラウザキャッシュ

先に結論

結論からいうとブラウザキャッシュの有効化をONにすると

  • 画像
  • フォント
  • JSファイル
  • CSSファイル
  • PDFファイル

などの有効期限が1年になります。

 

これはつまり、例えばあるページにクセスして、そのページ内でa.jpgという画像が使われていた場合、「そのa.jpgを1年間ずっと使い回す」ということになります。

ここで注意すべきは、そのa.jpgの中身がサーバー側で書き換えられたとしても、クライアント側は「a.jpgの中身って変わってる?」とサーバーに確認することさえしなくなるという点です。

要するに以下のようになります。

  • ブラウザキャッシュの有効化がOFFの場合:
    1. (1回目のアクセス) a.jpgをキャッシュする
    2. (2回目以降のアクセス)サーバーに「a.jpgの中身って変わってる?」と確認し、もし変わっていなければキャッシュを使用する
  • ブラウザキャッシュの有効化がONの場合:
    1. (1回目のアクセス)a.jpgをキャッシュする
    2. (2回目以降のアクセス)サーバーに「a.jpgの中身って変わってる?」と確認せずに、問答無用でキャッシュを使用する(※これは1年間続く)

 

なので結論からいうと、これは全員がONにすべき設定です。

 

ただし、ONにしたときの注意点としては

リソースファイル(画像など)を差し替えるときは必ずファイル名を変更する

があります。

例えば「a.jpgの画像の中身が間違っていたから、今アップしているa.jpgを削除して、再度修正した画像をa.jpgとしてアップする。HTMLのソースは<img src="a.jpg">のままにしておく」みたいなことをしてはダメです。

なぜなら、クライアントはサーバーに「変更された?」と確認することすらしないので、修正前のa.jpgを使いまわしてしまいます。

なので、修正する場合は、

  1. a.jpgを削除
  2. 修正後の画像の名前をb.jpgにして画像をアップ
  3. HTMLソースのほうも<img src="b.jpg">という風に修正する

という風にしないとキャッシュが破棄されません。

技術的な話

ここからは技術的な話になります。

 

以下にソースコードがあります(黄色で塗っている部分です)。

cocoon/browser-cache.conf at 6da2f6e9aebee9157f82d4da176708b672b1785e · yhira/cocoon

 

技術的にはApacheのmod_expires.cというモジュールを使って

  • Expiresヘッダ
  • Cache-Controlヘッダ

の2つを制御しているようです。

mod_expires – Apache HTTP サーバ バージョン 2.2

 

どちらも「いつまでキャッシュを使い回すか?」を設定するためのHTTPヘッダですが、Expiresは後方互換のために残されているらしいです。

 

おわり

Wordpress
スポンサーリンク
この記事を書いた人
penpen

1991生まれ。WEBエンジニア。

技術スタック:TypeScript/Next.js/Express/Docker/AWS

フォローする
フォローする
penpenメモ

コメント

タイトルとURLをコピーしました