Digital Sustainability

Working prototype: Power Measurement Proxy

Schema describing how the different parts of the Power Measurement Proxy interact

Why a Power Measurement Proxy?

While there exist easy and accessible ways to estimate power consumption (and CO₂e emissions) for a webpage on the basis of server infrastructure, location and data transfer, assessing the power consumption of a webpage on the client (this means on the device somebody is using, e.g., a laptop or smartphone) requires more profound knowledge. This prototype aims to simplify this process by providing a proxy that measures power consumption on the client side while loading and using a webpage.

One way to measure the power consumption of a webpage would be to use Firefox`s Profiler which has a built-in functionality to measure power consumption. However, using the Firefox Profiler requires some technical knowledge and is not very accessible to everyone. Therefore, this prototype aims to provide a more user-friendly way for designers and developers building digital products.

The Goal

In my experience, designers and developers, when designing digital products and services, often don`t think about the impact of their designs on power consumption and therefore on the environment. But even if, it is pretty difficult to get feeling for the impact of different design changes. Some might know that the fewer data is transferred the better it is for the planet. For this (and more metrics) there is already a very good tool available: Website Carbon Calculator. But what it means for the energy consumption on the users device if one adds a loading animation, plays audio or has a moving background is very darn difficult to know. This is where this prototype steps in and helps designers and developers to get a feeling for how design changes impact energy consumption on the client.

Procedure

  1. The user navigates to the public web interface at measure.digital-sustainability.dev and enters a URL to measure the power consumption of it.
  2. The URL is then sent via a cloudflare tunnel to a M2 Mac Mini just used for that purpose.
  3. The Mac Mini runs a local process waiting for incoming requests. If a URL is received, the proxy automates opening up a firefox window with it`s extensive profiler, reading out the relevant values by making use of sitespeed—which is used for automation and collecting performance metrics—and especially browsertime.
  4. After collection the data is sent back to the web interface informing the user.

To collect the most accurate values, only one firefox instance is run at once and except from the running express server no other tasks should run. To do so, the express server queues incoming requests and only opens one at a time.

The open source code can be found at GitHub.

Links