Thinking About Power Usage and Websites

Gerry McGovern asked me if I had any insights on the energy consumption of the website. After all, he wrote a book about the impact of digital technology on the planet. He wanted to know the specific details of network technology, such as...

If you implement this function in HTML, it will consume 3 times the energy, but if you implement it in JavaScript, it will consume 10 × times the energy.

I think if you really look at it carefully and know how to measure it accurately, you can find an example like this. Suppose I want to move an element on the screen. If I write a setInterval loop in JavaScript, incrementing the left position relative to the positioning element once every millisecond, I'm 99% sure this is more power-consuming than changing the transform: translateX() value in the same time using the CSS @keyframes animation. In this example, we usually focus more on performance than energy consumption, but it is immediately interesting: Is good performance related to lower energy consumption? Very likely.

Researchers have studied this.

We found a statistically significant negative correlation (moderate to large effect sizes) between performance scores and energy consumption for mobile web applications, which means that increased performance scores often lead to reduced energy consumption.

They test mobile web apps using Lighthouse scores on Android. I guess this fits quite well with other platforms and other performance metrics.

I am glad that the current research results match my logically expected results. Things that lead to poor performance are often energy-consuming. Imagine the image. If you provide overly large or unoptimized images, your performance score will be degraded. Imagine the performance impact this has. There are two images on the server, one large and the other small. Which computer that is transmitted to the user needs to consume more power? The big one. Which one requires more processing power to parse and display? The big one. Which one takes up more memory (which also consumes power) during display on the screen? The big one.

The less network transmission, the less power consumption.

The less browser needs to do, the less power consumption.

Some ads that automatically refresh every few seconds? Not only is it annoying, it also wastes bandwidth, thus wastes electricity. Whenever you have to use polling (i.e., making network requests repeatedly) instead of event-based WebSockets? This is all consuming the power you probably don't need to consume.

We know CDNs can also improve performance. Files (such as images) do not need to be transferred across the globe, but rather come from a more geographically closer server, and this server is designed for this work. This is where things get a little blurry to me.

Goal with performance: Goal achievement. Have we achieved the goal of low energy consumption?

This study has been conducted, but unfortunately, I cannot get the conclusion from the abstract alone. In my opinion, servers around the world store copies of these resources. When the resource changes, it is not just a server updated, but servers around the world will update. In terms of savings achieved by saving request efficiency, a balance between propagation and duplicate storage must be achieved.

Speaking of storage efficiency, I'm sure that just storage stored on disk consumes much less power than files sent over the network - but it still has costs. Suppose you save a copy every time you change the file. Suppose you save a complete copy of the website every time you deploy it. Is it useful? certainly. Will this consume power? Will definitely. It is necessary to find a balance between the two.

However, Gerry is asking about specific technologies. Another big thing I can think of in the CSS realm: Dark Mode! Likewise, it has been studied. Dark mode saves power.

For a popular set of Android apps we tested, Dark Mode can indeed reduce display power consumption at full brightness by up to 58.5%! As far as the overall phone’s battery life is reduced, this means savings from 5.6% to 44.7% at full brightness and 1.8% to 23.5% at 38% brightness.

So what about the technology? I suspect it's more about what the technology (or language) is doing than the language itself. For example, I can use

Elements build a small area in HTML that can be opened and closed. Is this more energy-efficient than attaching a click handler to the button to switch areas of classes that visually turn on and off the elements? I'm a little skeptical. I bet the repaint/rerendering steps the browser is performing and the language behind it has less correlation with power consumption. However! If I have the browser download a 50 KB JavaScript library just to implement my small open/close element, then yes, this is really important and the JavaScript version is less efficient.

That way, just as good performance is often associated with lower energy consumption, I bet that following the minimum power consumption rules is often associated with lower energy consumption as well.

Tired of my guesses about things? It's understandable.

Jack Lenox’s article “How to Improve Website Performance to Help Save the Earth” explores this issue in more depth. He pointed out the website that can test your website. The website carbon emission calculator is an example, which points out:

Calculating the carbon emissions of a website is a challenge, but using five key data we can make pretty good estimates:

1. Online data transmission
2. Energy intensity of network data
3. Energy used in data centers
4. Carbon intensity of electricity
5. Website traffic

The test code is open source.

The above is the detailed content of Thinking About Power Usage and Websites. For more information, please follow other related articles on the PHP Chinese website!