High CPU usage on homepage

[benlesh]

I left https://graphql.org/ open on another screen and noticed my MBP's fan spin up. I was curious to see what what eating my CPU, and when I looked it was Google Chrome Renderer. Upon checking the Chrome Task Manager, I found that the site was using 30-40% CPU, which seems excessive. When I dug in, it looks like there are just some JS animations that are eating most of the CPU. Looking at the animations, it seems like they could all just be CSS animations and that would help the page perform better, overall.

Just wanted to bring it to your attention. Otherwise, it's a great site.

[elit-altum]

Hey @benlesh !
Thank you for bringing this up. Could you elaborate upon which particular animations you found were causing this issue, so I can work around it ?
Any help from your side would be really useful. Thank You!

[saihaj]

If we are going to keep the animations same in new iterations (when Gatsby site is in prod) I suggest that we solve this since it fixes one of the issues mentioned in #896 @IvanGoncharov @carolstran

[carolstran]

Yup totally agree @saihaj and thank you @benlesh for flagging this!

[IvanGoncharov]

@saihaj @carolstran I personally experience this bug from time to time and it drives me crazy so definitely something we should address 👍

If someone wants to work on this please claim this issue in the comments.

[JanetLaysEggs]

Well one solution (may seem a bit naff) is to cheat and use event driven images, gifs, and videos for the animations (as lovely as the JS animations are) instead as they should be less CPU intensive? Websites like apple.com and tunnelbear.com do it all the time. A really good use case of this would be the text going forwards and back between the colourful servers and the phone on the main page as currently a lot of text is having to bounce up and down the page with lots of colour changes.

However there is an argument in how long the viewers are actually on the main page where the animations live... I doubt normal viewers checking out what GraphQL is etc are going to hang around on the index page for more than 10-20 seconds - after which the new pages they navigate to will load and they won't experience the effects of the large CPU usage like the whirring of fans.

(wrote this at midnight so apologies for any grammatical errors)

-J

[ardatan]

Is this issue still relevant after Gatsby migration?

[saihaj]

Yes it is still relevant after the migration since the issue is caused because they are JS based animations

[Urigo]

This should be solved now thanks to @dimaMachina's refactor of using Nextra
Please reopen in case that's not the case