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

score 42 · Accepted Answer · edited Apr 19 '20 at 20:01

42

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.

edited Apr 19 '20 at 20:01

Kols

3,641
2
34
42

answered Aug 08 '17 at 12:12

alfaiz momin

436
6
6

7

Just dropped this into my firebase.json and it moved that challenge from TODO to Already Done. Thanks. – Merovex Feb 08 '18 at 11:37
1

Note: the `cache-control` header for the 404 page will only apply to the `/404.html` URL. The `cache-control` header for your other static assets WILL be applied, even if it 404s. I've seen firebase send 404s for assets that *do* exist, and these 404 responses will get cached by the user's browser. – David Murdoch Mar 19 '18 at 19:44
Thank you. Just a few possible mods: Google fonts have URLs like `https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900`. And Font Awesome like `vendor/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0`. – Adam Bittlingmayer May 18 '18 at 15:43
Could also add `.svg` and video and audio file formats. – Adam Bittlingmayer May 18 '18 at 15:43
if you're caching your javascript/css files for 1 year, does that mean any changes wont be updated/reflected on your website for a year? – Max Oct 12 '20 at 12:56
The firebase CDN gets cleared on every deploy. But I Don´t know about the Browser cache... – Chris Feb 01 '21 at 12:31
@Max depends how the files are generated when building the app: a React app using CRA will generate a unique hash key for all static files on build e.g. `main.a57fg.js`. You can have an aggressive, long cache policy for these static files as any new builds will have a different hash key, so the browser treats them as different files. If the build was just generating the same file name everytime, like `main.js`, then yeah the browser would apply the same cache, and load the old file without the new updates – foakesm Jun 04 '21 at 09:38

How to Leverage Browser Caching in Firebase hosting

1 Answers1

Linked