Bad time to interactive on projects page

[KasperiP]

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:

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]

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]

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: