Tips to make a sustainable website, Part 3: Energy efficiency & consumption

When talking about website sustainability, power efficiency is an important factor that we should keep front of mind.
There are multiple parts of a website that can influence power efficiency but not all are easy to manage, monitor, and measure. The most power-hungry elements of any website are the screen, networking, CPU, and GPU, and each should be monitored to ensure both efficiency and sustainability.

Screen

The power consumption caused by the screen is mostly in the hands of the user, and the amount of screen time they use, and how bright they have it. But we can play a small part in this by implementing a few conscious design choices, such as implementing a dark mode which can have a small but positive impact on the overall energy consumption by the screen ₁.

Networking

In our previous article, we focussed on the power consumption of data transfers and networking. In our conclusion of that article, we shared a few tips, such as reducing the number of requests (for example by placing all your SVG’s together in one sheet) and reducing the overall page weight to positively influence the energy consumption used by data transfers. For tips to reduce the overall page weight, you can also read the first article in this series, Size Matters, where we discussed solutions such as using system fonts, instead of external fonts.

CPU and GPU

That leaves us with the CPU and GPU, two more hardware-related components. To put it in the words of Benjamin Poulain and Simon Fraser: The system adapts the CPU and GPU performance based on the current tasks being processed, including, of course, rendering web pages that the user is interacting with in their web browser and other apps using web content. ₁

Poulain and Fraser indicate three states of interaction that should be kept in mind, with regards to managing CPU and GPU: 1 - actively interacting, 2- when the page is open and there’s no active interaction with it, and 3 - when the page is another tab/ hidden but not closed. All these states will (and should) have different levels of power consumption. When the user is actively interacting with your content, scrolling through the page, and creating changes in content, it is okay (and natural) to use more energy than when the page is idle or not being actively viewed. The logic and functionalities behind those interactive parts are your responsibility and can be managed with the environment in mind by making informed choices that influence the power efficiency, such as choosing a method to animate certain elements. ₁

Although big and complex animations usually result in more power usage, using a CSS animation of a property - other than optimised properties such as transform, opacity, and filter- can also cause a change of layout (reflow) and/or a repaint (changes to an element’s skin that changes visibly, but do not affect its layout), thus resulting in more energy being expended.

One tip that we can give is, to ask yourself the question if you actually need to use CSS or javascript to make the component functional? Perhaps using the designated HTML element could already do the trick! CSS Tricks has a great article about keeping power efficiency in mind when creating a website.

The process of monitoring, managing, and measuring a websites energy usage is still in its infancy, and in all honesty, there’s still a fair bit of work to be done in order to improve the accuracy of the outputs. But, in the meantime, there are already tools that can be used to help in the journey. One such tool that we’ve used to monitor the energy of our sustainable digital platform is the CPU timeline, part of the WebKit DevTools ₁. It gives us a detailed timeline of our energy efficiency, including the energy impact rating, main thread ₁, and the different sources calling and causing the energy usage.

The most important thing to keep in mind when thinking about power consumption is to make informed choices regarding the choice of HTML elements and animation on your site. Resort to CSS animation if it’s the transform, opacity, or filter property, and in the case that you need more control over the entire animation, then use to script-based animation.

We hope that you’ve found this article useful in your journey to reduce the carbon footprint of your website. If you’d like more tips, have a look at two other posts of this series: Size Matters and Tracking Tech. If you’ve been following our journey, you’ll know by now that we’re just at the beginning of our Sustainable Digital Design journey. Keep checking back regularly as we share more of our discoveries and creative solutions for sustainable digital design and development techniques.