Firebase HostingでCache-Controlヘッダーを設定する
このブログをPWA対応したのに合わせて、Lighthouseでサイトのパフォーマンスについて調べてみた。
最初Performanceの項目が82点だったので対応方法の解説を見ていたところ、jsとcssのキャッシュ時間が1時間になっているので修正せよと書かれていた。
FirebaseHostingの設定はいじっていなかったので、デフォルトで1時間が設定されていた模様。
そこで、[[firebase.json]]にheadersを追加して、jsとcssのキャッシュ時間を1年に設定した。
{
"hosting": {
"public": "dist",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source": "**/*.@(js|css)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=31536000"
}
]
}
]
}
}Gridsomeはビルド時にハッシュ値をつけてくれるようになっているので、長期間キャッシュする設定を入れても古いキャッシュが参照され続けてしまう問題は発生しない。
この対応を入れたところPerformance項目が92点になったのでひとまずはOKとする。