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.