Our digital lives have a carbon footprint.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
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<\/a> to meet the 24×7 demand for power and cooling.<\/p>\n\n\n\n Since the Paris Agreement, internet traffic has quadrupled and the average web page weight has increased by 85% on desktop and 165% on mobile<\/a>.<\/p>\n\n\n\n Adding to this, the rapid adoption of generative AI is massively increasing datacentres\u2019 computational load.<\/p>\n\n\n\n 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<\/a>, and major investment is going into building new nuclear plants. However, building will take years and until then, fossil fuel combustion will continue.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n Web designers and developers can do even more: making multiple optimisations that reduce web page weight and lower energy consumption and associated GHG emissions.<\/p>\n\n\n\n As the provider of the world\u2019s most widely-used open-source content management system (CMS) built on Microsoft .NET<\/a>, we have both a responsibility and a great opportunity to drive positive change on a larger scale.<\/p>\n\n\n\n For our own part, we\u2019re 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<\/a> that aid carbon-conscious web developers in building sites that load content more efficiently.<\/p>\n\n\n\n We\u2019re also working closely with our global open-source community and digital agency partners to show how<\/strong> to reduce the CO2 emitted by business websites built on the Umbraco CMS platform. The Umbraco community Sustainability Team<\/a>, formed in March 2023, has published documentation that provides practical steps for reducing web page weight and optimising data transmission.<\/p>\n\n\n\n By sharing sustainable best practices<\/a>, and the measurable ROI that our partners\u2019 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.<\/p>\n\n\n\n Prominent members of our open-source community Sustainability Team worked with us and implemented the Green Web Foundation\u2019s CO2.js tool. We now have a Sustainability Dashboard<\/a>, which helps businesses monitor and reduce the environmental impact of their websites running on Umbraco Cloud.<\/p>\n\n\n\n Members of the Umbraco Sustainability Team<\/a> 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n The Sustainability Team recommends using tools such as www.Ecograder.com<\/a> and www.Websitecarbon.com<\/a> which show grams of CO2 emitted per web page. This is the simplest way to check a web page\u2019s energy-efficiency in order to make improvements.<\/p>\n\n\n\n Neil Clark, Service Design Lead, at TPX Impact<\/a>, observes, \u201cEvery 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<\/em>.\u201d<\/p>\n\n\n\n Thomas Morris, Tech Lead at TPX Impact advises, \u201cA 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 <\/em>HTTP Archive<\/em><\/a> suggests a maximum of 1 Megabyte.\u201d<\/em><\/p>\n\n\n\n To reduce web page weight, Rick Butterfield, Lead Software Engineer at Wattle<\/a>, emphasises, \u201cBe ruthless about images. Make sure they\u2019re sized well and avoid using stock images, which can sometimes be massive files<\/em>.\u201d<\/p>\n\n\n\n Thomas Morris agrees, \u201cOne 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 <\/em>before<\/em><\/strong> 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<\/em>.\u201d<\/p>\n\n\n\n Thomas Morris advises, \u201cWe suggest using system fonts to reduce extra server requests. If you do have to use custom fonts then compression tools, such as <\/em>WOFF2<\/em><\/a>, will help to minimise the data weight of those assets. WOFF2 is supported across all modern browsers<\/em>.\u201d<\/p>\n\n\n\n Minimising text assets, including HTML documents, JavaScript files and CSS files is a really good practice. Google\u2019s Brotli<\/a> 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.<\/p>\n\n\n\n Rick Butterfield advises that web designers can even reduce carbon footprint by changing the colours selected for a website: \u201cBlue shades use up more energy than reds and greens when they\u2019re displayed on screens.\u201d<\/em><\/p>\n\n\n\n \u201cDark mode is very simple to set up and can be built on incrementally<\/em>,\u201d enthuses Rick Butterfield. As with a lot of the best practices outlined by the Sustainability Team, these changes benefit end users too. \u201cA 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\u2019t have to charge devices as often<\/em>,\u201d adds Rick.<\/p>\n\n\n\n James Hobbs, Head of Technology at aer Studios<\/a>, says, \u201cSimply 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<\/em>. Staying on top of this can deliver sustainability and efficiency benefits and an improved security posture.<\/em>\u201d<\/p>\n\n\n\n To make data transfers of images, videos and iframes more efficient, the Sustainability Team recommends implementing lazy loading on clients\u2019 sites. \u201cLazy loading limits what is loaded within the viewport and is supported in modern browsers<\/em>,\u201d explains Thomas Morris.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n Rick Butterfield is a strong advocate for building carbon-aware websites. \u201cThe <\/em>Green Software Foundation<\/em><\/a>\u2019s <\/em>Carbon Aware software development kit<\/em><\/a> 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.\u201d<\/em><\/p>\n\n\n\n Andy Eva-Dale, CTO at Tangent<\/a>, advises that running digital services from the cloud has both environmental and financial benefits for organisations, \u201cAll the major cloud providers have carbon commitments. Take advantage of PAAS features like auto-scaling, to ensure you\u2019re only using and paying for the computing memory you need, and this is optimised for \u2018business as usual\u2019 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.<\/em>\u201d<\/p>\n\n\n\n Andy Eva-Dale continues, \u201cThe 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<\/em>.\u201d<\/p>\n\n\n\n Thomas Morris agrees, saying, \u201cServing static assets via a content delivery network (CDN) will ensure that requests are treated efficiently<\/em>.\u201d<\/p>\n\n\n\n Andy Eva-Dale also advises turning off cloud-based resources after use: \u201cWhen you\u2019ve 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\u2019re 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 <\/em>The Cloud Native Computing Foundation<\/em><\/a> that allows infrastructure to be adjusted, based on carbon metrics<\/em>.\u201d<\/p>\n\n\n\n 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.<\/p>\n\n\n\nBallooning demand<\/strong><\/h3>\n\n\n\n
How can we shrink our digital carbon footprint?<\/strong><\/h3>\n\n\n\n
How we\u2019re reducing digital carbon footprints<\/strong><\/h3>\n\n\n\n
Sharing responsibility and best practices<\/strong><\/h3>\n\n\n\n
Ten tips to reduce Cloud Carbon Footprint<\/strong><\/h3>\n\n\n\n
1. Lose weight<\/strong><\/h4>\n\n\n\n
2. Reduce Images<\/strong><\/h4>\n\n\n\n
\n
3. Compress fonts<\/strong><\/h4>\n\n\n\n
\n
4. Choose colours wisely<\/strong><\/h4>\n\n\n\n
\n
5. Default to Dark Mode<\/strong><\/h4>\n\n\n\n
\n
6. Keep software updated<\/strong><\/h4>\n\n\n\n
\n
7. Load web content efficiently<\/strong><\/h4>\n\n\n\n
\n
8. Make your Site Carbon-Aware<\/strong><\/h4>\n\n\n\n
\n
9. Choose carbon-efficient infrastructure<\/strong><\/h4>\n\n\n\n
\n
10. Switch off after use<\/strong><\/h4>\n\n\n\n
\n
Taking our own advice:<\/strong><\/h3>\n\n\n\n