Cache

なぜやるのか

PageSpeed Insight等で画像のキャッシュが効いてないと診断された

そもそもキャッシュの仕組みをあまり分かっていなかったため、まとめる

https://gyazo.com/a6237270b2894c56cf18f8013fcec059

キャッシュ

ネットワークを介したリソースの取得は速度が遅く、コストもかかります。ダウンロードにはクライアントとサーバーの間で複数回のラウンド トリップが必要となることがあり、処理が遅延しページ コンテンツの表示が妨げられます。また、訪問者のデータ費用も増大します。クライアントが以前に取得したレスポンスを再利用してよいかどうかやその有効期限を判断できるよう、すべてのサーバー レスポンスにキャッシュ ポリシーを指定することをおすすめします。

キャッシュ（これより下の分ではキャッシュはブラウザキャッシュを指す）は

ブラウザのキャッシュを無視してページを読み込みたい場合はスーパーリロードを使う(WindowsではCtrl + F5)

Cache設定方法

サーバーから返すHTTPレスポンスのヘッダで定義キャッシュの動作を定義すれば良い

キャッシュの動作を決める方法は複数ある。

優先度の高い順

Cache-Control ヘッダのmax-age

Expires ヘッダの値

Last-Modified ヘッダの値に基づいて計算される※詳細は下記をご覧ください

全て設定されていない場合は、7 日間キャッシュされる

PageSpeed Insight等では2つのどちらかが含まれていないと減点対象

HTML4.xではHTMLの<meta>タグでキャッシュを制御できていたが、HTML5で廃止された

確認方法

Chrome開発者ツールのNetworkタブでキャッシュを確認することが出来る

テーブルのヘッダーを右クリック→Response-Header → Cache-Controlでテーブルの項目を追加

https://gyazo.com/389814227e467d9fa7638036b0fe480c

個別のレスポンスを見ても確認可能

https://gyazo.com/0ba176878750bdbe96906e468fde3d62

頻繁に更新されないものは、最低1週間～最長1年の間でキャッシュ期間を設定すると良い

Hosting/Storage

Hosting/Storageサービスにはキャッシュ動作を決める方法がほぼ必ずある。デフォルトでも決まっていることも多いが、自分で細かい設定したほうが良い

参考