Power measurements and CO2e estimates in Firefox Profiler

It's been a heck of a fortnight. Funerals, celebrations, booking our first overseas trip in years, and a lot happening on the work front too. I'm definitely looking forward to a few days of rest and relaxation when we're away in Germany in the middle of next month. I'll be there to meet up with The Green Web Foundation team. It's the first time I'll be meeting any of the people I've worked for the better part of a year with so that's bloody exciting.

This week will be a quick look at power usage profiling that's available in Firefox Dev Tools Profiler, and the accompanying CO2e measurements which I helped to get merged in.

Earlier this year, an update to the Firefox Dev Tools Profiler was merged into production (Jan. 10, 2023 - here's the PR). It includes a merge of some code I helped author which surfaced carbon emissions estimates for power measurements made using the profiler. You may remember me using a pre-release version of this when I audited the COP27 website last year.

Having code merged into a Mozilla project is wild. It's even cooler when it gets a shout out at FOSDEM.

What is the Firefox Profiler?

In a nutshell, the Firefox Profiler is a Developer Tool in the Firefox browser that can be used to capture a performance profile of browser usage. This profile contains extremely low-level detail on the processes and functions that were being run at the time it was capture, and is extremely useful for debugging performance issues, memory leaks, and much more.

Power measurements in Firefox Profiler

As of Firefox 104, the profiler has been able to capture power usage. About a month ago I had the pleasure of talking with Florian Quèze, one of the developers responsible for getting this feature into the Profiler. As you can imagine, capturing the power profile of a browser is no easy feat, and there's a bunch of important caveats to keep in mind if you do go ahead and use it.

  1. The power profile that is capture on Intel CPU devices is that of the entire system. That means if you've got a whole bunch of background apps running, their power usage will be captured too.
  • On AMD CPUs, you can get power profiles broken down per core, but again they capture entire system power draw.
  • On Apple Silicon CPUs, you can get a per process breakdown. This should allow you to isolate the power track for the browser window that is being captured.
  1. Capturing power profiles works well on Windows 11 and Apple Mac devices, but needs some manual steps to work on Linux. I've not yet managed to get it going on my Linux device.
  • It's currently not possible to capture the power profile of a mobile device.

CO2e estimates in the Firefox Profiler

The CO2e (carbon dioxide equivalent) emissions estimates that I helped add to the Profiler are pretty straight forward. It works by:

  1. Taking the power figures recorded by the profiler and converting them to kilowatt-hours.

  2. Multiplying this value by 442 g/kWh (the global average grid intensity in grams of one kilowatt-hour).

Ideally, we’d like to use region-specific figures for even greater detail. There’s been some conversation around this as part of the PR for this feature. I expect we'll be able to get something like this implemented sometime this year.

Recording a profiler

Another thing that came out of my chat with Florian, was that he recommended using the Profiler Toolbar Extension for Firefox when capturing power profiles. The reason, he said, was that they had put in a lot of work into making the extension consume as little power as possible so as not to impact the results of the recording. To add it to your Toolbar, go to https://profiler.firefox.com and click on the Enable Firefox Profiler Menu Button.

Screen capture showing how to add the Firefox Profiler to the browser taskbar.

Screen capture showing how to add the Firefox Profiler to the browser taskbar.

This gives you a one-click profiling option through the Firefox taskbar. Another way to capture a profile is through DevTools. In the browser, open up DevTools and navigate to the Performance tab. There, you’ll see a dropdown with different presets which you can use. There’ll be a Power option in that list. With that selected, you can start recording!

Screenshot from Firefox 106 DevTools, showing the Power preset selected in the Performance tab.

Screenshot from Firefox 106 DevTools, showing the Power preset selected in the Performance tab.

My recommendation

Given what I mentioned above about how the profiler captures power use of the entire system, it might make sense to run a clean profile first (with just Firefox open, no tabs open) to give you a comparison point when trying to examine how power hungry a page is.

Reading a profile

Depending on the system you’ve run the profile on, you’ll be presented with different Power tracks. In my examples, I’ve captured a profile on a Windows 11 Surface Pro 6 Laptop. This is an Intel powered device, and so I’m presented the with below four tracks:

  • Power: DRAM
  • Power: CPU package
  • Power: CPU cores
  • Power: iGPU

Screenshot showing Power tracks (rows) in the Firefox Profiler.

Screenshot showing Power tracks (rows) in the Firefox Profiler.

From what I understand now, to get the full power usage during the profile I’ve capture I would want to sum together the values for Power: DRAM and Power: CPU Cores. I can get these values by hovering over the respective tracks and noting the Energy use in the visible range value.

You’ll also notice the little CO2e value in parentheses after the power reading. You can use that for a ballpark carbon estimate, or you can get more precise if you want by converting the power measurement to kilowatts per hour, and then multiplying that by an appropriate grid carbon intensity figure.

Watt else could you do?

Get it. Watt. Power measurements. It’s been a long day, fam.

I don’t want to be a bad influence, and nerdsnipe folks into spending their weekends looking at power profiles. That said, I’ll just put a couple of ideas out there.

Since the profiler is capturing system level power consumption, you could feasibly:

  • Measure the power usage of desktop applications, or
  • Measure the power usage of the same web page across different browsers, or
  • Measure the power usage of a web page in dark & light mode

With all the other above, you’d want to capture a clean baseline of your system’s power usage before capturing a profile for whatever you’re testing.

Closing thoughts

This is super cool stuff, and exposes a lot of potential avenues for research and auditing. The impact of device usage is significant as a whole, even if the impact of individual devices is measured in milligrams. One only needs to look at Mozilla’s own greenhouse gas emissions findings.

Chart showing that 98% of Mozilla’s emissions in 2019 came from the use of their products.

Chart showing that 98% of Mozilla’s emissions in 2019 came from the use of their products.

The next issue of Optimised will be in your inbox on March 3rd. The website has an archive of all previous emails. It's a good place to recap on anything we've covered, and also handy to share with friends or colleagues. As always if you've got any feedback or specific topics you want to be covered then just reply to this email.

Keep safe, stay well.
Fershad.