20 ways to design greener digital services

‘Digital transformation has fundamentally changed the way we work, learn, bank, shop, sell, and seek entertainment. However, as we bring more services online, we need to be mindful of their environmental impact.

In 2020 it was estimated that the ICT industry was responsible for 3.7% of total global CO2 emissions. This percentage is expected to double by 2025.

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

How websites consume energy:

Looking at a typical digital service, around 20% of the energy is used by the server, another 20% is spent transferring data between the server and client devices, and 60% of energy is consumed on the client device. Web designers can make multiple micro-optimisations that make a real difference to the amount of energy consumed by servers and devices. In fact, we’ve identified at least twenty:

Reduce server energy consumption:

Typically, better website performance consumes less energy and emits less CO2. The good news is that improving website performance tends to make users happier and increase conversion rates too, which also aligns with business goals.

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. These are sustainable design practices that help sites to run more efficiently and minimise energy use. Thinking about the environmental impact at the website design stage enabled Tangent to reduce a client’s CO2 emissions from 1.44g down to 0.2g for every homepage visit.

Process only once:

Many organisations have static websites and pre-render the content so that it runs every time it’s published in the content management system (CMS). However, pre-rendering risks making the server work harder, thus consuming more power. For a website that has 10,000 nodes, pre-rendering ten times a day means that there’s a high likelihood that content will be rendered that isn’t relevant to all visitors and will never be seen. Rendering on demand and caching pages will save a lot of extra server processing.

Use a Content Delivery Network

Using a content delivery network (CDN) is considered best practice as it places content and services closer to the user. Often the CDN also works as a distributed cache so that all the processing that happens in the CMS can be handled on the CDN. Just by using regular HTTP headers, website administrators can control exactly how long the CDN is allowed to store your files. It’s important to be aware that session cookies and headers may influence how the CDN is allowed to store things, so it’s advisable to test it out. It’s possible to see in the headers whether they're serving content from the CDN or going back to the master.

Select regional hosting:

It’s logical to select hosting regions that are closest to your organisation, or users. However, it’s important to check whether the subsea cables that connect the internet do actually provide a closer connection between your users and your hosting region.

Consider efficiency as well as proximity:

One of Umbraco’s US partners moved from a Las Vegas data centre that used 19% renewable energy to an Oregon data centre that uses 90% renewable energy and is cheaper. That makes a significant difference for an enterprise running thousands of servers.

Pick your processing times:

Most software engineers are accustomed to thinking that processing needs to happen in the middle of the night. But that no longer applies if your servers run on solar power. Consider your data centre power sources to see which processing times are most appropriate for your organisation.

Select sustainable suppliers:

Choose vendors wisely. Ask them how much CO2 is emitted from the usage of your service and what they are doing about sustainability.

The biggest public cloud providers today are carbon net neutral, meaning that wherever possible they run on renewable energy, and, when they cannot, they will compensate for using fossil fuels by planting trees, or funding wind energy projects and other initiatives that benefit the planet.

Consider all the vendors in your architecture and think about what they are doing to reduce power consumption and CO2 emissions. 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.

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

Reduce power consumption on devices:

When designing sustainably, changes to browsing, screen brightness and CPU are the three most important changes developers can make.

Browsing the internet is the most resource-hungry process on smartphones. Avoiding the transfer of files makes the biggest difference to reducing power consumption.

Receiving website images on an end-user device is resource-intensive. The average website today contains 2.3 Megabytes of content, for the most content-heavy it’s 9 Mb. On mobile, it’s even higher and we've seen a 6% increase in mobile page weight over the past decade. This presents developers with an opportunity to optimise images and text, reduce power consumption and CO2 emissions.

Default to dark mode:

Mobile phone screens consume lots of power, especially modern screens, which are extremely bright to allow the display to be seen in full sunlight. Web developers building sites in dark mode, or setting sites to default to dark mode, can save up to 47% of power consumption.

Make server requests smaller:

Reducing the load that is moved over the wire is a big sustainability issue. For data-intensive websites that require real-time processing, consider using a service like WebSockets to compress traffic. However, if your website is handling smaller assets that don’t need to be real-time, then using regular server requests is better from a sustainability standpoint.

Optimise images:

Using compression settings to full effect can save from 50% to 80% of the page weight without changing the user experience. Consider which settings work for your scenario and then load it to your web server so that images automatically compress.

How big does your hero image need to be? Does your mobile audience really need it to be double-sized? Instead of serving the same image in two different sizes, could the same-sized image be used for website and mobile,?

Avoid GIFs:

Making efficient animations is another process that can be easily optimised. GIFs are hard to compress and are very resource-hungry. Presenting the image sequence as a video can reduce the data weight by 75%. There are no changes required, it’s simply a different format.

Turn off auto-play

As users, we shouldn’t allow anything to autoplay, particularly video. It’s really wasteful in terms of data traffic. Web designers can place an image on the page, so that the video only plays when users click on it. If one in ten visitors to your site clicks on the image to watch the video, and it’s likely to be fewer than that, serving an image instead of a video saves 1.67 grammes of CO2 per visit to your website.  It takes just three lines of JavaScript to achieve this sustainability change. After 100,000 site visits, the site will have reduced the equivalent CO2 emissions of a 977km flight from Heathrow to Copenhagen: demonstrating the tangible difference web developers can make to sustainability targets.

Reduce custom fonts:

Custom fonts often contain multiple characters that are rarely used. Web developers can make a sustainability difference by reducing this down to the most commonly-used characters. By doing this, one of our partners reduced the 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, to reduce client/server traffic, consider self-hosting.

Compress text

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. Yet a quarter of websites still haven’t got compressed text.

Reduce redirects

Over the past decade, web developers have added a redirect if they move any pages, to maintain Google page rank. Redirects create extra traffic. Headers are the final stage of transferring information and assets from data centres to client devices. Redirects mean this process has to be repeated.

Instead of having a redirect, by using a simple HTML tag, developers can tell Google where the original URL for a page is and then serve the content, thus saving an extra server request.

Balance sustainability and security

The exception to tip 16 is changing from HTTP to HTTPS. Don’t sacrifice security to save a single redirect. But with HTTPS, web developers can use a different feature: HTTP Strict Transport Security (HSTS) to prevent man-in-the-middle browser attacks by instructing the browser not to complete the request to the domain without HTTPS.

Minimise website postings

Once considered best practice to drive traffic, increasing website postings duplicates DNS processing. Minimising the number of postings is a more sustainable approach.

Apply lazy loading

Lazy loading involves putting elements in the JavaScript DOM, so that the browser loads them before they're actually in the viewport. This is a great way to save data for images and videos. Be aware that lazy loading changes the order in which website resources are loaded. 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.

Use Service Workers

Tests carried out by Meta revealed that HTTP caching only works about 50% of the time, so browsers are duplicating server requests anyway. Service Worker is a new mechanism that allows web developers to write their own caching that is persistent and reliable. The downside is that this entails more administrative overhead to manage how long the data is stored and so on. To address this, Google has a tool called Workbox, to handle all your service workers. This provides a cache that you can count on.

Thoughts for the future:

Adopting a sustainable design mindset encourages us to keep querying which web elements are genuinely necessary. The good news is that web developers can make lots of incremental changes that add up to a big difference in overall energy consumption and CO2 emissions on a website.

Digital agency, GIBE Digital, recently hosted the Umbraco Spark innovation conference, where 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.”

Readers who want to learn more about sustainable design can visit the Climate Action.tech which has a community and Slack channel to support developers who aim to build sustainable websites every time.