ブラウザのキャッシュを活用する

GoogleのPageSpeed Insightの適用可能な最適化に「ブラウザのキャッシュを活用する」という項目に対応する方法をメモ。

<Files ~ ".(gif|jpe?g|png|svg|ico|otf|ttf|eot|woff)$">
Header set Cache-Control "max-age=2592000, public"
</Files>

<Files ~ ".(css|js|html|gz)$">
Header set Cache-Control "max-age=604800, public"
</Files>

Cache-Control max-age

最低7日間(604,800秒)以上にしないといけないようです。画像やWebフォント系は変更はそうそうないので、30日間に設定。CSS/HTML/JavaScriptファイルは、最低の7日間で設定しました。gz拡張子は、出力しているサイトマップ(sitemap.xml)がgz形式で圧縮したものなので、この拡張子にも有効期限をつけました。

publicパラメータ

publicパラメータ以外に以下のものがあります。

Cache-Control用途
public全てのユーザーにキャッシュします。
private特定のユーザーのみにキャッシュします。個人情報を含んだようなものなどかな?若干怖くて使えない。
no-storeキャッシュに記憶しないようにします。
no-cache一度キャッシュに記録されたコンテンツが現在でも有効かどうかWebサーバに問い合わせて確認しない限り再利用してはいけないようにします。
must-revalidateキャッシュに記録されているコンテンツが現在も有効であるか否かをWebサーバに問い合わせを行います。

何も指定しなければpublicがデフォルト?なんだと思います。

ヘッダー情報の確認

ファイルのヘッダー情報をデベロッパーツールなどで見て確認します。以下のようになっていればOK。

Cache-Controlが設定されたヘッダー情報

参考サイト

IPAセキュアプログラミング講座:第5章 暴露対策 プロキシキャッシュ対策
https://www.ipa.go.jp/security/awareness/vendor/programmingv2/contents/405.html
Apache HTTP Server Tutorial: .htaccess files
https://httpd.apache.org/docs/2.4/en/howto/htaccess.html