Firebase Hosting Cache + Google PageSpeed Insights

Question

I'm hosting my static site on Firebase and I've included the headers key in my firebase.json file. Here's my complete config file:

{
   "hosting": {
      "public": ".",
      "ignore": ["firebase.json"],
      "headers": [{
         "source": "**/*.@(jpg|jpeg|gif|png)",
         "headers": [{
            "key": "Cache-Control",
            "value": "max-age=7200"
         }]
      }]
   }
}

When I run a PageSpeed test with Google's PageSpeed Insights tool, I get the message:

"Leverage browser caching"

Does this mean that Firebase hosting is not applying the headers I've specified in my project config file?

Leverage Browser Caching --- I don't think so have anything to do with your hosting. This message is displayed because your website is not allowing Browser Caching which is used in making your website faster. You can check the blogs on [PageSpeedOptimizer](https://pagespeedoptimizer.com/) for getting more insights. — Jaffer Wilson, Aug 13 '16 at 09:33
I believe you need the "headers" AFTER hosting as in this post: http://stackoverflow.com/a/39316199/5698848 — Ray C, May 14 '17 at 00:11

score -3 · Answer 1 · answered Oct 19 '16 at 15:14

It most probably you might be missing other extensions and file types. You can control the caching in Firebase by adding following code in firebase.json

"source" : "**/*.@(eot|otf|ttf|ttc|woff|font|css|jpg|jpeg|gif|png)",
"headers" : [ {
  "key" : "Access-Control-Allow-Origin",
  "value" : "*"
} ]

Reference : How to Enable Caching with Google Firebase Hosting?

Firebase Hosting Cache + Google PageSpeed Insights

1 Answers1