Leverage browser caching - Firebase/Angular 5

Question

I ran my Angular 5 site through Google's PageSpeed Insights, and it barked about leveraging browser caching, listing the following files:

https://use.typekit.net/####.css (10 minutes)
https://www.googletagmanager.com/gtm.js?id=GTM-#### (15 minutes)
https://####.firebaseapp.com/assets/svgs/###.svg (60 
minutes)

Here is how my firebase.json file in formatted:

    {
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "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|svg)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=604800"
          }
        ]
      },
      {
        "source": "404.html",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=300"
          }
        ]
      }
    ]
  },
  "functions": {
    "predeploy": [
      "npm --prefix $RESOURCE_DIR run lint"
    ],
    "source": "functions"
  }
}

Most of that code is based on the following post: How to Leverage Browser Caching in Firebase hosting

However, it doesn't seem to be working. I'm still getting the same error when I rerun PageSpeed Insights. How do I solve this issue? I'm very new with Angular, so a specific answer would be appreciated. Thanks in advance!

Answer 1

There are 2 solutions

1. Serve the external files from your domain.

Download the below 3 files and serve them from your own application. This way you can control the cache times. Make sure to keep an updated copy of 3rd party css and js when they update.

https://use.typekit.net/####.css (10 minutes) .  
https://www.googletagmanager.com/gtm.js?id=GTM-#### (15 minutes) .   
https://####.firebaseapp.com/assets/svgs/###.svg (60 
minutes)

2. Hack fix for Google Speed test

Do understand the Google speed test is just a recommendation and you need not follow it strictly. Some other tool like https://www.webpagetest.org/ may give you better results. However, you can use the below hack to include the affected css and js dynamically if the browser agent is not Google Speed Insight. For Google speedtest, the affected resource don't load, thereby getting a better score in speed test.

<script>
if (navigator.userAgent.indexOf("Speed Insights")==-1) {
...
...
</script>

Answer 2

You can safely ignore those 3 suggestions from Google PageSpeed (and lightouse ... and similar tools).

Infact there is some irony on the fact that many files served from a Google CDN (fonts for example) throw that error - or similar errors - in Google PageSpeed and other tools (like Lighthouse).

Of course I think Google should make something about those tools, they should take into account that.

Google PageSpeed is not about coming first in a kind of race or making 100 in points ... is just a general (and basic) indicator of how we are doing. Sometimes it signals a problem you do not have, sometimes doesn't signal a problem you have.

The problem is when a SEO "specialist" comes to you with the result of those checks (I think many developers can relate to that ...).

Please Google do something about that!