Performance improvements Scores platform

[jonsnowpt]

🐛 Introduction:

We have two different issues that are affecting the platform's performance. One is related on the time it takes when you click to check the tournaments page or fixtures, it sometimes takes several seconds to see any response. As we discussed before, this may be related to how Svelte works but should be improved, the users have a bad experience with this approach since they do not understand if something is happening and leads to frustration and constant clicks.

The other issue is related to the performance when too many events are occurring, we can try to optimize the DB Indexes to get better responses.

📝 Details:

For SvelteKit a few tips:

To optimize the first response time on Sveltekit, you can follow these steps:

1. Use code-splitting only to load the necessary code for the initial page.
2. Minimize the size of the JavaScript and CSS files using tools like Rollup and PurgeCSS.
3. Compress your assets using gzip or brotli.

To optimize the indexes we have a few tips here:

https://hasura.io/learn/graphql/hasura-advanced/performance/3-analyze-query-plans/

We also have the cache TTL, but I believe that is already done for the used endpoints:

https://hasura.io/learn/graphql/hasura-advanced/performance/1-caching/

🔍 Steps to Reproduce:

Visiting the tournaments section and fixtures the first time to load is pretty clear; visiting on the weekend this slow response problem is even clear.

🤔 Expected Behavior:

We expect to click and have an immediate response from the platform.

💥 Actual Behavior:

We choose to visit a specific section and wait a few or several seconds to get some response from the platform.

💡 Additional Information:

After these optimizations, we are adding a new table for REDIS cache use on most of our sections to help get even better speeds.

[migbash]

NOTES

Initial decoupled navbar component from the actual page did not provide the powerful use of preloading data when switching between languages. Now, a $session.lang_intent variable is added, which uses the preloadData() method from sveltekit to preload a target translation page and its data. This method was then further enhanced in effectiveness by adding an on:mouseover event with a 250ms buffer and on:mouseout (clear) events, so that a target language page translation preload is triggered when user is hovering over an element and stops on it for 250ms - preventing constant preload triggers when user quickly simply hovers over available translations. This greatly increases the speed between translated pages and its preloading speed, cutting it into practically nothing.

TEST (DEV) => instantaenous

Splash screen does not even popup when changing translations

CURRENT (PROD)

Takes its time and is a bit slow, with the Splash screen visible.

---

In addition, instead of sequential (one-by-one) fetch's made in the load() (preload) of the page, which has to complete before accessing the page, the use of a Promise.all is integrated, to allow all heavy and critial data to be fetched at the same time in parallel, greatly increasing the speed of total wait time, slashing previous waiting times by x3.

TEST (DEV) (current-season) => /it/calcio/liverpool-everton-18535197

CURRENT (PROD) => /it/calcio/liverpool-everton-18535197

---

TEST (DEV) (non-current-season) => /football/southampton-rangers-wolves-sports-club-628410

CURRENT (PROD) => football/southampton-rangers-wolves-sports-club-628410

---

Note => this is only available on some platform pages - not all have been upgraded to Promise.all.

Note => this came with the:

• reduction of large static/assets files,
• as well other optimisation of some cache endpoints
• removing unnecessary queries, and bringing them all into one for the page,
• placing some queries into the load(), such as the GeoJs

This improvements has console.logs enabled. Real (PROD) is expected even faster loading speeds as server will not be over cluttered by logs.

---

IMPORTANT - some widgets are not using the preloading at all and need to be changed, such as: `Homepage (livescores), and tournaments page also.

---

More work is needed to bring all pages up to speed and test on its behaviour.

• layout (main)
• home - page
• fixtures-page
• tournament-page

[jonsnowpt]

@migbash

Should this go back to the Backlog for further improvements?

[migbash]

@jonsnowpt Yes, I will need this issue back again in the future, to continue. All possible improvements for now have been made and there's been quite a lot done.

[jonsnowpt]

This has been resolved.