The COVID-19 pandemic has led to an explosion of data traffic volumes on the digital highways of the World Wide Web. It is not just video conferencing that is causing this, but also online shopping and the use of various digital services and products. It is high time we take a closer look at the environmental footprint of digital services. This is not a new issue, but one that is becoming more relevant in the current situation.
Servers and Mobile Phones are Running Hot
There is so much excitement about digital transformation that people tend to overlook the environmental challenges associated with this development. Aside from research on the electricity consumption of Bitcoin mining, the World Wide Web rarely features in the many debates about the climate crisis. Still, the greenhouse gas emissions generated by ICT make up an approximate 3.7% of global emissions, which is almost twice as much as the oft-maligned aviation industry. A prognosis from 2018 expects this value to shoot up to 8%, possibly even 30%, by 2030. The streaming of web content contributes significantly to this steady increase. In some networks, it makes up almost 80% of data traffic.
But streaming is not the only culprit eating up more and more network capacity and energy. Websites are also growing in size. On 1 March 2016, the median size of a mobile website was 960 kB. Four years later, that figure had almost doubled to 1,885 kB.
Particularly in times of crisis, this becomes problematic. In some places, the network infrastructure simply cannot keep up with the additional load. We must also not forget that even at the best of times, not everyone has a good internet connection – or an internet connection at all. This is why it is time to use our resources in a more provident and sustainable way.
Visualising Invisible Energy Consumption
The Website Carbon project attempts to convert the energy consumption of websites into a CO2 footprint. The project initiators have based their calculations on the amount of electricity needed to provide, transmit and consume one gigabyte of data, which they estimated as 1.8 kilowatt hours. On the project website, you can calculate the greenhouse gas emissions of a website by entering its URL. The results compare the CO2 consumption with several other examples. Even if the figures are based on assumptions and can never fully reflect reality, the calculations are food for thought.
As a provider of digital products and services, our most effective tool to improve the sustainability of a website is the data centre. The efficiency of these keeps improving, but many of them are run on affordable grey energy. In the US, where most of the global internet traffic is still being handled, they use coal-based energy. Coal mining and burning for energy generation has devastating effects on humans and the environment. Our choice of hosting provider or consumption of streaming content has a direct impact on the quality of life of entire populations. This example just goes to show how connected and interdependent we all are and that seemingly small and insignificant everyday decisions can have a huge impact. It is up to us to demand sustainably operated data centres in calls for tender.
But it is not just website and application hosting that consumes energy. We also need energy to transmit and consume our content. As producers of web content and websites, we have a range of tools on hand to optimise consumption. We need to understand how networks work, use clever caching strategies and try to only load as much as is needed.
It is not just website and application hosting that consumes energy. We also need energy to transmit and consume our content.
Marius Bleuer
Expert Frontend Architect
We Are Part of a Bigger Picture
As developers, we are faced with a dilemma. On the one hand, we want to create inspiring products for our customers, help them open up new markets and sell products in innovative ways. But on the other hand, we cannot help but see ourselves as contributors to an increasingly large global challenge. There is no doubt among scientists that it is going to take global swift and joint action to turn the tide.
15 Ways to Sustainable Digital Services
Hosting digital services and products in an infrastructure that uses renewable energies is the key approach. But the design and development of digital services and products also offer various opportunities to shrink the environmental footprint. As Steve Sounders found back in 2008, web performance optimisation goes hand in hand with the provident use of resources.
The optimisation journey starts with sound data: Only if we know where we stand will we know whether we have improved. The best approach is to use a frontend performance monitoring tool that allows you to block resources from certain domains. This way, you can prevent third-party tools from influencing the measured values and document their influence where necessary.
Once you have determined the start values, you can start optimising. Many performance rules are widely known but are often forgotten in practice.
These are the 15 most important ways for us developers to optimise the delivery and rendering of digital services and to conserve energy:
Activate HTTP/2 on the web server: The main thing is to correctly configure the data prioritisation. Thanks to multiplexing and compressed headers, in most cases this speeds up the rendering of the website without additional optimisation. The right prioritisation also ensures that rendering-critical files are delivered first.
Use Content Delivery Networks (CDNs): The CDN distributes the files to several geographic locations. This way, files can be consumed faster, which can in turn have a positive effect on the energy consumption of the device.
Activate Gzip and Brotli Compression on the web server: Brotli, like the more widely know Gzip, is a compression algorithm. Brotli is more efficient than Gzip. However, it requires more working memory and computing power on the web server, which would in turn lead to unnecessary energy consumption. That is why we recommend encoding the assets in the build process and only rendering them on the server via the static option. Jeremy Wagner explains how this works in his article on Brotli static compression. CDN provider Fastly documented which files should be compressed. In most cases, these adjustments lead to a significant reduction in the transmitted data volume.
User server-side rendering: Server-side rendering means that certain things only need to be done once on the server instead of doing them on every end-user device.
Use server-side rendering with upstream caching system: As long as nothing changes on a page, it should not be compiled from scratch every time it is called up. Therefore a static builded site served from a CDN could be an even better option.
Consider code splitting: As soon as HTTP/2 is available on the server, we can start making the code more granular. Ideally, we would only deliver what is required for the page that is currently being displayed. The granularity of the splitting would ideally also be determined by measurement. Splitting the code not only helps accelerate the loading of the page. It also ensures that a change in one module does not require invalidating the entire CSS or JavaScript file and removing it from the user’s cache. This can potentially save you a lot of requests.
Use long-term cache headers: The longer a file can be stored on a user’s device, the better. As long as your cache invalidation works smoothly, you can use very long-term cache headers.
Use lazy loading: Where possible, assets should only be loaded when they are actually being used and looked at. This is true for images but also for JavaScript or CSS files that are only needed for specific visitor interactions. The challenge is to not load them too soon or too late, so as not to affect user experience.
Use responsive images: Even though these days, there are many ways to optimise the way images are provided to devices, there is still a lot of unused potential out there. In many cases, the images are rendered way too large, which not only leads to longer download times, but also to higher memory usage.
Automate the processing and rendering of images: To quote Google Engineer Ilya Grigorik: “Automation ftw! If you’re hand optimizing images, you’re doing it wrong.” With the right configuration, automated services will ensure that images are rendered in the best possible constellation for the respective browser. This way, you can save between 30 and 50% of data traffic without a perceptible drop in quality.
Dark mode: Dark mode is a rather divisive issue. Some people like it, others find it very tiresome to read white text atop a dark background. It is a fact that dark mode has a very positive effect on energy consumption in OLED screens. Initial tests have shown energy consumption to drop by up to 30%, depending on the mobile device. This effect does not occur on LED screens.
Use Intersection Observer: The Intersection Observer API allows us to check in modern browsers whether an element is currently in the visible part of a screen. We can use the Intersection Observer to only start actions that require a lot of processing power when they become visible. We can also use it to end CPU-intensive actions such as the animation of an autoplay video or carousel once they are no longer visible. This is another simple trick to avoid wasting energy.
Avoid reflows: Ideally, the website should jump around as little as possible while loading. Every reflow forces the browser to re-render part of or the entire page, which requires energy. This can have a measurable effect, particularly on mobile devices. For images, this can be avoided with a placeholder blocking the required space. Currently, there is work underway to make the browsers do this, which would make any manual adjustments unnecessary.
Use a Service Worker: Mobile devices in particular tend to have a small browser cache. Even if we set long-term cache headers for our assets, they may still be displaced from the cache sooner or later. With the right strategy, using a Service Worker allows us to save our static assets (e. g. JavaScript, CSS, SVG icons) and contents to an individual cache controlled by the developers. As Mathias Bynens from Google writes, no parsing or compilation is required for JavaScript files stored in the Service Worker when they are called up repeatedly. This is a significant advantage.
Establish a Design System: Especially in large companies, a Design System helps to prevent several teams from building the same module in slightly different variations and instead encourages the creation of reusable, framework-agnostic components.
Of course, this is not a comprehensive list. There are numerous other ways to optimise the delivery and consumption of the websites we create and the products we advertise on them.
In e-commerce, for instance, there are many options to employ smarter user guidance and subtle text clues to nudge users in a more sustainable direction. For example, customers could be made aware of the fact that it requires more energy for delivery companies to repeatedly attempt delivery.
Finally, good web performance always leads to increased accessibility, for people with disabilities, people using older or slower devices and also for people living in areas with bad connectivity.
Marius Bleuer
Expert Frontend Architect
The Power of Small Steps
Some may find themselves wondering whether this isn’t taking things to the extreme and whether this wouldn’t be extremely costly to implement. Climate scientist Peter Kalmus has something very apt to say about the first part: “You wouldn’t dream of leaving your water taps wide open when you’re not using them; I feel the same way about electricity. Electricity is precious.”
This is a basic principle we should always bear in mind when developing digital services and products. We should optimise wherever possible. Of course, the overall effect depends on the size of the website and the number of people and services consuming its contents. But a lot of the time, optimisation starts with the small things. We all know about the cumulative effect small changes can have. Once you have spread the knowledge and created an awareness of this, developer teams will try to achieve this new standard. As John Rossman put it: “In a high-standards culture, doing that work well is its own reward – it’s part of what it means to be a professional. And finally, high standards are fun! Once you’ve tasted high standards, there’s no going back.”
The cost aspect is more difficult to assess. Initially, you need additional knowledge to be able to implement the measures correctly. But since these optimisations usually have a positive effect on business, the investments pay off in the long run. It is important to identify the values that are relevant for your website and need to be measured. You also need to bear in mind that some optimisations take time to have a measurable effect.
Finally, good web performance always leads to increased accessibility, for people with disabilities, people using older or slower devices and also for people living in areas with bad connectivity.
In particular, satisfying performance on older devices also helps curb the ubiquitous desire for new devices. Why get a new device if the old one still performs perfectly well?
I am aware that this is a complex and multi-faceted issue. That is why it is important to me to show how even small changes can make a huge difference. By introducing an image CDN, we were able to save 80 terabytes of unnecessary data transmission for the users of sbb.ch over the past 16 months. Making a conservative estimate, we were able to conserve around 12 tons of unnecessary greenhouse gas emissions. According to the United States Environmental Protection Agency, this is roughly the amount of emissions you would generate when charging 1,5 million mobile phones.
I would like to invite you to stop for a moment and think about how you can change the way you act and the decisions you take to contribute to a more sustainable World Wide Web.
Contact for your Digital Solution
Book an appointmentAre you keen to talk about your next project? We will be happy exchange ideas with you: Melanie Klühe, Stefanie Berger, Stephan Handschin and Philippe Surber (clockwise).
Contact for your Digital Solution with Unic
Book an appointmentAre you keen too discuss your digital tasks with us? We would be happy to exchange ideas with you: Jörg Nölke and Gerrit Taaks (from left to right).
