7

I've been trying to optimize my webpage using lighthouse report.

one of the performance diagnostics says to increase caching lifetime for my static files.

The files indicated in report are main.js, polyfills.js, runtime.js and styles.css. from what I understand these are main blocks of my webpage. I was thinking to increase cache using angular service worker. But I couldn't find any way to do so.

The closest thing I found to increasing cache time is angular service worker data groups. Datagroups supports cache config.

cacheConfig: {
    maxSize: number;
    maxAge: string;
    timeout?: string;
    strategy?: 'freshness' | 'performance';
  };

but I couldn't figure out how to do same for AssetGroups. As I understand the js and css files belong to AssetGroups.

Here is the lighthouse report screenshot.

enter image description here

my webpage that I'm working is margvel.com I have the code on github.

I am also using firebase for hosting. Do I have, or can I change the caching policy on firebase?

How do I increase the cache lifetime on these files?

Akj
  • 7,038
  • 3
  • 28
  • 40
GreedyAi
  • 2,709
  • 4
  • 29
  • 55

1 Answers1

0

You need to convey to the browser that it can cache the static files it has received and return them from the browser cache instead of revisiting the server for subsequent requests unless certain conditions are satisfied. The way you convey this is by sending certain response http header(s) with the cacheable files that your server sends to the browser. The cache-control header is the one that you are looking for in this case. Since you are working with firebase hosting you to have configure it such that when firebase serves your files it will send the headers you need with relevant files. Refer this and add the cache-control header to the firebase.json file in your project, configure the header's directives to your liking or use-case.

Refer this as an example to set the sources field, refer this as an example to set the cache-control directives.

jay
  • 13
  • 2