search
HomeWeb Front-endCSS TutorialThinking About Power Usage and Websites

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!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
The Lost CSS Tricks of Cohost.orgThe Lost CSS Tricks of Cohost.orgApr 25, 2025 am 09:51 AM

In this post, Blackle Mori shows you a few of the hacks found while trying to push the limits of Cohost’s HTML support. Use these if you dare, lest you too get labelled a CSS criminal.

Next Level CSS Styling for CursorsNext Level CSS Styling for CursorsApr 23, 2025 am 11:04 AM

Custom cursors with CSS are great, but we can take things to the next level with JavaScript. Using JavaScript, we can transition between cursor states, place dynamic text within the cursor, apply complex animations, and apply filters.

Worlds Collide: Keyframe Collision Detection Using Style QueriesWorlds Collide: Keyframe Collision Detection Using Style QueriesApr 23, 2025 am 10:42 AM

Interactive CSS animations with elements ricocheting off each other seem more plausible in 2025. While it’s unnecessary to implement Pong in CSS, the increasing flexibility and power of CSS reinforce Lee's suspicion that one day it will be a

Using CSS backdrop-filter for UI EffectsUsing CSS backdrop-filter for UI EffectsApr 23, 2025 am 10:20 AM

Tips and tricks on utilizing the CSS backdrop-filter property to style user interfaces. You’ll learn how to layer backdrop filters among multiple elements, and integrate them with other CSS graphical effects to create elaborate designs.

SMIL on?SMIL on?Apr 23, 2025 am 09:57 AM

Well, it turns out that SVG's built-in animation features were never deprecated as planned. Sure, CSS and JavaScript are more than capable of carrying the load, but it's good to know that SMIL is not dead in the water as previously

'Pretty' is in the eye of the beholder'Pretty' is in the eye of the beholderApr 23, 2025 am 09:40 AM

Yay, let's jump for text-wrap: pretty landing in Safari Technology Preview! But beware that it's different from how it works in Chromium browsers.

CSS-Tricks Chronicles XLIIICSS-Tricks Chronicles XLIIIApr 23, 2025 am 09:35 AM

This CSS-Tricks update highlights significant progress in the Almanac, recent podcast appearances, a new CSS counters guide, and the addition of several new authors contributing valuable content.

Tailwind's @apply Feature is Better Than it SoundsTailwind's @apply Feature is Better Than it SoundsApr 23, 2025 am 09:23 AM

Most of the time, people showcase Tailwind's @apply feature with one of Tailwind's single-property utilities (which changes a single CSS declaration). When showcased this way, @apply doesn't sound promising at all. So obvio

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool