Bloated Cache Storage... How to inspect or browse the "Cache Storage" generated by service workers?

71 views Asked by At

We are currently working with an agency that have built our new eCommerce website in PWA on the mobify platform.

Our site performance is currently bad and i was brought into the project to help as a Product Owner.

I have noticed that the cache storage gets bloated pretty quickly. After navigating the website for a couple of minutes, my cache storage can reach up to 3GB and the site becomes very unresponsive.

What i don't find normal is that our cache gets up to 500mb after a page load...

How would I be able to inspect or browse the cache storage to pinpoint what would cause the cache to be so bloated?

I haven't work on react/pwa before, it's all new to me for the moment.

Any pointers on this would be very much appreciated!

Cheers! John

Cache Storage

1

There are 1 answers

0
abraham On

Open the "Cache Storage" menu and you can select the different caches to see what's being stored.

Screenshot of Chrome DevTools showing "cache storage' menu