How to Leverage Browser Caching in Firebase hosting

Question

I have hosted my personal blog on Google's firebase. My Blog is based on jekyll. Firebase provides firebase.json file from where owner of project can modify the http header.

I have my css files https://blogprime.com/assets/css/init.css and my fonts in https://blogprime.com/assets/font/fontname.woff ( http cache control not working )

My images are stored inside :: https://blogprime.com/assets/img/imagename.entension ( http cache control working ).

Even though both images and css, fonts are two dir deep from root.

Now heres my .json file code..

{"hosting":      {"public": "public",     "headers": [         {"source" : "**/*.@(eot|otf|ttf|ttc|woff|css)",         "headers" : [             {"key" : "Access-Control-Allow-Origin",             "value" : "*"}]         },          {"source" : "**/*.@(jpg|jpeg|gif|png)",         "headers" : [             {"key" : "Cache-Control",             "value" : "max-age=30672000"             }]         },          {"source" : "404.html",         "headers" : [             {"key" : "Cache-Control",             "value" : "max-age=300"             }]         }]     } } 

Before adding this my images and everything had 1hour of cache lifespan.... but now only my css files along with font files are having 1 hour cache lifespan.

Can you please tell me how to fix the "Leverage Browser Caching" for my css files. I think their's some problem with the directory link structure which I have "source" : "/*.@(eot|otf|ttf|ttc|woff|css)",**. I really don't know how to fix it.

You can check the Google pagespeed test ..

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fblogprime.com%2Fwordpress%2Fdns-prefetch-in-wordpress.html

Answer 1

I just make my portfolio website 99/100.

Google says:

We recommend a minimum cache time of one week and preferably up to one year for static assets.

    "headers": [ {       "source" : "**/*.@(eot|otf|ttf|ttc|woff|font.css)",       "headers" : [ {         "key" : "Access-Control-Allow-Origin",         "value" : "*"       } ]     }, {       "source" : "**/*.@(js|css)",       "headers" : [ {         "key" : "Cache-Control",         "value" : "max-age=604800"       } ]     }, {       "source" : "**/*.@(jpg|jpeg|gif|png)",       "headers" : [ {         "key" : "Cache-Control",         "value" : "max-age=604800"       } ]     }, {       // Sets the cache header for 404 pages to cache for 5 minutes       "source" : "404.html",       "headers" : [ {         "key" : "Cache-Control",         "value" : "max-age=300"       } ]     } ] 

Use this, it works for me.