10 ways to create a low-carbon website

As ultra-low emission zones proliferate across our cities, and we pat ourselves on the back for our remote working policies, there’s a growing awareness that it’s not just cars and aeroplanes that are sucking up fossil fuels and blowing out CO2.

Carbon footprinting researcher, Prof Mike Berners-Lee, younger brother of the Web’s inventor, calculated in 2020 that the ICT industry was responsible for 3.7% of total global CO² emissions.

This is expected to double by 2025 as more services are brought online.

The realisation that online services are responsible for emitting as much carbon as the aviation industry prompted us to examine how we, as web developers, could make positive changes.

The energy consumption of a typical digital service can be roughly divided into 20% used by the server, 20% spent transferring data between the server and client devices, and 60% of energy consumed on the client device. This allows web designers to make multiple optimisations that measurably reduce the energy consumed by servers and devices. Here are ten effective ways that your business can make a difference too:

1. Lose weight!

An average website contains 2.3 Megabytes of content, up to 9Mb for the most content-heavy. Mobile page weight is even higher and has increased sixfold over the past decade. Browsing the internet and receiving website images are the most resource-hungry processes on smartphones.

Sustainable web design champion, Andy Eva-Dale, technical director at digital product agency, Tangent, advises bundling assets, optimising images, and limiting the number of third-party libraries and fonts. Applying sustainable web design practices such as these saw Tangent reduce a client’s CO² emissions from 1.44g down to 0.2g for every homepage visit.

2. Compress images and fonts

‘Reduce, re-use, recycle,’ has been the green mantra for decades and it applies to web content too. Using compression settings to full effect can reduce image weight by between 50% to 80%, without changing the user experience. 

Speaking at the Umbraco Spark innovation conference, hosted by GIBE Digital, Thomas Morris, Technical Lead at digital agency, TPX Impact, advised using newer image compression formats and demonstrated how a 1Mb JPEG could be reduced to a 363kb Webp file, or a 294Kb AVIF image file.

GIFs are hard to compress and are very resource-hungry. But presenting the same image sequence as a video can reduce data weight by 75%. There are no changes required, it’s simply a different format.

Asking your web designer to apply lazy loading is another effective way to reduce image and video data on your site.

Compress text: Web developers can also improve site sustainability by reducing custom fonts down to the most commonly-used characters. Using this approach, one of our partners reduced a client’s custom font weight from 95 Kilobytes to 16Kb, saving 83%. 

While there may be licensing reasons for hosting fonts at a separate location to your website, consider self-hosting to reduce client/server traffic and use a CDN for caching. TPX Impact’s Thomas Morris also recommends using WOFF2 font compression.

Minimising text assets, including HTML documents, JavaScript files and CSS files, is a really good practice. Google’s Brotli is a lossless compression tool supported by 96% of browsers that reduces text-based files by around two thirds. Yet a quarter of websites still haven’t got compressed text.

As Thomas Morris comments, changes such as this “can make all the difference, not just for the environment, but also for users, who ultimately get a better experience.”

3. Render relevant content

Organisations with static websites often pre-render pages, which means they run every time they’re published in the content management system (CMS). For a large website with thousands of nodes, this may render content that isn’t relevant to all visitors and will never be seen. Caching pages and rendering on demand reduces additional server processing and power consumption.

4. Use a Content Delivery Network

Business people can often drive sustainability by asking the right questions of their web design agencies. As Paul Marden, founder and managing director of digital agency, Carbon Six Digital, advises in his blog, “Marketing managers are often in the driving seat in buying decisions for digital projects, and can make sustainable decisions.  Require your agency to consider sustainable web development, by reducing data used by webpages, remove bloated frameworks, carefully use hosting technologies like CDNs to push content closer to physical location of your visitors, and spend more money on renewable hosting.”

A content delivery network (CDN) places content and services closer to the user and is considered best practice among web developers. The CDN can also be used as a distributed cache avoiding all the processing that normally happens in the CMS.

Website administrators can control how long the CDN is allowed to store your files simply by using regular HTTP headers.  Be aware that session cookies and headers can influence how the CDN is allowed to store things, so it’s advisable to test it out. Web administrators can see in the headers whether content is being served from the CDN or going back to the master.

5. Select sustainable suppliers

Consider all the vendors in your architecture and consider what they are doing to reduce power consumption and CO² emissions. Ask your suppliers how much CO² is emitted from the usage of your own service and what they are doing about sustainability. Are they on legacy infrastructure? Could they run services as functions? When Umbraco switched to .Net Core we saw at least 50% extra performance across everything that we do in the CMS.

One digital agency moved a client’s website from a Las Vegas data centre that used 19% renewable energy to an Oregon data centre that uses 90% renewable energy and is cheaper. For an enterprise running thousands of servers, that makes a significant difference to CO2 emissions.

Google, Microsoft and AWS are carbon net neutral and run on renewable energy wherever possible. When they cannot, they compensate for fossil fuel consumption by offsetting through tree planting, funding wind energy projects and other initiatives that benefit the planet.

Tools such as Microsoft’s Emissions Impact Dashboard allows organisations to monitor how much carbon is produced by all the services used across Azure. This allows web developers to test whether any resources can be removed to reduce environmental impact. The Microsoft Cloud for Sustainability API allows web developers to apply the Emissions Impact Dashboard data to build their own carbon-reduction tools.

6. Select regional hosting

Every business wants to get closer to its users. Selecting regional hosting reduces traffic between servers and users’ devices, lowering energy consumption and improving speed.

7. Pick your processing times

Solar-powered servers don’t work so well in the middle of the night. Consider your data centre power sources to see which processing times are most appropriate for your organisation.

8. Default to dark mode

Modern mobile phone screens are extremely bright and consume a lot of power. Web developers building sites in dark mode, or setting sites to default to dark mode, can save up to 47% of power consumption.

9. Turn off auto-play

Auto-play is a waste of data traffic and, to rub salt in the wound, it provides a terrible user experience too. A more sustainable approach is to ask web designers to place an image on the page, so that the video only plays when users click on it. This tweak takes just three lines of JavaScript, but if just one in ten visitors clicks on the image this saves 1.67 grammes of CO². After 100,000 visits, the site will have reduced the equivalent CO² of a flight from Heathrow to Copenhagen, demonstrating the measurable difference that thoughtful web design can make to sustainability targets.

10. Ask about carbon-aware sites

Speaking at the Umbraco Spark innovation conference, Rick Butterfield, development team lead at Nexer Digital, advised, “We have lots of measures we can take as web designers, including building in dark mode, tracking the carbon usage, and building carbon-aware websites. The Green Software Foundation has come out with a Carbon Aware software development kit that allows developers to create software that does more when the electricity is from renewable sources and less when the electricity is from fossil fuels. Open APIs allow us to create this type of service for clients.”

The UK’s National Grid also has an Open API called the Carbon Intensity API that developers can build into products to allow users to see the carbon intensity of their local grid at that given moment and also predicted into the future. Hooking into that carbon intensity data allows organisations to do things differently on their websites. If carbon usage is high in your locality, websites can automatically be switched to dark mode, or videos can be prevented from playing. Finding out where the server is hosted also allows developers to do things differently.”

When planning your next website refresh, ask your web designers how they can make your site and mobile apps more sustainable. Optimising website performance consumes less energy and emits less CO². Well-run websites tend to improve the user experience and increase conversion rates, so they’re better for business too.