Average CPU Usage and Energy Impact

Like main thread processing, we want to keep average CPU usage at a minimum because CPU usage directly influences energy impact. In other words, the higher the average CPU usage, the higher the energy consumption, which will result in faster draining of batteries.

How to check CPU usage and energy impact using Safari devtools

We can use Safari’s timeline feature to view the CPU usage and energy impact over a period of time. We’ll need to click on the “record” button on Safari’s devtools and trigger the animation in order to analyze it.

Note: Safari’s develop menu might be hidden by default, so if you don’t see a “Develop” option on your menu bar, you’ll have to go to “Preferences” > “Advanced” and check the option to Show Develop menu in menu bar

If you look at the image below, you can select individual sections from the timeline to view what’s happening within that time period. Clicking on the “CPU” option on the left will display some additional details about the main thread usage and its energy impact. These are properties that we want to keep at a minimum. For energy impact, we want the needle in the energy impact dial to fall closer to the left end towards the green (low) and keep the “average CPU usage at a low percentage.