As we consider the outcomes from Cop28, there’s a growing awareness that it’s not just our travel, heating and eating habits that are increasing our CO2 emissions, but our digital activities too.
The datacentres that store and serve content to websites require vast amounts of energy to power and cool their servers. Professor Mike Berners-Lee, the Web inventor’s brother, calculated in 2020 that the ICT industry was responsible for 3.7 percent of global CO2 emissions – equivalent to the aviation industry. This is expected to double by 2025 as more services are brought online. Yet, to stay below the 1.5°C global warming threshold, the Intergovernmental Panel on Climate Change advises that global emissions need to decrease by seven percent a year to 2030.
A collaborative approach to cutting CO2
Umbraco is one of the top three web content management systems (CMS) used to develop websites and digital services for the UK public sector. As such, we have an opportunity and a responsibility to work with our digital agency partners to help optimise public sector sites, conserve energy, and reduce CO2 emissions.
We recently established the Umbraco Sustainability Team, comprising heads of engineering and business directors from leading digital agencies. The team has published Sustainability Best Practices to guide other web designers, and their public sector clients, on ways to optimise energy usage when designing digital experiences.
How digital experiences consume energy
A typical digital experience consumes 20 percent of its energy on the server, 20 percent is spent transferring content between the server and electronic devices, and 60 percent of the energy is consumed on end-users’ devices. Carbon-conscious web designers can make multiple changes that measurably reduce energy consumption and CO2 emissions.
Umbraco has a partner network of 1,500 digital agencies. By working with them to share sustainable web design practices with their public sector clients, we can collectively make a much bigger difference to lowering emissions.
What do the experts advise?
Digital design and development company, Nexer Digital, is part of the Umbraco Sustainability Team. Rick Butterfield, Nexer Digital’s development team lead advises: “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.”
Sustainability Team member, Andy Eva-Dale, technical director at digital product agency, Tangent, advises bundling assets, optimising images, using a content delivery network (CDN) and limiting the number of third-party libraries and fonts used on websites. By applying sustainable web design practices such as these, Tangent reduced a client’s CO2 emissions from 1.44g down to 0.2g for every homepage visit.
Showing how effective the latest compression tools are, Sustainability Team member, Thomas Morris, technical lead at digital agency, TPX Impact, regularly demonstrates to clients how a 1000Kb JPEG can be reduced to a 363Kb WebP file, or a 294Kb AVIF image file. He also advises applying ‘lazy loading’ so that content is only delivered as the user scrolls down the page, rather than loading all of the images and text upfront. He 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.”
Tangent also recommends using energy-saving ‘headless’ content management systems, which decouple back-end website operations from front-end interfaces. As well as consuming less energy, headless CMS platforms allow consistent content to be presented on mobiles, PCs, kiosks and other touch points. Digital transformation consultancy, Great State, used a headless CMS when developing the MyNavy app, giving the Royal Navy the flexibility to select and integrate the most appropriate third-party applications, so that the app can be updated with new features over time.
How is the public sector creating carbon-conscious sites?
Danish local council, Herning Kommune, commissioned digital agency, Kruso, to take a carbon-conscious approach to designing its website, so that users can choose to minimise CO2. With one click, all pictures and videos are removed and colours are muted, reducing energy consumption and CO2 emissions by up to 70 percent across the site.
Why did they pick on the pictures?
Pictures and videos increase the amount of data traffic transferred from the server to the device. Asking web designers to use newer image compression formats, such as WebP, or AVIF, will significantly reduce the amount of energy required to display images on the site.
GIFs are very resource-hungry and hard to compress, so presenting the same image sequence as a video can reduce data weight by 75 percent, thus reducing the energy required to serve the same content.
Using compression settings to full effect can reduce image weight by between 50 percent to 80 percent, without changing the user experience.
Combatting CO2 on the front line
Limiting custom fonts to the most commonly used characters can reduce font weight by more than 80 percent.
Sustainable web developers also recommend using WOFF2 font compression.
Unless licensing terms and conditions dictate that fonts must be hosted at a separate location to your website, it’s worth considering self-hosting fonts, as this will further reduce client/server traffic and energy consumption.
If you liked this content…
Leading with Sustainability: Building Environmentally Responsible Digital Strategies
Securing the transition: Considerations for device re-use and recycling amid changing regulations
Tackling scope 3 emissions in the public sector
Cybersecurity threats biggest networking challenge to public sector
Many public sector websites failing on accessibility
Stay close to your users
Selecting regional hosting reduces traffic between servers and users’ devices, reducing power consumption and improving page load speed.
Sustainable web designers advise using a content delivery network (CDN) to cache web content on edge servers that are geographically closer to your service users.
Your website administrators can control how long the CDN is allowed to store files by using regular HTTP headers. They can also see in the headers whether content is being served from the CDN or going all the way back to the master server.
Seek the shade
Asking your web designer to build sites that default to dark mode can reduce the amount of electricity consumed by device screens by up to 47 percent.
Blue shades use up more energy than reds and greens when they’re displayed on screens, so councils can also take this into consideration when selecting website images.
Turn off auto-play
Auto-play wastes energy. 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. If one in ten site visitors still watches the video, this saves 1.67 grammes of CO2 per page visit on average. That might not sound much, but after 100,000 visits, the site will have reduced the equivalent CO2 of a flight from Heathrow to Copenhagen.
These small changes demonstrate the measurable difference that thoughtful web design can make to operating more sustainable sites. We can each play our part.
How the tech giants help
Google, Microsoft and Amazon Web Services (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.
Asking suppliers how much CO2 is emitted from your service and what they are doing about sustainability can help your digital agency partner to make changes such as running services as functions and upgrading from legacy infrastructure. As an example, owing to Microsoft’s efforts to achieve carbon neutrality, websites that have been migrated to the new Microsoft .NET versions of Umbraco are at least 50 percent more efficient, leading to a significant reduction in energy consumption.
Google’s PageSpeed Insights, or GTmetrix allow web designers to analyse site performance and identify where they can optimise. For example, Brotli, Google’s lossless compression tool, reduces text-based files by around two thirds and is supported by 96 percent of browsers.
Web developers can use tools including Microsoft’s Emissions Impact Dashboard to monitor how much carbon is produced by all the services used across Azure and identify whether any resources can be removed to reduce environmental impact. The Microsoft Cloud for Sustainability API also allows web developers to apply the Emissions Impact Dashboard data to build their own carbon-reduction tools.
Nexer Digital’s Rick Butterfield advises, “The UK’s National Grid 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. 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.”
We’ve shared some of the main ways that digital agencies are already working to make public sector websites and mobile apps more sustainable. When planning a website refresh, or launching a new digital service, ask your digital agency partner what else they can do to reduce the carbon footprint. Optimising website performance consumes less energy and emits less CO2. The good news is that sites that are running well tend to improve the user experience too.
