Improve Blog List User Performance/User experience

[andreituicu]

We received the following customer feedback

I noticed the blogs associated with author Abhi Rele populated very slowly on the page, to the point that I originally thought they were missing.

The problem is:

• We are progressively going through the index to look for blogs that match the author, but these could be very far in the past.
• Even though we chunk the rendering to 20 cards at a time, it could still be that an author only has blogs in 2017 and we need to keep downloading until we get there.
• This is not a problem after the index information gets cached in the CDN and in the local browser, but cold loads can show a load delay even of a few seconds
• The lighthouse score is 100, so any fix should still keep it
• Too small chunks could create a different user experience problem if we go that route

Possible solutions:

• Having a way to compute in xcel the list of blogs for others (ideal)
• Introducing a loading spinner to help with the user experience, but don't really fix the performance and might upset LHS which doesn't really like animations (might see it as CLS)
• Splitting the blogs sheet per language (blogs-en-US, blogs-en-UK, etc.) to make the search space smaller, but requires a bigger some refactoring, as there are multiple blocks using that sheet. The search space will keep growing as the new blogs are being published, but at a slower rate.
• Hybrid solution between everything above

[andreituicu]

Another possible optimisation is: We are using quite big break points for the images, because that is what is needed on the cards from the homepage/sidebar. These could be however parametrised, so we can use smaller images on the blog list cards, thus freeing bandwith to load bigger chunks of JSON info from the the index.

[andreituicu]

Actually, thinking about it, changing the size of chunks may not bring any benefits and might be even more harmful, because we use the same chunk size for all lookups for blogs (blog list, cards homepage, cards sidebars), which means we are maximising the requests that are being cached in the CDN and local browser. using different chunk sizes, will result in 2 distinct requests that are not cached.