hiko1129's note

GatsbyJS + Firebase HostingでPerformanceを100にしたときのCache-Controlの設定

2019/08/13

一応「GatsbyJSのStarter Blogを使用してブログを作った際に変更した箇所についての備忘録」の続きになってます。

GatsbyJSでブログを作成したあとそのままだと、おそらくChromeのaudits(Lighthouse)で計測するとServe static assets with an efficient cache policyと怒られます。(自分は怒られましたし、通常何も設定してない場合は怒られると思います)

これは、Serve static assets with an efficient cache policyのLearn Moreの飛び先に書いてあるUses inefficient cache policy on static assetsの通り、Cache-Controlがちゃんと設定されてなくて非効率なキャッシュポリシーになっているから、効率的なキャッシュポリシーにしなよーって話です。

Uses inefficient cache policy on static assets の推奨には、不変の静的アセットは下記のように長期間キャッシュするようにと書いてあります。

Cache-Control: max-age=31557600

ただGatsbyJSについて知らなければGatsbyJSにおける不変の静的アセットってどれってなるかと思います。少なくとも自分はそうなりました。
* 一般的にビルド時に「ファイル名-ハッシュ値.拡張子」の形式になっているけど、なってないやつもいるし…って考えてました。

幸いGatsbyJSのCaching Static SitesにCache-controlをどのように設定すればよいか書いてあります。なのでそれに従いました。

自分がそれに従って書いたFirebase Hostingの設定は下記になります。
強調表示してあるheadersの部分が該当部分です。

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "headers": [{      "source": "/page-data/**",      "headers": [{        "key": "Cache-Control",        "value": "public, max-age=0, must-revalidate"      }]    },    {      "source": "**/*.@(html)",      "headers": [{        "key": "Cache-Control",        "value": "public, max-age=0, must-revalidate"      }]    },    {      "source": "static/**",      "headers": [{        "key": "Cache-Control",        "value": "public, max-age=31536000, immutable"      }]    },    {      "source": "**/*.@(js)",      "headers": [{        "key": "Cache-Control",        "value": "public, max-age=31536000, immutable"      }]    },    {      "source": "**/*.@(css)",      "headers": [{        "key": "Cache-Control",        "value": "public, max-age=31536000, immutable"      }]    },    {      "source": "/sw.js",      "headers": [{        "key": "Cache-Control",        "value": "public, max-age=0, must-revalidate"      }]    }]  }
}

hiko1129

hiko1129
Twitter GitHub Qiita Qrunch Blog