Skip to content

High CPU usage on homepage #790

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
benlesh opened this issue Oct 21, 2019 · 8 comments
Closed

High CPU usage on homepage #790

benlesh opened this issue Oct 21, 2019 · 8 comments

Comments

@benlesh
Copy link

benlesh commented Oct 21, 2019

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
Copy link
Contributor

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
Copy link
Member

saihaj commented Sep 2, 2020

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
Copy link
Member

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

@IvanGoncharov
Copy link
Member

IvanGoncharov commented Sep 20, 2020

@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
Copy link

JanetLaysEggs commented Sep 26, 2020

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
Copy link
Member

ardatan commented Nov 10, 2020

Is this issue still relevant after Gatsby migration?

@saihaj
Copy link
Member

saihaj commented Nov 10, 2020

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

@Urigo
Copy link
Contributor

Urigo commented Mar 28, 2024

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

@Urigo Urigo closed this as completed Mar 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

8 participants