I was experimenting with getting images from Firebase Storage as opposed to hosting them as an asset alongside my Angular project. I am hosting the project with Firebase as well.

I found that after an image is cached, it still takes upwards of 400 ms to load an image that was previously retrieved from Firebase Storage. Whereas a cached image that was hosted alongside the website takes around 10 ms.

I was under the impression that cached images were saved locally on the client, so why the huge difference in loading times?

Image is a 240 KB jpeg.

Network request for hosted asset (cached)

Network Request for Firebase Storage (cached)

I've read this question: Firebase Storage very slow compared to Firebase Hosting

But my question is in regards to image caching, so I didn't think the CDN would help anything.

I have solved this issue by making the image public following these instructions: https://cloud.google.com/storage/docs/access-control/making-data-public the cached image now loads in about 15 ms.

I'd still like to know why a cached image would take 400 ms to load, I think there is something I don't understand about caching.

CodePudding user response：

It is expected that it is longer for Firebase Storage because the Firebase access is doing more work, and it does an authorization check to make sure that it has a token that proves the access was allowed by the Security Rules. Additionally, you can check on Caching data using the Cache-Control that.

Regarding to:

I have solved this issue by making the image public...

It's documented here, publicly cacheable objects can do better in terms of the performance.

Additionally, the extra time also depends on what region the user is in. One thing you can also do is to raise a ticket with the Firebase Support so they can further check if the particular request are coming into a region that is particularly slow.