search

Testausserveri / testausserveri.fi

🧪 Homepage for Testausserveri - community of young Finnish hackers
https://testausserveri.fi
MIT License
12 stars 20 forks source link

Bad time to interactive on projects page #81

Open KasperiP opened 1 year ago

KasperiP commented 1 year ago

There is very noticeable delay before you can interact with the site on projects page. This is mostly caused due QR-bike 3D model Javascript which blocks the main thread. For example for me its about 5 seconds before I can click any links on the page.

Google light house reports: image image

Without diving any diver to the cause of this issue and assuming it's the 3D model JS, getting the work from the main thread could solve the issue without removing the nice model. Partytown is one tool which could help by utilizing worker thread.

Esinko commented 1 year ago

This is a known issue. However, your issue displayes the true extent of it well and I think we should deal with it asap.

I haven't written any of the code for the 3D-element. However, after a quick read it seems we use something called Spline to display the 3D-content and fallback to an image on "mobile" devices. I am unsure if Partytown is a possible solution here, as we are talking about a React-component, please post examples of how we could utilize it here.

In my opinion, the best alternative here would be to somehow render the 3D-content in the background and display the "mobile" replacement image until the content has loaded. However, I have no idea how to achieve this. Perhaps @Eldemarkki could chime in?

Esinko commented 1 year ago

Your test seems to be accurate as well. I ran Lighthouse myself and the results differ only a tiny bit. I'm using a laptop with a Ryzen 7 4700U mobile CPU: image