radio4000
radio4000 copied to clipboard
/channel.tracks is becoming really slow to load
What to do with channel.tracks on channels that have a lot of tracks?
These are taking way too much time to load.
https://radio4000.com/radio-tobha/tracks https://radio4000.com/oskar/tracks
We temporarily solved the problem by moving the channel landing page from the tracks list to a list of 10 latest track.
Notes:
- users want to see their list of tracks in its entirety, to search through, maybe scroll.
- 1000+ tracks are really hard to dig through
- I personally rarely scroll to "read my tracks".
Ideas:
- maybe we can use a search such as Algolia (but not Algolia as it is too expensive and we have too much content to apply to its free plan), for users who know what they are looking for in a channel. Yes we all use Ctrl-f, but that still require a full load of the page, and it does not work well on mobile.
- if there is a search, we could maybe replace the full track list with paginated one. By 100 (or x) tracks, or a monthly pagination.
- maybe we have to store data locally in the browser's cache.
Also, since it is a hard problem to solve, maybe it could lead to some paid plan feature.
Local data caching is a very nice idea. Imagine how fast it would be if nothing but the youtube video itself had to be fetched.
Also worth noting is the enormous speed difference between these two:
- https://radio4000.com/radio-tobha/tracks
- https://api.radio4000.com/embed?slug=radio-tobha
So there's definitely some improvement to be done on the Ember side. What makes it slow? The request? The emberfire adapter + ember data? Grouping by month? Rendering?
A little win is to add a channel/loading template. This way it transitions immediately when you click "tracks" and doesn't block the UI…
Of course need not to precise that I am for the simplest solution. Local caching could lead to tons of errors with data in two places.
I do not think the speed difference comes from grouping by month. Imo it comes from serializer + rendering
More evidence we need to do something: loading https://radio4000.com/oskar/tracks in my Chrome takes ~10 secs whereas my Firefox quantum consistently takes above 20 seconds. Something is going on.
Added ember g template channel/loading for starters. Doesn't solve the issue but it's nicer, no?
- https://radio4000.com/good-time-radio/tracks (loading.hbs)
- https://feature-channel-loading--radio4000.netlify.com/good-time-radio/tracks (loading+channel/loading.hbs)