Google page speed low performance

houston we have a problem

I made rotating globe earth with three js for my web page top…when I run google page speed test it’s returning too long render error…now I removed all my other html elements…you can chek with this link;

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Felbielectric.com%2Fyeni%2Fglobe.php

Now it’s returning results but Minimize main-thread work audit values too high (category : other : 138.8s)

If I place my other design elements on my webpage, google page speed giving render error…then If I wanna see rotating earth I cannot use any other design elements on my page…

google has a problem with three js? (maybe because of marketing issues??) As you know they are supporting model-viewer…

Or…I have a problem with my rotating earth script? I used only three min js only to rotate it with simple code…

thanks

When you expand the Eliminate render-blocking resources menu you can see that main speed issues are connected to third-party libraries.

As Google’s note says - if you’d like that score to be high, consider first showing informational content (ie. text), then at the end of the document start loading fancy stuff. (Whether or not it makes sense to invest time into that is up to you - 3D pages, even these amazing like Pioneer, are simply more resource-demanding than usual text-based pages and they require a bit more time to show useful content to the user. Optimising that score may make you see a higher number, but at the same time also make the user experience actually worse.)

some questions!

1 - I have a problem with my rotating earth script at the end of the page? I think it is very simple and minimum script code to do it???

2 - when I run page speed again it is returning sometimes “Remove unused javascript” audit and listing three min js…is there any tool to customize my three js file for reduce file size according to my need (rotating sphere only)?

3- under Minimize main-thread work audit there is a category named Other and time spend about 133 ms…do you think three js affecting this time spend?

thanks…

  1. The script looks fine and minimal. One thing you could tweak is use MeshLambertMaterial or MeshPhongMaterial for rendering the globe. MeshStandardMaterial is an expensive material used for detailed PBR objects, and that globe doesn’t really seem to need that much detail.
  1. Afaik, three cannot be split / tree-shaken right now - unless you manage to untangle it all the interconnections between modules manually. Your best bet may be using that min.js file and server-side compression.
  1. Possible, three is quite calculation heavy (I’m not sure if lighthouse takes loading into account, but in case it does - three and 3D assets may cause issues.) You can measure what exactly takes how much time in devtools Performance panel.

thanks for your reply mjurczyk…it was usefull…I implemented your advice about material…I will work on my page and share all things if I get an error or something else…