Over the past couple of years, we’ve talked a lot about the carbon footprint of websites. The carbon impact of the web is largely caused by electricity use. The question is:
Can we as web professionals help to make the web more energy efficient?
This article is intended to answer exactly that, providing a handy list of the top things you can do to minimise wasted energy and help ensure that the products you create are as energy efficient as possible.
What’s more, nearly everything listed here to help make a website more energy efficient, also improves performance and user experience!
Some background on website energy consumption
If this topic is new to you, then the short story is that the internet – including data centres, telecoms networks and end user devices like phones and laptops – uses a lot of electricity. In fact, if you add it all together, the internet uses roughly the same amount of electricity as the UK, one of the world’s largest economies.
As we continue to consume more and more internet data in our daily lives, the amount of electricity consumed by the internet is growing rapidly. It may be out of sight and out of mind, but this huge power consumption of the internet has an enormous carbon footprint, and that’s something that we need to address.
For those of us working in web design and development, this is how we can do it:
Design & Content
When we talk about the energy efficiency of websites, it’s easy to assume that it’s a purely technical topic. However, efficiency can be improved before we even build a website. Design and content have a big impact on energy efficiency and the following items are key areas to think about.
SEO might not appear to have anything to do with website efficiency but in practice the goals of SEO are inherently aligned with the goal of reducing energy consumption. When optimising a website for search engine rankings, we are helping people find the information they want quickly and easily. When SEO is successful, it results in people spending less time browsing the web looking for information, and visiting less pages that don’t meet their needs. This means that less energy is consumed and the energy that is consumed is used to deliver real value to the user.
2. Copy writing
Similar to search engine optimisation, copy writing has an impact on website efficiency because it affects the amount of time people spend browsing websites. Sometimes we want people to spend a lot of time on a website immersing themselves in our content. What we don’t want is for people to waste their time wading through content that offers little or no value to them. Therefore, clear and efficient copy writing can help reduce wasted time on the internet and in turn reduce wasted energy.
3. User Experience (UX)
One of the core elements of good user experience is reducing friction in user journeys. We want people to be able to find the things they want and perform the actions that they need to take in the most streamlined manner possible. Good user experience makes using the web easier and more enjoyable for everyone, and once again reduces the amount of energy wasted navigating to pages that don’t serve the correct purpose and staring at web pages trying to decipher what they should do next.
4. Reduce images
On most websites, images are the single largest contributors to page weight. The more images you use and the larger those image files, the more data needs to be transferred and the more energy is used. Regardless of any technical optimisations, designers and content creators should think carefully about their use of images.
- Does the image genuinely add value to the user?
- Does it communicate useful information?
- Could the same impact be achieved if the image was smaller?
- Could we reduce images that are not visible to the user, such as in carousels?
- Could we achieve the same effect with a vector graphic (or even CSS style) instead of a photo?
Asking these questions and keeping images as minimal as possible without compromising user experience will help keep energy consumption down.
5. Reduce video
Although less commonly used than images, video is increasingly popular as a content format on the web, and it is by far the most data intensive and processing intensive form of content. As with images, ask yourself if videos are really necessary. If they are, see if you can reduce the amount of video streamed by removing auto-play from videos and by keeping video content short. A website with video playing can be one or even two orders of magnitude heavier than a website without video in terms of page weight and creates much higher load on the users CPU, resulting in vastly greater energy consumption.
6. Choose fonts carefully
Web fonts can enhance the visual appeal of websites but can add significant file weight to the websites on which they are used. A single font file could be as much as 250kb, and that might only be for the standard weight. If you want bold, add another 250kb!
To help reduce the impact on custom web fonts, designers should consider the following options:
- Use system fonts where possible. They are not always as pretty, but fonts such as Arial and Times New Roman can be used without loading any font files at all as they are already on the users device.
- Use less font variations. You may feel the need to use custom web fonts, but try to be frugal in the number of typefaces you choose and in the number of different weights that you use for each typeface.
Developers have a lot of influence over the energy efficiency of the websites that they create and maintain. Although some decisions made by designers and content creators are out of the developers hands, there are several areas where developers are fully in control and areas where they have the ability to optimise the content and designs that they are given.
7. Write clean code
This probably goes without saying, but tidy and streamlined code is a fundamentally good thing. Keep code clean and simple, avoid duplication and write efficient queries. The code behind the scenes should be a well oiled, lean machine.
Keep in mind that this doesn’t just apply to the code you write, but also to the code that you borrow. If you are using existing frameworks and libraries then ensure that they are also refined and tailored to efficiently deliver the functionality you need, and that you are not hitting a nail with a sledgehammer. In cases where you are using a CMS like WordPress, avoid unnecessary plugins that add bloat and choose plugins that minimise server load and don’t add unnecessary weight on the front end. Our Granola starter theme is designed to help you do exactly that.
JS impacts website efficiency in two ways: by adding file weight to the web page and by increasing the amount of processing required by the users device. The second of these is something that applies to JS much more than to other types of files.
Functionality driven by JS is processed on the users computer or phone and increases CPU usage, which in turn increases the energy consumption of the device. Hear those cooling fans on your laptop whirring? That’s energy being wasted.
Look for ways to achieve front end interactions, functionality and animations using more efficient technologies like CSS, or at least use JS efficiently. A particular mention should be given here to tracking and advertising scripts that rarely offer any value to the user but can add significant file weight, cause significant CPU usage, slow websites down and invade their privacy.
Webtest.app is a great tool for measuring the performance, data and energy impact of ad scripts (update March 2021).
The new web inspector in Safari has a useful tool to help assess the energy impact of a web page on the end user device, and this article by Apple’s WebKit developers provides some detailed advice.
9. Optimise images
As mentioned above, images are one of the largest contributors to the amount of data transferred on most web pages. In addition to the decisions made by designers and content creators on the use of images, there are technical decisions that significantly affect the file size of images displayed on a page. These include:
- Load images at the correct scale instead of relying on CSS to resize them, so that you avoid loading images that are larger than the scale they will be displayed at.
- Use a tool such as TinyPNG or ShortPixel to compress image files without visible loss of quality. We documented our favourite image compression tools here.
- Use the most efficient file format for each image, such as WebP instead of JPEG.
When these steps are followed, a significant reduction in image file sizes can be achieved, reducing energy consumption and improving load times with no perceivable downsides for website visitors.
10. Optimise fonts
There are technical strategies that can be used to minimise the size of fonts on websites and we have seen that even with custom fonts, it can result in file size reductions of up to 97%. 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.
- Subset fonts to only include the characters needed on the website.
For more information about optimising performance and size of web fonts, check out this article by Josh.
11. Use Accelerated Mobile Pages (AMP)
AMP is designed to make content load faster on mobile devices by stripping out unnecessary code and file weight, delivering a minimalist version of the original web page. In theory, technologies like AMP do not actually help much if the website is efficient to begin with, but in cases where the original web pages are not as lean as they should be, AMP can be a useful tool to strip out the fast and deliver a more lightweight and energy efficient version to mobile users.
It should also be noted that Google prioritises AMP content in mobile search results for news related topics in particular, so it can help increase visibility of your content. The downside is that your content may be served on a Google domain and some of the things stripped out by AMP could be things that you consider important. It’s a powerful tool, to be used with care.
12. Build static web pages
CMS powered websites make queries to the website database and dynamically generate pages. In simple terms, it means that the web server has to do work thinking about what information to send back to the user each time someone tries to load a page, and that causes the server to use more energy. One solution (listed below) is the use a server caching technology, but in some cases it may be possible to simply server static web pages with no database at all.
This can be achieved by writing the web pages as static files in HTML, CSS and JS, or by using a static site generator or specialist static web host to convert your CMS powered website into static files.
13. Use Progressive Web App technology (PWA)
Progressive Web App technology enables websites to tap into functionality normally only seen in native apps. As Chris wrote about recently, one of the core features of a PWA is the ability to cache files on the users device, meaning that content and assets do not need to be reloaded on repeat visits. This can significantly reduce the amount of data loaded by repeat visitors, especially on mobile devices for which data transfer is more energy intensive than wired connections. Like most things, it can also help improve load times and user experience with no real downsides.
A lot of energy is used by websites in the data centre and in the transmission of data to and from the data centre. Careful selection of web hosting services can therefore have a big impact on energy efficiency and web page speeds. The following are the main points to think about.
14. Use server caching
For websites that use a CMS such as WordPress or Drupal, pages are generated dynamically every time someone visits a web page. This is very inefficient as it requires server processing for every single page view, increasing energy consumption of the web server.
Caching technologies like Varnish pre-generate static versions of each page so that the server overhead can be significantly reduced for most visitors. This significantly reduces server energy consumption and makes a big difference to page load times.
It can be complicated to set up but many hosts such as Kinsta and WP Engine now offer this option as an off the shelf feature, meaning that your website energy efficiency and web performance can be improved with little effort required on your side.
15. Choose hosts with a high PUE rating
Data centres are generally rated for energy efficiency using a metric called Power Usage Efficiency, or PUE. The PUE is determined by dividing the amount of energy entering the data centre by the amount of energy used to run the computers inside it. This then highlights the amount of energy being wasted on non-computational activities such as cooling. The typical PUE for a data centre is around 1.67, meaning that for every 1.67 watts going into the data centre, only 1 watt is being used to power the computing systems. High efficiency data centres such as those run by Google can have a PUE as high as 1.11.
16. Use a data centre close to your users
A lot of the energy used by the internet is used to transmit data through the telecoms networks. It goes without saying that the further the information has to travel, the more energy it uses on its journey. Therefore, selecting a data centre close to your target audience will help reduce energy consumption. For example, you might find a cheap web hosting package from a US based hosting company, but if your target visitors are in the UK or Germany then energy will be wasted transmitting data across the Atlantic. What’s more, this additional distance can cause a delay in page load times too, so locating your website in a data centre close to your main audience will be good for user experience and for the planet.
17. Use a CDN
It’s all very well locating your data centre close to your main audience group, but in cases where your audience is spread around the world that is not so easy. Content delivery networks (CDN’s) provide a great solution to this, serving assets such as image files from a network of data centres around the world. This means that in most cases, the largest files will be loaded from the CDN location in the users own region, reducing the distance that data is moving each time a page is loaded. Once again, this improves energy efficiency and improves page load times.
It’s paramount that we eliminate the waste of energy within the web industry. Energy consumption of websites can be hard or impossible for us to measure accurately (though tools like Website Carbon and Safari web inspector can help), but there are nevertheless many things that we can do to eliminate waste and improve efficiency. Most of these actions are not fundamentally difficult, they simply require attention to detail and careful thought in every aspect of design, content creation, development and hosting.
Best of all, nearly everything that we can do to help websites be more energy efficient will also make them better in other ways, whether that’s better SEO, better web performance or better user experience in other ways. A more efficient website is fundamentally a better website.
If you have tips to reduce the energy consumption of websites, do get in touch and let us know!
Also, if you are interested in creating a greener web, please do read and sign the Sustainable Web Manifesto.
We’ve had some additional suggestions on how to reduce the energy consumption of websites since we published this post.
18. Block bots
Akshat Choudhary from BlogVault suggested that blocking bots could reduce energy consumption. He said that “Bots often use up 50% of resources such as processing and bandwidth.”
19. Dark Mode
Hazel Ho suggested reducing white space and embracing dark mode. Dark websites were one of the first techniques popularised for saving energy on websites many years ago and it faded away with the advent of LCD screens, which unlike CRT screens had a permanent backlight, using the same energy regardless of the colour actually visible on the screen. However, with the advent of OLED screens that light up each pixel individually, using darker colours is once again a viable technique to reduce energy on end user devices.
20. Use the latest PHP version
Katalin Juhasz from Kinsta got in touch to suggest that we should also think about the technology that is running on the servers to ensure that we use the most efficient versions available. Specifically, she mentioned that newer versions of PHP are not only faster but also use fewer server resources and therefore less energy. Kinsta have written about the benefits of newer PHP versions and the performance impact in this article. No doubt this will also apply to PHP alternatives too.