How To Measure The Power Consumption of Your Frontend Application

Sara Bergman

The second principle of Sustainable Software Engineering is to build energy efficient applications. The very first step in that direction is to measure the energy your application consumes, also known as its energy cost. Once you measure or estimate the energy cost of your application, you can start to reason over how your application can become more energy efficient. Measuring your energy cost will also allow you to observe whether your changes are improving your energy cost over time. This approach leads us to the question, what is the best way to measure the energy consumption of your application?

This blog post focuses on measuring energy cost for applications running client-side on a computer, such as web-applications and native applications. This post does not cover native applications running on mobile devices such as phones and tablets. For more details on measuring the energy cost of server-side applications, see my previous post on the power consumption of backend services. My colleague Scott Chamberlin is writing a series of how to measure the energy and carbon impact of Windows client applications. The first post in Scott’s series is available here. This post is operating system agnostic and is primarily meant for front end applications.

Measure power consumption directly from the wall socket

Measuring power consumption directly from the wall socket is the same approach as for backend applications. Using a watt-hour meter, you can measure the total power consumption of your device, which helps you calculate energy cost. This will always be the best way to measure power consumption because it will measure exactly what your hardware consumes.

Using a watt-hour meter gives you the energy usage of the entire device, but with some planning, you can also use it to determine the approximate energy consumption of an application running on your device. However, this will work best for applications that consume a lot of system resources on the host and/or are long-running. For example, a program like Visual Studio is a good candidate, but a lightweight website will be tricker. Why is that? Well, there is a lot of noise when running a laptop or a cellphone – the operating system, background processes, the browser itself if you have a webpage, etc. All of these consume power as well and the noise will make it harder to determine the impact of your application, especially if your application consumes little system resources for a short amount of time.

If your application is a suitable candidate for this approach, here are a few considerations for using a watt-hour meter to measure the energy consumption of an application on your device:

1. Any hardware will consume power when idle. Consider this a baseline energy consumption. If you are interested in absolute numbers for your application, then you will need to measure the baseline consumption and then subtract it from the overall consumption measured when running the application.
2. Always start measuring from Steady State (SS). There will be a transient event, often an oscillation, observed as a sudden burst of energy when starting up any electrical component, so start measuring when you can observe SS.
3. If your device has a battery, it needs to be fully charged when measuring. Otherwise, you will end up measuring the power consumption of charging your battery, which can be interesting, but not what we are going for here.

Use tools to measure or estimate

What do we need to measure? On a device, the largest energy consumers are usually the screen, CPU, GPU, and memory. Estimating and measuring the impact of the CPU, GPU, and memory is relatively straight-forward. Measuring the energy consumption for a device’s screen is more challenging, because there are several types of screens and screen technologies available on the market. Varying screen types and technologies make it difficult to control for when measuring energy consumption.

Tools for measuring the energy consumption of software are usually specific to an operating system or application domain. I have identified a few examples, but this is not an exhaustive list. Some of the examples below are energy profilers, which analyze and estimate the energy consumption of the application running on your computer. This estimation is useful in identifying ways to reduce your applications energy consumption, but cannot be treated as exact values of energy consumption since they will vary between different computers running the same application. But for identifying areas where you can improve and track energy consumption over time, this is good enough!

• For Windows devices there are different options. I refer once again to my colleague Scott’s post. It is also possible to use the Windows task manager to find the utilization of different components, which can then be converted into energy (see my other blog post). There is a browser task manager for Edge that can be used similarly for web applications, it can be accessed by clicking Shift + Escape or under “More tools” in the browser menu.

• To measure the energy efficiency of an already deployed webpage, Green Spector can be used. It will test your webpage of an actual mobile device and give you a score between 0 and 100. This can be used in combination with above approaches used for other devices to get a more holistic overview.

• Lighthouse is an open-source application that can be used for assessing the quality of already deployed web pages. It is not optimized for looking at power consumption, but it tracks some things that have a strong correlation to power consumption. For example, the performance score looks at things like loading time, which will have a correlation to the network usages and GPU usage.

Take Action

Watch the talk ‘Building Green Progressive Web Apps’ at Green Conf 2020 by David Rousset, he shares a lot of his learning and useful tools.

Sara Bergman Software Engineer II, M365 Core People Services

Follow