How to reduce carbon footprint by lightening digital loads

Our digital lives have a carbon footprint.

The energy consumed to power and cool the datacentres at the heart of ecommerce, online banking, social and streamed media, already emits as much greenhouse gas as the aviation industry. This figure is on track to grow to 8% of GHG emissions in 2025.

While hyperscale datacentre operators, including Microsoft, Alphabet, and Amazon, have made big strides towards adopting renewable energy sources, they still need fossil fuel-powered backup systems to meet the 24×7 demand for power and cooling.

Ballooning demand

Since the Paris Agreement, internet traffic has quadrupled and the average web page weight has increased by 85% on desktop and 165% on mobile.

Adding to this, the rapid adoption of generative AI is massively increasing datacentres’ computational load.

To meet the predicted 606 Terawatt hours of electricity needed to power datacentres by 2030, the government and tech firms have recommissioned three mothballed nuclear plants in the US, and major investment is going into building new nuclear plants.  However, building will take years and until then, fossil fuel combustion will continue.

How can we shrink our digital carbon footprint?

The good news is that we can all do our bit to lighten the load. Even turning off autoplay on our smartphones and turning down the screen brightness can contribute to an overall reduction in energy consumption on our digital devices.

Web designers and developers can do even more: making multiple optimisations that reduce web page weight and lower energy consumption and associated GHG emissions.

How we’re reducing digital carbon footprints

As the provider of the world’s most widely-used open-source content management system (CMS) built on Microsoft .NET, we have both a responsibility and a great opportunity to drive positive change on a larger scale.

For our own part, we’re focusing on ways to make our operations more sustainable and our software more energy-efficient. Running our CMS platform on Microsoft .NET9 has introduced features such as HybridCache that aid carbon-conscious web developers in building sites that load content more efficiently.

We’re also working closely with our global open-source community and digital agency partners to show how to reduce the CO2 emitted by business websites built on the Umbraco CMS platform. The Umbraco community Sustainability Team, formed in March 2023, has published documentation that provides practical steps for reducing web page weight and optimising data transmission.

Sharing responsibility and best practices

By sharing sustainable best practices, and the measurable ROI that our partners’ clients have achieved as a result of carbon-conscious web design, we hope to amplify these changes across the industry. Together we can make a much bigger difference to our collective carbon footprint.

Prominent members of our open-source community Sustainability Team worked with us and implemented the Green Web Foundation’s CO2.js tool. We now have a Sustainability Dashboard, which helps businesses monitor and reduce the environmental impact of their websites running on Umbraco Cloud.

Ten tips to reduce Cloud Carbon Footprint

Members of the Umbraco Sustainability Team have published the following practical steps that organisations can take, and free tools that they can use, to measurably reduce the energy consumption and CO2 emissions of websites and digital experiences.

1. Lose weight

Just as the aviation industry has been introducing lighter aircraft to help reduce fuel consumption and emissions, carbon-conscious web designers can also help organisations to reduce web page weight.

The Sustainability Team recommends using tools such as www.Ecograder.com and www.Websitecarbon.com which show grams of CO2 emitted per web page. This is the simplest way to check a web page’s energy-efficiency in order to make improvements.

Neil Clark, Service Design Lead, at TPX Impact, observes, “Every piece of website software and code must minimise the data transfer it causes. We must start to consider data transfer as a constraint in all of our digital projects.”

Thomas Morris, Tech Lead at TPX Impact advises, “A useful first step is to set page weight budgets and stick to them. This helps to create a culture of optimisation with realistic targets. The HTTP Archive suggests a maximum of 1 Megabyte.”

2. Reduce Images

To reduce web page weight, Rick Butterfield, Lead Software Engineer at Wattle, emphasises, “Be ruthless about images.  Make sure they’re sized well and avoid using stock images, which can sometimes be massive files.”

Thomas Morris agrees, “One of the biggest impacts you can have, with fairly minimal effort, is to use appropriately-sized images on your website, or consider whether images are needed at all. Using modern image compression formats, such as WebP, or AVIF helps reduce file sizes by up to 70% compared to JPEGs, without your users noticing any difference. Optimise images before upload, to reduce the extra compute effort of resizing images. Where appropriate, consider using SVG icons, logos or illustrations, since these often result in smaller image file sizes and also scale easily without compromising image quality.”

3. Compress fonts

Thomas Morris advises, “We suggest using system fonts to reduce extra server requests. If you do have to use custom fonts then compression tools, such as WOFF2, will help to minimise the data weight of those assets. WOFF2 is supported across all modern browsers.”

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 makes this a lot easier and reduces text-based files by around two thirds.

4. Choose colours wisely

Rick Butterfield advises that web designers can even reduce carbon footprint by changing the colours selected for a website: “Blue shades use up more energy than reds and greens when they’re displayed on screens.”

5. Default to Dark Mode

“Dark mode is very simple to set up and can be built on incrementally,” enthuses Rick Butterfield. As with a lot of the best practices outlined by the Sustainability Team, these changes benefit end users too. “A university study found that switching from light mode to dark mode at 100% screen brightness can save an average of 40% battery power, so users don’t have to charge devices as often,” adds Rick.

6. Keep software updated

James Hobbs, Head of Technology at aer Studios, says, “Simply by keeping libraries, frameworks and the rest, up to date, your organisation is likely to benefit from enhanced efficiency, which means doing more work with the same or fewer resources, which is better for the planet. When Umbraco moved to .NET Core it made a massive difference to the efficiency of the CMS. Staying on top of this can deliver sustainability and efficiency benefits and an improved security posture.”

7. Load web content efficiently

To make data transfers of images, videos and iframes more efficient, the Sustainability Team recommends implementing lazy loading on clients’ sites. “Lazy loading limits what is loaded within the viewport and is supported in modern browsers,” explains Thomas Morris.

However, web designers should avoid applying lazy loading to hero images which are always visible at the top of a page, as this will cause the website to load slowly and impact user experience.

8. Make your Site Carbon-Aware

Rick Butterfield is a strong advocate for building carbon-aware websites. “The Green Software Foundation’s Carbon Aware software development kit 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. You could change your website’s functionality based on current grid usage, where your servers are located, or where your users are. As an example, if the server load is too high, the website can disable images, strip them back to display illustrations instead.”

9. Choose carbon-efficient infrastructure

Andy Eva-Dale, CTO at Tangent, advises that running digital services from the cloud has both environmental and financial benefits for organisations, “All the major cloud providers have carbon commitments. Take advantage of PAAS features like auto-scaling, to ensure you’re only using and paying for the computing memory you need, and this is optimised for ‘business as usual’ traffic, from a carbon perspective. Then, when you have spikes in traffic, we can auto-scale those applications. Furthermore, when we start looking at microservice architecture, we can scale independently and set resource plans on individual services rather than whole applications, giving us more control.”

Andy Eva-Dale continues, “The next thing to consider is serving content geographically close to your audience. Hosting static files or caching your API responses on the edge can significantly reduce the amount of carbon your systems produce.”

Thomas Morris agrees, saying, “Serving static assets via a content delivery network (CDN) will ensure that requests are treated efficiently.”

10. Switch off after use

Andy Eva-Dale also advises turning off cloud-based resources after use: “When you’ve moved to a relatively stable business as usual cycle, turn off your non-production environment and turn them on only when you need to make a patch, or update a particular feature. If you’re in a continuous programme of work, look at switching off environments at weekends. Applications like Kubernetes give you increased control over that. An auto event-driven autoscaler was announced by The Cloud Native Computing Foundation that allows infrastructure to be adjusted, based on carbon metrics.”

Taking our own advice:

The Sustainability Team has committed to sharing these best practices with peers, clients and even competitors. Together, we can reduce the environmental impact of digital experiences. This includes Umbraco listening to our digital partners and making the necessary changes to our core CMS platform and website.

Neil Clark comments: “By having us as a Sustainability Team, we can really push change at all levels of Umbraco which means that the impact of those changes is going to be amplified and not restricted to a few developers or agencies changing the way that they work.”

This is not just a nice-to-have. Our digital agency partners tell us they are seeing more client briefs and RFPs that stipulate sustainable web design. In the face of new legislation such as the Corporate Sustainability Reporting Directive, there is an increasingly strong business case for carbon-conscious web design.”