Perf optimization on landing page

[Jarsen136]

Is your feature request related to a problem?

When I open the landing page and have not scroll down to see more content, I could see lots of request were sent and one of them take severals seconds. A lots of image were requested at the same time. Both of them would increase the response time.

Describe the solution you would like

1. merge some of graphql query request into one graphql
2. Avoid big query: write a resolver indexer side would help
3. cache: how about caching the data for Spotlight and top collectioin on localstorage.
4. lazy load image

Describe alternatives you have considered

Screenshots

Are there opened related issues?

#2816

[preschian]

to improve response time from graphql by using CDN #2743

need to consider upgrading our graphql client also to the latest version

• https://www.apollographql.com/docs/react/caching/cache-configuration/
• or, use this https://tanstack.com/query/latest/docs/vue/guides/caching

[yangwao]

• Integrate Nuxt Speedkit #5031

[roiLeo]

This is starting to be critical sometimes I can't manage to load landing page

[shashkovdanil]

👋

[kodabot]

ASSIGNED - @shashkovdanil 🔒 LOCKED -> Monday, November 13th 2023, 15:14:26 UTC -> 24 hours