Reduce the energy consumption of your website

Website Power Consumption Trends

The Internet uses roughly that of the United Kingdom, one of the world’s largest economies. That is around 300 TWh/year. Internet growth trends indeed show that by 2030, it is estimated that the Internet will begin to use around 21% of the world’s electricity. Furthermore, I know that global communication technologies will be responsible for more carbon emissions in 2025 than any other country apart from China, India and the United States.

Font:

The impact of a website on the environment

While the overall trends are surprising, you may still be wondering: how much impact does a simple website have on the planet? In fact, there is a way to calculate this, as you can estimate the carbon footprint of a web page.

The tool offers a practical way to understand how your website works from a broader perspective. The carbon footprint of the website is quite simple. First, it checks how much data is being transferred over the cable when a web page is loaded and multiplies it by the . Subsequently, the one used by the data center is taken into consideration and the average carbon intensity of the electricity reported by the . Finally, putting all this information together gives an idea of ​​the emissions associated with an average user visiting any website, along with an estimate of total CO2 emissions annually.

To illustrate this explanation, here is the analytics comparison between two websites: , which enables millions of people around the world to unlock the power of the Internet by giving them tools to learn, create and grow online, and , the news site most visited in the world among traditional news publishers.

WebsiteCleaning overviewThis webpage is cleaner than 67% of webpages testedThis webpage is dirtier than 71% of webpages testedAmount of CO2 produced each time someone visits the website0.55g of CO21.70g of CO2Type of energy usedSustainable energySwamp standard energy, if this site used green hosting it would emit 9% less CO2Monthly views of a website to produce: +/- 1,000,000+/- 1,500,000,000CO2 equivalent in kilograms (during the year)6,550.67 kg – same weight as 43.67 sumo wrestlers and as much CO2 as boiling water for 887,624 cups of tea30,526,564.08 kg – same weight as 203,510.43 sumo wrestlers and as much CO2 as boiling water for 4,136,390,796 cups of teaNumber of trees needed to absorb the amount of carbon created by this website (over the year)2981.387.572Amount of energy used (during the year)15,217kWh of energy – enough electricity to drive an electric car 97,338km64,266,451kWh of energy – enough electricity to drive an electric car 411,205,284km

Looking at them from a broader perspective, these numbers are staggering: in this scenario, it would take more than 1.3 million trees to absorb the amount of carbon generated by BBC.com during the year. As web developers, we like to think about this every time we make website changes, as everyone has an impact on the planet.

Website Performance vs Power Consumption

Over the last decade, the average size of a website has increased fourfold. In 2010, it was 500KB, and this year, the average size of a website is 2MB. Considering how much the internet has exploded over the years and the number of websites that are currently online, a lot of data is being used. Furthermore, these numbers tend to continue to grow.

This number could have been even higher by now, were it not for initiatives like Google’s Lighthouse, PageSpeed ​​Insights, and more recently, the Core Web Vitals update being rolled out. By being strict with these guidelines, Google claims that if your website’s performance score is low, it will lower your website’s ranking. In general, this forces website developers and owners to take better care of their websites, which is beneficial for the entire internet ecosystem.

The correlation between performance scores and power consumption of mobile web applications is also found. Of the 100 most popular websites ranked by , 21 were randomly chosen and tested on a mobile device using the Google Chrome browser. The researchers turned off all background programs on the device and measured the device’s power to load a particular website. Each website was tested 25 times to analyze how long it takes to fully load the website, how many CPUs are required, and how much primary power consumption is until the website loads.

As stated in the research article, “Our results show a negative correlation difference between the performance score and the power consumption of a mobile web application. In general, we can say that performance analysis tools like Lighthouse can be used as proxies for energy consumption.”

Most of the low-performing websites use much more power than the medium-performing and well-performing ones. So literally, improving your performance scores will help save the planet.

How much energy does your website consume when people browse it?

Tools like Lighthouse or websitecarbon.com measure energy usage on the initial load of a website. However, that’s not where the story ends: people will start browsing. How can we measure that?

The Safari Timelines tool allows you to monitor what is happening on your website, all categorized into network requests, Design and renderingY JavaScript and Events, as well as how much CPU is used during each moment of your website’s lifecycle in the meantime. This tool is somewhat similar to the Google Performance and Firefox Performance tabs, but it allows you to monitor the performance of your website in real time. By comparison, with Google’s tool, you’d have to check it in and verify it later.

A simple countdown timer that calculates the time until July 5 is used to illustrate this example. When a timer ticks every second, three different tasks will be executed. The first is a JavaScript event that triggers the timer change. And then there are two layout events: one is an invalidation of the current layout and the second will paint the new number on the screen. All of this uses energy.

What happens if we decide to leave the timer bar open, go to Google.com, search for something, and come back? While we were doing this, some JavaScript events were running, as well as the repaint of the timer. So the CPU was still used. What can we do to avoid this, so that the website can be suspended while we are in the other tab?

How to save computing energy?

When running websites, we don’t need to constantly keep executing each piece of code. Taking a look at some examples of Countdown & Scrolling, we will provide you with several options to save power on your computer.

• Page Visibility API. By adding an event listener that listens for visibility changes on the website, we can ensure that our countdown code is only running when the page is in visibility mode. In this case, if the page is on the other non-visible tab, the code is not running. Once you return to the page and the countdown becomes visible, the code will start running again and the functions will be called every second. Checking visibility on web pages allows users to save power on the computer.

• Blur and focus events. Another useful way to save computer power is by adding event listeners for blur and focus events. By checking this for the website window, we can achieve a similar effect to the previous step. We need to run the countdown only when the page is in focus, this way when the page is in unfocused mode (running on the back, partially visible), the countdown doesn’t always need to run. This saves a lot of power when the user forgets about a window they had left open or leaves the computer on for a while with the page in blur mode. If this option is used, the page is left static, with no code being executed when it is not needed.

• Intersection Watcher API. Using scrolling is another valuable option. Suppose our goal is to check when a particular element on a website is visible or not during scrolling. This can be achieved with a simple scroll listener and visibility function. However, this way the function would be executed with every small scroll on the website. To avoid this, we could use the Intersection Observer API. By doing so, we could limit calls to Javascript code so that it is only called when a user scrolls to a specific place on the web page. An added benefit of this is that it only requires starting the Intersection observer element, and allows you to define a callback function, and the user tells the observer to observe the element. When the element is in view, a callback function is called,

How much does a real CPU cost?

The average consumption of the timer for 62 seconds is 0.4% and the electricity consumption is 60 watts when the CPU is at the maximum capacity of a MacBook Pro (2015).

When we take into account the kWh prices in Lithuania, having a simple countdown timer on your website could cost you 0.3 EUR per year. Sound like a theme scarce ? True, but then again, the simple timer is just a small drop in the ocean that is your website.

Sustainable Web Manifesto

Our goal was to show how much our online work impacts the environment and we suggested several tools that make it more efficient. However, to sum it all up, our most important point is: we must build more sustainable websites. He states that we all share and use the web, just as we all share and live on this planet. This manifesto is a public declaration of a shared commitment to create a sustainable Internet. It has six main rules:

• Cleansed. The services we provide and the services we use will be powered by renewable energy.
• Efficient. The products and services we provide will use as few energy and material resources as possible.
• Open. The products and services that…