Web Sustainability

“There are about 1.8 billion websites out there” says Gerry McGovern. “Waste data, waste code, waste content, has real consequences, is a real driver of global warming. Everything we do, no matter how small, to reduce CO2 emissions – it matters.”

In today’s digital age, having a website is critical. It functions as a business’s storefront, allowing customers to search and purchase products or services. But, in terms of sustainability, many people underestimate the impact a website has on an organization’s digital carbon footprint. The digital carbon footprint grows when you create more content, build new landing pages, publish marketing updates, offer virtual workshops, upgrade cloud accounts, and design additional apps to satisfy changing business needs. As an example:

• A single email containing a photo attachment can produce up to 50 grammes of CO2e. (e = “equivalent,” which includes greenhouse gases other than carbon dioxide.)
• While this may appear to be a little quantity, consider how many emails your organisation sends each day. Multiply that by the number of digitally enabled organisations in the world.

That only includes email. With this in mind, it is simple to understand how we accumulate 1.6 billion tonnes of emissions annually. This is made worse by the fact that many organisations underfund their digital departments, which results in content governance bottlenecks, technical debt, and millions of websites that are overrun with unread blog posts, broken links, bloated images, and outdated content. These problems negatively affect an organisation’s long-term sustainability and bottom line by aggravating users, wasting resources, taking time, and costing money.

Rarely do companies audit the carbon footprint of their online properties, even though many companies do so when evaluating the environmental impact of their office space, supply chain, or business practises. This needs to change given how quickly the internet is expanding. You can address these issues with the aid of sustainable web design. Here are some environmentally friendly web design techniques for creating high-efficiency, low-carbon digital goods and services.

Images

On most websites, images are the single largest contributors to page weight – the more images used and the larger those image files, the more data needs to be transferred and the more energy is used. Consider these questions when deciding on use of imagery on a site:

• Does the image genuinely add value to the user?
• Does the image communicate useful and relevant information?
• Could the same impact be achieved if the image was smaller?
• Could images that are not visible to the user, such as in carousels, be reduced?
• Could we achieve the same effect with a vector graphic (or even CSS style) instead of a photo?

Some actions to make the use of images more sustainable on a website include:

• Load images at the correct scale instead of relying on CSS to resize them to 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
• Use the most efficient file format for each image, such as WebP instead of JPEG

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 intensive form of content

A website with video playing can greatly increase page weight and creates much higher load on the user’s CPU, resulting in vastly greater energy consumption 

• Energy consumption can be reduced by reducing the amount of video streamed by removing auto-play and by keeping video content short 
• Alternatives to video for informative content, such as SVG animations and real text descriptions can be more accessible and more energy efficient

Fonts

While web fonts can enhance the visual appeal of websites, they can add significant file weight to the websites on which they are used – a single font file could be as much as 250kb, and to bold this font would add another 250kb

To help reduce the impact on custom web fonts, designers should consider the following:

• Use system fonts where possible e.g. Arial and Times New Roman as they can be used without loading any font files, and they are already on the user’s device 
• Use less font variations
• Stick to modern web font file formats like WOFF and WOFF2, which use higher compression methods compared to TTF, OFT and SVG file formats 

Clean code

Some ways to reduce the impact of code on a website include:

• Keeping code tidy and streamlined
• Avoid duplication
• Write efficient queries 
• If existing frameworks and libraries are being used, ensure that they are refined and tailored to efficiently deliver the functionality needed
• In cases where a CMS like WordPress is being used, avoid unnecessary plugins that add bloat
• Choose plugins that minimise server load and don’t add unnecessary weight on the front end

Less javascript

Javascript impacts website efficiency by adding file weight to the web page and by increasing the amount of processing required by the user’s device

Functionality driven by javascript is processed on the user’s computer or phone and increases CPU usage, which in turn increases the energy consumption of the device. Ways to reduce this include using more efficient technologies like CSS to achieve front-end interactions, functionality and animations

Lazy load

Use lazy load for anything below the fold. Users scroll down to view anything below the fold, so using lazy load for this saves on energy usage: reduces initial page load time, initial page weight and system resource usage – impresses visitors and enhances site’s SEO

Block bots

Blocking bots could reduce energy consumption as bots often use up 50% of resources such as processing and bandwidth.

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. Technologies like AMP do not 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 deliver a more lightweight and energy efficient version to mobile users. 

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 inefficient as it requires server processing for every single page view, increasing the 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.

Hosts with high PUE ratings

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 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.

Data centre

A lot of the energy used by the internet is used to transmit data through the telecoms networks. 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

• E.g. 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
• This additional distance can cause a delay in page load times

In cases where your audience is spread around the world, content delivery networks (CDNs) provide a solution, serving assets such as image files from a network of data centres globally – this means that the largest files will be loaded from the CDN location in the user’s own region, reducing the distance that data is moving each time a page is loaded – this improves energy efficiency and improves load times

Dark mode

Reducing white space and embracing dark mode is another way to make a website more sustainable. Dark websites were one of the first techniques popularised for saving energy on websites. Dark mode uses less electricity displaying black pixels than white pixels. Also, on some devices, dark mode prolongs battery life, reducing charging time.

Low carbon energy source host

Reduce carbon emissions further by ensuring that your web host uses a low-carbon energy source. Green hosting theoretically produces zero CO2 and therefore has the potential for your website to emit around 9% less CO2 in total.

How to select a green web host: https://www.wholegraindigital.com/blog/choose-a-green-web-host/ 

Have a call

We’d love to talk to you about how Make it Clear can support your organisation in improving your digital product’s sustainability with a UX audit. Book a call here.