morkro
commented
4 years ago Yes, this is a major problem. I also have a lot of plants added and it slows down considerably. With v2 I am planning to address this and have made a few minor improvements overall but haven't found a good overall solution just yet. One of the problems is that I don't really know how to reduce a) network requests and b) speed them up.
The current flow for a) is as follows:
- Make a request to get a collection of all plants (and their IDs)
- Iterate over collection and make an additional request per plant to get the full data
- At the same time, another request to get the image URL per plant
A few ideas that come to mind:
- Store list of plants in localStorage, gets rid of first request (already done in v1, still not optimal as sync takes a while)
- Create additional thumbnails per plant (in Firebase via functions) to speed up load time on Home, only load high-resolution on detailed plant view
- Investigate if Firebase API could be used differently (e.g. queries)
- Look into different Firestore database pattern (e.g. optimised documents/collections)
Since v2 isn't released and finished yet, I want to fix this for the new release. Happy for any help on this :)
I have added a lot of plants to the app, 92 and still have to add some. But the app is extremely slow in the first load, up to a few minutes before the first image is shown. I already optimized this quite a lot by compressing all images (and creating thumbnails for the overview, and larger images for the detail pages), this saves both space and bandwith (feature 'request' 1).
The second problem is the large amount of request that are getting send to the firebase, for every plant 2 request are created. They are all executed before the first image is rendered. I don't have enough experience with firebase and/or vue.js to find the correct solution for this, but to me it seems that there must be a way to optimize this. By combining requests, or by using lazy-loading.
If you have any ideas on this, happy to help implement it