0

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)

Hosted Asset Request

Network Request for Firebase Storage (cached)

Firebase Storage Request

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.

Chris Hamilton
  • 9,252
  • 1
  • 9
  • 26

1 Answers1

1

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.

RJC
  • 1,224
  • 2
  • 12
  • Awesome, thanks. I'll look into the caching metadata as well. When it comes to private images, is it not possible to cache these publicly on a client that's received them previously? I don't think a client should need to go through security rules at every request, but the caching metadata article says it only applies to publicly accessible objects. – Chris Hamilton Feb 23 '22 at 16:21
  • I suggest that you open another question for your concern. – RJC Feb 24 '22 at 05:17