ブラウザからキャッシュヒットしているか確認する

クラウドインテグレーション部の柳田です。

CloudFront 利用時に、キャッシュヒットしているか/どのくらいの時間キャッシュされているかを確認する方法について調べる機会があったため、本記事にまとめました。

概要

キャッシュの確認をするときに確認する HTTP ヘッダー
- x-cache
- age
キャッシュの設定で利用する HTTP ヘッダー
- Cache-Control
- Expires

ブラウザから確認する

本記事では、みんな大好き Google Chrome デベロッパーツールを使って確認します

Google Chrome デベロッパーツールを開きます。
「Network」タブを開くと、現在表示している Web ページで読み込んでいるファイル達とそのサイズや読み込みにかかった時間等が表示されます。

f:id:swx-yanagita:20200924143818p:plain

青枠部分の「(disk cache)」「(memory cache)」は Chrome ブラウザのディスクキャッシュやメモリキャッシュから表示しているものになります。
CDN のキャッシュを利用しているか確認する際には、ブラウザキャッシュがあると少々確認しづらい場合もあります。今回は、デベロッパーツールを開いている間はブラウザキャッシュをしないようにします。
「Disable cache」をチェックしてブラウザを更新します。

f:id:swx-yanagita:20200924144232p:plain

「(disk cache)」「(memory cache)」がなくなりましたね！

Name からファイル名を選択すると以下のように Headers 等の詳細情報が確認できます。
今回キャッシュ設定について確認していくため、「Headers」タブを開きましょう。

f:id:swx-yanagita:20200924144328p:plain

赤枠部分に age:31 と x-cache:Hit from cloudfront がありますね。
この2つの設定から、このファイルは CloudFront のキャッシュから取得されたということと、キャッシュされてから 31秒 のキャッシュしたてのファイルということが分かります。

HTTP ヘッダーについて

ブラウザから確認する方法が分かったところで、キャッシュ設定でざっくりおさえておくとよいヘッダーをまとめてみました。

キャッシュの確認をするときにみる

x-cache
キャッシュヒットしたかどうかを判断できます。
CloudFront 利用時に設定される値は以下です。


Hit from cloudfront	キャッシュヒット。CloudFront から取得。
RefreshHit from cloudfront	CloudFront にキャッシュはあったが、キャッシュ保持期間切れのため、オリジンから再取得。
Miss from cloudfront	キャッシュミス。CloudFront にキャッシュがないため、オリジンから取得。

age
キャッシュされてからの経過時間です。単位は秒です。

キャッシュの設定で利用する

CloudFront やブラウザ側でどのくらいキャッシュさせるか/そもそもキャッシュさせないか等を設定できます。

Cache-Control
キャッシュ有無やキャッシュ期間など細かに設定ができます。
設定値がたくさんあるため、詳細はこちらをご確認ください。

いくつかの設定値について以下に書きます。


max-age=[seconds]	キャッシュを有効とみなす時間を指定。3600 を指定すると 3600 秒＝ 1 時間がキャッシュ保持期間となります。
no-cache	CloudFront やブラウザにキャッシュします。しかしキャッシュした内容が有効か否かオリジンに問い合わせて検証します。検証結果が有効な場合はキャッシュから取得します。
no-store	どこにもキャッシュしません。毎回オリジンから取得します。