GPU and CPU intensive animation on AI Help page and homepage

[Juraj-Masiar]

MDN URL

https://developer.mozilla.org/en-US/plus/ai-help

What specific section or headline is this issue about?

Header

What information was incorrect, unhelpful, or incomplete?

The nice rotating animation has a HUGE power impact on the host PC.
First, the GPU utilization is about 50%!

But what's worse, this is consuming CPU too, which then can't use power-saving 1.X GHz speed, but it's boosting to nearly maximum speed 5.X GHz speed.

What did you expect to see?

Static image would be OK

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

Same thing applies for the homepage: https://developer.mozilla.org/en-US/

But unlike homepage, this AI Help page can be potentially opened for a whole day, wasting A LOT of electricity.

[caugner]

Thank you for reporting this performance issue @Juraj-Masiar and sorry for taking so long to respond.

Can you tell me what browser(s) (including versions) you experienced the issue with? Are you still having the problem?

[Juraj-Masiar]

You can reproduce it it any browser, but in Firefox seems to be more power-hungry.
For example this is a comparison Firefox 119 (left) VS Chrome 117 (right):

(the red "R" shows when it's running)

Also the CPU usage in Chrome stays low - CPU speed goes mostly below 2GHz while in Firefox it says above 4GHz or even 5, especially when viewing the bigger one on the MDN homepage.

[Juraj-Masiar]

Just a quick update, I've used HWiNFO64 tool to measure "CPU Package Power" when using Firefox:
Idle static page - 5W
AI Help page - 22W
MDN homepage - 24W

That's pretty bad trade-off for an animation :)

[caugner]

FWIW This was reported before in #8621 and supposedly fixed in #8622.

@Synvox Would you have a chance to reproduce the issue?

[Juraj-Masiar]

I should also mention I'm using 165Hz screen so it's probably gonna be less on 60Hz screen (EDIT: nope, just tested, it's still 25W).
Maybe instead of optimizations you could just stop it after a while. Or use animation to slow it down to zero in 20 seconds.
Even few wasted watts is gonna be huge amount of electricity when you multiply it by the number of users that have it opened.

[Synvox]

@caugner I'm able to reproduce in MacOS's activity monitor. The change in #8622 reduces the CPU shown in the browser's performance monitor but the OS's activity monitor says the browser process is still pulling some energy.

Few things to consider:

1. If the svg isn't visible (above/below the fold) the cpu and gpu usage drop as expected.
2. If the tab isn't active the cpu and gpu usage drop as expected.

So it's not terrible but if this page is going to be active a lot, we may consider removing the animation or changing the way it steps through its loop.

Option 1: Make it static (as suggested).
Option 2: Making the animation powered by scroll timelines may be an interesting experiment. May be more fancy than simply removing it.
Option 3: See if there's a de-optimization that SVG is hitting. Its weird that the browser dev tools say it consumes 0.5% CPU but Activity Monitor says otherwise. We could also see if drawing the svg to a canvas and rotating that would help.