CODEWITHSUNDEEP
reactjsfirebasereact-nativegoogle-cloud-firestorefirebase-storage
flaneurx
flaneurx

Reputation: 154

Firebase storage extremely slow fetching

I'm using Firebase on a React-Native app(expo), and I'm experiencing some performance problems (mostly with Firebase storage).

Whenever I fetch data for a post, for example, and want to display photos, I have to wait about 1.5-2s for photos(640x480) and 2.5-3.5s for videos(480p), if they are uploaded on apps firebase storage.

However, when I change the link in firestore field to an external link (same image - same resolution, but hosted on another host, not firebase storage) the images load instantly. So, from what I see, firestore works great, but firebase storage links load very slow.

Is there any way to increase performance of it? I don't think 1.5-2s for a 640x480 pic is ok

Upvotes: 3

Views: 2425

Answers (2)

Dharmaraj
Dharmaraj

Reputation: 50840

Firebase Storage is not a CDN so it may take a while if your bucket is located too far from you. I'm not sure sure about size of your 640x480 image but 1-2 seconds sounds pretty okayish. I tried downloading an image of 219,457 bytes first from my local computer and then from a VM instance (which has over 4000 Mbps download speed). It took just 0.5 seconds for the VM to download it (same region where the bucket is) but took my computer anywhere between 2-4 seconds.

Will hosting the app on firebase hosting solve this issue? I see firebase hosting distributes it to a global cdn

Firebase storage and hosting are 2 separate services. Hosting serves the website resources such as HTML, JS or any static file that you deploy using firebase deploy --only hosting command over CDN.

The best option would be to use a CDN with Firebase Storage. You can setup Google Cloud CDN with Storage bucket. I just compared download times from Firebase storage with and without CDN and here's the difference:

Without CDN:

enter image description here

With CDN:

enter image description here

Additionally, your CDN provider may keep serving cached version even if you have deleted images from Firebase storage so makes sure the provider has some sort of API to clear specific files from cache.

Edit:

Once the image is cached on edge, anyone will be able to access it without the ?token= parameter which defeats the purpose of having it and the security rules. Even though security rules just prevent random users from fetching the download URLs and not accessing the images if authorized users shared it with others, this may not be ideal in some cases.

One way around would be to use those tokens (UUID) as the image name (e.g. img_9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d.png) but you cannot revoke these unless you reupload the image (to rename the image with new token).

Upvotes: 5

swado tech
swado tech

Reputation: 1

I think you are trying to parse whole video at once this leads to downloading whole content and then loading . Try spliting your video using encoding techniques into small chunks(like youtube does it) and stream videos. https://cloud.google.com/solutions/media-entertainment this may help you

Upvotes: 0

Related Questions