The net is not a “clean thing”. Every page view consumes resources. In terms of sustainability, web development can also contribute to a lower ecological impact. The web is currently unsustainable, but we have many opportunities to improve the way we create digital services. All people working in the tech industry can do something – and we need to. It doesn’t have to be just an added burden, but rather can be a challenge to how we think about accessibility, personal data, and fair business models. The ecological footprint of the digital world seems intangible to most. Even if we find it hard to imagine in our clean office, the Internet is a pretty dirty business: our digital systems generate more emissions than the aviation industry. According to a study by the GreenIT Group 1, this current annual footprint results from:
- 6,800 TWh of primary energy
- 1,400 million t of greenhouse gases
- 7.8 million m³ fresh water
- 22 million t antimony
Based on these figures, the contribution of the digital world to humanity’s footprint is as follows:
- 4.2 % of primary energy consumption
- 3.8 % of greenhouse gas emissions
- 0.2 % of water consumption
Most of the web’s CO₂ emissions are caused by electricity consumption. In fact, when you add it all up, the Internet consumes about as much electricity as the UK – one of the largest economies in the world. As we use more and more data in our daily lives, the power consumption of the Internet is increasing rapidly. It may be out of sight and out of mind, but this enormous power consumption of the Internet has a huge CO₂ footprint. But it doesn’t have to stay that way – which is why I asked myself the question: How can design and web development help make the web more energy efficient? This article aims to answer just that, offering a handy list of the most important things you can do to minimize energy waste and ensure that the websites you produce are as energy efficient as possible. Furthermore, almost everything listed here to make a website more energy efficient also improves performance and user experience!
General principles for good power consumption
What consumes electricity? Most of the energy on mobile devices is consumed by a few main components:
- CPU (main processor)
- GPU (graphics processor)
- Networks (WLAN and cellular chips)
- Screen
The system adjusts the CPU and GPU performance based on the tasks currently being processed, including, of course, the rendering of websites that users interact with in the browser and other applications that use web content. This is done by turning some components on or off and by changing their clock frequency. Roughly speaking, the more power demanded from the chips, the lower their energy efficiency. The hardware can be ramped up to high performance for a short time (albeit with high electricity costs) and then quickly switched back to a more efficient state with lower power consumption.
Improve website energy consumption
1. design & contents
When we talk about the energy efficiency of websites, it is easy to assume that it is a purely technical issue. However, efficiency can be improved before we even create a website. Design and content have a big impact on energy efficiency and the following are key areas to think about.
1.1 SEO
Search engine optimization (SEO) may seem at first glance to have nothing to do with website efficiency, but in practice the goals of SEO are inherently linked to the goal of reducing energy consumption. When we optimize a website for search engine rankings, we help people find the information they need quickly and easily. When SEO is successful, it results in people spending less time searching the Internet for information and visiting fewer sites that do not meet their needs. This means that less energy is consumed and the energy that is consumed is used to deliver real value to users.
1.2 Writing texts
Similar to search engine optimization, copywriting has an impact on the efficiency of a website as it influences the time people spend on a website. Sometimes we want people to spend a lot of time on a website and immerse themselves in our content. What we don’t want is for users to waste their time digging through content that offers them little or no benefit. Therefore, clear and efficient copywriting can help to reduce wasted time on the Internet and therefore also wasted energy.
1.3 Choose fonts carefully
Web fonts can improve the visual appeal of websites, but can also mean significant loading times. A single font file can be up to 250 kilobytes in size. If then another font style such as “Bold” is desired, this can mean another 250 KB! To reduce the impact on custom web fonts, designers can consider the following options:
- Use system fonts if possible! They are not always so pretty, but fonts such as Arial and Times New Roman can be used without having to load font files at all, as they are already available on the end device.
- Use fewer font variations! You may feel the need to use custom web fonts, but try to be sparing with the number of fonts and different weights.
1.4 User experience (UX)
One of the core elements of a good user experience (UX) is the reduction of friction losses in the user journey. We want people to be able to find the things they want and perform the actions they need to perform in the most efficient way possible. A good user experience makes using the web easier for everyone, more enjoyable, and in turn reduces the energy wasted on navigating pages. If we mentally take longer time to decode the page, we automatically consume more energy on the page. Good user guidance reduces this “decoding time” and thus energy consumption.
1.5 Reduce images
On most websites, images make up the largest share of the website download. The more images are used and the larger these image files are, the more data must be transferred and the more energy is consumed. Regardless of all technical optimizations, content creators should think carefully about the use of images.
- Does the image have real added value for users?
- Does it convey useful information?
- Could the same effect be achieved if the image was smaller?
- Can we reduce images that are not visible to users, e.g. in carousels?
- Could you achieve the same effect with a vector graphic (or even a CSS style) instead of a photo?
Asking yourself these questions and trying to keep the images as minimal as possible without compromising user-friendliness will keep energy consumption low.
1.6 Reduce videos
Although less common than images, videos are becoming increasingly popular as a content format on the web and are by far the most data and processing intensive form of content. As with pictures, you should ask yourself if videos are really necessary. If this is the case, check if you can reduce the amount of streamed videos by removing autoplay videos and keeping video content short. A website that plays videos can be one or even two orders of magnitude larger than a website without videos in terms of page weight. It generates a much higher load on the client’s CPU, which leads to considerably higher energy consumption.
1.7 Use dark mode
Dark websites were one of the first techniques popularized many years ago for saving energy on websites. It disappeared with the advent of LCD screens, which, unlike CRT screens, had a permanent backlight and consumed the same energy regardless of the color actually visible on the screen. There is a large number of e.g. addons for browsers that enable the “Dark Mode” i.e. the inversion of the light colors of a web page into dark colors. Dark Mode is standard in many system settings today. However, with the advent of OLED screens, which illuminate each pixel individually, the use of darker colors is once again a viable energy-saving technique for end-user devices.
1.8 Reduce loops
Minimize animated content, such as animated images and auto-playing videos. Avoid loading spinner GIFs or CSS animations that constantly generate an image even when they are not visible.
2. website development
Developers have a major influence on the energy efficiency of the websites they create and maintain. Although some decisions made by designers and content creators are out of the hands of developers*, there are several areas where they have full control and areas where they have the ability to tweak the content and designs they receive. Obviously, it is good to consume energy at times when users are interacting with the site. You want the page to load fast and respond quickly to touches. In many cases, the same optimizations that reduce time to first frame and time to user interaction will also reduce power consumption. However, be careful about continuing to load resources and run scripts after the initial page load. The goal should be to return to idle as soon as possible. In general, the less JavaScript that is executed, the more power-efficient the page, since the script is working in addition to what the browser has already done to layout and display the page. Once the page is loaded, user interactions like scrolling and typing will also drive up hardware power (mainly the CPU and GPU), which again makes sense, but make sure they go back to idle once users stop interacting. Also, try to stay on the browser’s “fast paths” – for example, normal scrolling on the page is much more power efficient than custom scrolling implemented in JavaScript.
2.1 Writing efficient code
This probably goes without saying, but tidy and concise code is a fundamentally good thing. Keep the code clean and simple, avoid duplication and write efficient queries. Remember that this applies not only to the code you write, but also to the code you include. If you are using existing frameworks and libraries, make sure that they are also refined and adapted to efficiently deliver the functionality you need, and that you are not taking a sledgehammer to a nail. If a CMS such as WordPress is used, avoid unnecessary plugins that bloat the system and choose plugins that minimize the server load and do not unnecessarily burden the frontend.
2.2 Use less JavaScript
JS affects website efficiency in two ways: by adding file weight to the web page and by increasing the amount of processing required by the user’s device. The second is something that applies to JS much more than other types of files. Functions controlled by JS are processed on the user’s computer or phone and increase CPU usage, which in turn increases the power consumption of the device. Can you hear the fans whirring on your laptop? That is energy that is being wasted. Looking for ways to achieve frontend interactions, functionality, and animations with more efficient technologies like CSS, or at least use JS efficiently. Special mention should be made here of tracking and advertising scripts, which rarely provide value to users but can add a significant volume of data, cause significant CPU usage, slow down websites and invade their privacy.
2.3 Optimize images
As already mentioned, images are one of the biggest sources of data traffic. In addition to the decisions designers and content creators make about how to use images, there are technical decisions that significantly affect the file size of the images they display. These include:
- Compression Use a tool such as TinyPNG or ShortPixel to compress image files without visible loss of quality
- File format Use the most efficient file format for each image, e.g. WebP instead of JPEG
- Image size Loading images at the correct scale instead of relying on CSS
If these steps are followed, a significant reduction in image file sizes can be achieved, thereby reducing energy consumption and improving loading times without any noticeable disadvantages for website users.
2.4 Optimize fonts
There are technical strategies that can be used to minimize the size of fonts on websites. Try these techniques to reduce the size of font files:
- Stick to modern web font file formats like WOFF and WOFF2, which use higher compression methods compared to TTF, OFT and SVG file formats
- Subdivide the fonts so that they contain only the characters needed on the website
2.5 Use Accelerated Mobile Pages (AMP)
AMP is designed to make content load faster on mobile devices by removing unnecessary code and file weight and providing a minimalist version of the original web page. In theory, technologies like AMP don’t really help much if the website is efficient to begin with, but in cases where the original websites aren’t as lean as they should be, AMP can be a useful tool to quickly remove that and deliver a lightweight and more energy-efficient version for mobile users. It should also be noted that Google prioritizes AMP content in mobile search results predominantly for news-related topics, so it can help increase the visibility of your content. The downside is that your content may be delivered on a Google domain and some of the things that are taken out by AMP may be things that you think are important. It is a powerful tool that should be used with caution. The gray lightning bolt symbol indicates AMP content that is given preferential treatment by Google in mobile searches
2.6 Create static websites
CMS-operated websites make queries to the website database and generate pages dynamically. In simple terms, this means that the web server has to think about what information to send back to users every time it tries to load a page, and this causes the server to consume more energy. One solution is to use a server caching technology, but in some cases it may make sense to run static websites without any database. This can be achieved by writing the websites as static files in HTML, CSS and JS, or by using a static page generator or a specialized static web host to convert your CMS-powered website into static files.
2.7 Use Progressive Web App technology (PWA)
Progressive web app technology enables websites to use functions that are normally only found in native apps. One of the core features of a PWA the ability to cache files on the user’s device – thereby not having to reload content and assets on repeat visits. This can significantly reduce the amount of data loaded during repeated visits, especially on mobile devices where data transfer is more energy intensive than wired connections. It can also help to improve loading times and the user experience without any real disadvantages.
2.8 Reduce idle power consumption to zero
Therefore, to maximize battery life, reduce the time spent in high power consumption states and allow the hardware to return to idle as often as possible. For web developers, there are three states of interaction to think about:
- When users actively interact with the content.
- When the page is in the foreground, but users do not interact with it.
- If the page is not the foremost content.
Even when users are not interacting with the site, the site should consume as little power as possible. For example: Minimize the use of timers to avoid waking up the CPU. Also try to bundle timer-based tasks into a few infrequent timers. Many uncoordinated timers that trigger frequent CPU wakeups consume more resources than grouping this work into a few parts. An idle site also responds less quickly to user interactions, so minimizing background activity also improves responsiveness and battery life.
3. web hosting
Websites consume a lot of energy in the data center and when transferring data to and from the data center. Therefore, a careful selection of web hosting services can have a great impact on the energy efficiency and speed of websites. Below are the most important points you should think about.
3.1 Use server caching
For websites that use a CMS such as WordPress or Drupal, the pages are generated dynamically every time someone visits a website. This is very inefficient because server processing is required for each individual page request, which increases the energy consumption of the web server. Caching technologies like Varnish generate static versions of each page in advance, so server overhead can be significantly reduced for most visitors. This significantly reduces the server’s energy consumption and makes a big difference to page load times.
3.2 Select hosts with a high PUE value
Data centers are generally evaluated for their energy efficiency using a metric called Power Usage Efficiency (PUE). The PUE value is determined by dividing the amount of energy fed into the data center by the amount of energy used to operate the computers in the data center. This highlights the amount of energy wasted on non-computing activities such as cooling. The typical PUE for a data center is about 1.67, which means that for every 1.67 watts flowing into the data center, only 1 watt is used to run the computing systems. Highly efficient data centers can have a PUE value of up to 1.11.
3.3 Selecting a data center near the target groups
A large proportion of the energy consumed by the Internet is used to transmit data through telecommunications networks. It goes without saying that the farther information has to travel, the more energy it consumes on its journey. Therefore, choosing a data center near your target audience will help reduce energy consumption. For example, a cheap web hosting package may be offered at a US-based hosting company, but if the target visitors are located in the UK or Germany, energy is wasted on transferring data across the Atlantic. Moreover, this additional distance can cause a delay in page load times. If the website is located in a data center close to your main target audience, it’s good for both the user experience and the environment. While it’s good to place the data center near your main target audience, in cases where the user base is spread all over the world, it’s not so easy. Content delivery networks (CDNs) provide a great solution to this problem by delivering assets such as image files from a network of data centers around the world. This means that in most cases the largest files are loaded from the CDN site in the users* own region, reducing the distance that data travels each time a page is loaded. This in turn improves the energy efficiency and loading times of the page.
3.4 Block bots
Blocking bots could also reduce energy consumption, as bots can consume up to 50% of resources for processing and bandwidth.
3.5 Use latest PHP version
Newer versions of PHP are not only faster, but also consume fewer server resources and therefore less energy.
Conclusion
The energy consumption of websites can be difficult or impossible for us to measure accurately, but there are still many things we can do to avoid waste and improve efficiency. Most of these are not fundamentally difficult, they just require attention to detail and careful thought in every aspect of design, content creation, development and hosting. The great thing is that everything we do in this direction, be it better SEO, better web performance or better user experience also makes sense in other ways for users. A more efficient website is basically a better website.