DEV Community: Valeria Salis

Building a Sustainable Web: a practical exploration of Open Source tools and strategies

Valeria Salis — Thu, 13 Jun 2024 09:00:00 +0000

Introduction

In the past few years I've been deeply concerned about climate change. My journey on web environmental sustainability
started by chance when I stumbled upon the concept of "sustainable web".

I first learned how to create a better User Experience taking in consideration sustainability principles
and strategies, but it wasn't enough. I wanted to go deeper and understand more about the environmental impact of the web.\
In this blog post I will share my journey, the tools and the strategies I've come across and learned and, last but not least, the
role of Open Source and the relevance of its community aspect.

Let's start from the beginning

For me, the Internet has always been my happy place: it made me discover many of my passions and hobbies, it allowed me to learn new things, connect with people, entertain myself with some tv shows or movies and even work.

However, the Internet has various cons, and one of them is that, sadly, it is not very environmentally friendly.

"If the Internet was a country, it would be the 4th largest polluter" - Sustainable Web Manifesto

The sentence above is the opening sentence of the Sustainable Web Manifesto, and it has been the very first sentence I
read about web sustainability.\
It broke down the idea I had of the web being a "place" with only positive aspects and made me realize that, in reality, it
has some responsibilities regarding the environment.

In fact, the Internet is responsible for about 4% of total CO2 emissions, which
may seem like a small percentage, but it's actually double the emissions of the air transport sector ("only" 2%).

UX and Web Sustainability

The "first stop" of my journey was related to User Experience: on the occasion of UX Day 2023,
an Italian conference that took place in Faenza, I had the opportunity to bring my contribution with a talk called “UX and Web Sustainability”.

You can find the recording here.

If you've been following this tech blog for a while, you might have encountered my previous blog post about this specific
topic, but I will summarize the main points here:

sustainability also means speed, performance, usability and accessibility
applying sustainability principles will make our websites load faster and help users navigate them more easily
designing for the environment also means designing for everyone because when the majority of people are able to navigate our websites and applications, the energy required to run them won't be wasted.

Working towards a more environmentally friendly UX will make users happier.

Great starting point, wasn't it? It wasn't enough for me, though.

Cloud Native Sustainability Week

The second stop of this journey took place in October 2023 on the occasion of Cloud Native Sustainability Week, which
is a global event organized by the CNCF (Cloud Native Computing Foundation).

It's a series of local meetups around the topic of sustainability in the cloud native ecosystem: basically
is that time of the year when the local communities involved with the CNCF dedicate time to spread awareness and share content
(blog posts, talks, panels, etc.) about environmental sustainability.

You can find more information about the event here.

I had the opportunity to attend the meetup in Milan and contribute with a lightning talk about "how bad we use the Cloud"
and the consequences of our approach.\
The main takeaway I would like to share here is that we should be more aware of the data we store because approximately 90% of cloud data is used only one time.

We store data and then forget about it, but it's still there, consuming energy and resources.

As a software developer, what else can I do?

By that time, I had learned the importance of applying sustainability principles to the user experience, and the benefits not only for the environment, but also for the users. I had also learned that we need to be more aware of our data, how we use it, and its impact on the environment.

But UX and cloud are just two pieces of the puzzle, and in some ways on opposite sides of our applications.\
There's a lot more between UX and the cloud, so I kept going back to fill in the gaps I had in my head.

Green software for practitioners

One of the first resources I came across was the online course Green software for practitioners created by the Green Software Foundation (GSF) along with The Linux Foundation.

If you're not familiar with the GSF, their mission is to "build a trusted ecosystem of people, standards, tools and best practices for developing
and building green software".

Spoiler: later we will have a look at one of the tools they developed!

Getting back to the subject of this paragraph, if you're a software developer or someone involved in building, deploying, or managing a software application and you want to do so in a greener way, I would recommend the Green Software for Practitioners course as a starting point.

I recommend this course for several reasons, including:

it is an online course and entirely self-paced
it gives you a complete glossary and a proper introduction to the main topics around green software development

Today I will give you a "teaser" of some of the key concepts I've learnt from the course, but I highly recommend you to fully take it.

Main actions to reduce the carbon footprint of software

To reduce the carbon footprint of software, we must consider three main actions:

🍃 Energy efficiency, which consists of consuming the least amount of electricity possible
💻 Hardware efficiency, which consists of using as little embodied carbon as possible
🌱 Carbon awareness, last but not least, the purpose of this action is doing more when the electricity is clean and less when it's dirty (e.g., using demand shifting and/or demand shaping methods);

What you can't measure, you can't improve

The second topic I wanted to share in this blog post is the importance of measuring, which is also one of the main chapters in the course.\
Indeed, in order to improve the environmental sustainability of our software, we need to measure its impact on the environment.

Greenhouse Gases Protocol (GHG)

The Greenhouse Gases Protocol (GHG) is the most widely used and internationally recognized greenhouse gas accounting standard.
It divides emissions into three main scopes:

Scope 1, direct emissions from operations owned or controlled by our organization (or the one we're applying this protocol for)
Scope 2, indirect emissions related to emission generation of purchased energy (for example, electricity)
Scope 3, other indirect emissions from all the activities the organization is engaged in, including the ones from the organization's supply chain

When it comes to software, knowing the scopes your emissions fall into is challenging because it depends on your specific scenario.\
However, you will find some examples in the course.

Software Carbon Intensity (SCI)

The Software Carbon Intensity (SCI) was developed by the GSF and aims to give a score to
a software application in order to understand how it behaves in terms of carbon emissions.\
The SCI specification has recently achieved the ISO standard status: you can find more information in this article.

It's not a replacement for the GHG protocol, but rather an additional metric to more specifically address the characteristics of our software to make more informed decisions. The main difference between GHG and SCI is that the former categorizes emissions into scopes, while the
latter divides them into operational emissions and embodied emissions and, as its name suggests, it's an intensity rather than a total.

The SCI is calculated using the following equation:

SCI = ((E * I) + M) per R

E = energy consumed by a software system (in kWh)
I = location-based marginal carbon emissions (carbon emitted per kWh of energy so gCO2/kWh)
M = embodied emissions of a software system
R = functional unit, it is the core characteristic of the SCI and the reason why it "becomes" an intensity and not a total

What about the community?

The final step of this exploration will be about open source and the community aspect that inevitably contributes in some ways to our journey. For me, it has been a pivotal element related to environmental sustainability and tech.

Environmental Sustainability Technical Advisory Group

The very first community I became part of was the Environmental Sustainability Technical Advisory Group which is part of the CNCF. The TAG Env Sustainability's goal is similar to the GSF's: their mission is to "advocate for, develop, support and help evaluate environmental sustainability initiatives in cloud native technologies."

At the moment, the TAG has two main working groups:

the Green Reviews group (WG Green Reviews), which is more focused on technical issues, metrics and developing tools
the Communications group (WG Comms), which is more focused on spreading awareness and sharing content and the work done by the Green Reviews group

In the TAG, people are involved in different ways depending on their technical skills and/or interests, but the main thing I've had the opportunity to see is that everyone wants to do something, participate, and lend even a small helping hand to the currently active projects and discussions.
Having a community of people with different backgrounds and approaches to rely on, ask questions of, share content with, and discuss with is an excellent way to learn and achieve a more complete result.

This is what open source is all about: sharing, learning, contributing, and growing together.

Conclusion

In this blog post, I've tried to give you an example of a learning path a wannabe-greener-dev could follow, based on my experience and the tools and resources I've come across.

Environmental sustainability is a broad topic, and since there isn't a defined clear and linear path, it can be challenging for someone to get started, especially when we're talking about engineering and software development, since it can be challenging to even understand that our work has an impact on the environment.

Bonus: some other tools and resources

Here's a list of some other open source tools you might find useful in your journey towards a more sustainable web:

Developers page of The Green Web Foundation, in this page you can find some projects and libraries to try out and contribute too, such as C02.js, Grid Intensity CLI, Greencheck API and a lot more
Open Sustainable Technology, a website that collects a list of open source projects and tools environment related
kube-green, a tool that helps you reduce the carbon footprint of your Kubernetes clusters
Ecograder, a tool that helps you understand how sustainable your website is and gives you some tips on how to improve it; it's based on various open source libraries.

Along with the online tools, I would recommend you the following books:

Sustainable Web Design by Tom Greenwood
World Wide Waste by Gerry McGovern
How bad are bananas? by Mike Berners-Lee (yes, Tim Berners-Lee's brother)
Building Green Software - A sustainable approach to software development and operations by Anne Currie, Sarah Hsu and Sara Bergman

UX and Sustainable Web

Valeria Salis — Mon, 30 Oct 2023 09:00:00 +0000

Introduction

If the Internet was a country, it would be the 4th largest polluter.

This is the opening sentence of the Sustainable Web Manifesto, a collaborative project officially launched in 2019 by Wholegrain, a London-based agency whose specialty is the development of sustainable websites.
When I first read this sentence, I was a bit shocked and curious at the same time. It was eye-opening.

But, is Internet the real enemy?

We will start this journey with some data, then we'll talk about what we can do to reduce the emissions of our websites and applications and at the end we will answer THE question: does a more sustainable UX have all the features the users are already looking for?

Let's start with some data

Internet is responsible for about 4% of total CO2 emissions;
A single Google search produces a minimum of 1g to a maximum of 10g of CO2;
On average, Google processes about 47.000 searches every second, which means about 3.5 billions a day;
Websites emits an average of 1,76g of CO2 for every page that's visited.

These numbers may not mean much to you, so let's have a look at some data regarding more tangible activities:

Transport is responsible for about 8% of total CO2 emissions;
Air traffic is responsible for about 2% of total CO2 emissions;
Smoking a cigarette emits 14g of CO2;
An active freezer emits 40g of CO2 every hour.

You thought that 4% was a small and irrelevant percentage, did you? Well, let me rephrase: Internet CO2 emissions are twice as much as air traffic emissions and if we consider the worst-case scenario, a single Google search emits as much as smoking a cigarette.
Not to mention that Internet is becoming more and more present in our daily life.
From buying groceries to entertaining ourselves with some streaming content to even work, that 4% data is estimated to increase.

What does it mean to design sustainable websites?

Sustainable websites follow the six principles declared in the Sustainable Web Manifesto. They are the following:

Clean, websites should be powered using clean resources;
Efficient, we should use the least amount of energy and resources and re-use components whenever it's possible;
Open, websites should be accessible and clear for our users;
Honest, this one is linked to the previous principle and aims to specify that websites should not take advantage of the users;
Regenerative, our websites provide an opportunity to support greener choices such as accepting a longer delivery when we buy a product or compensate emissions by planting trees;
Resilient, our websites should work even at difficult times and conditions.

Starting from these principles we can define some best practices.

Green Web Hosting

The first one is linked to the first principle (clean) and it's about the hosting: we should choose a green hosting provider that uses renewable energy to power its servers.
Some of them can be found in the following list provided by The Green Web Foundation. If you want to, you can also check whether your website or a website you're interested in is hosted on a green server by using the Green Web Check.

Web Performance Optimization

A sustainable website is also a performant website: in these terms, sustainability equals speed.
This is because the slower a website is, the more energy it consumes. A slow website leads to the worst-case scenario when we talk about sustainability and UX:

users try to navigate a page of our website
the page requires some time to load
the page requires some more time to load
users close the page without even interacting with it.

Why is it the worst-case scenario?
Because it takes a various amount of resources to load a website, and if the user closes the page before the end of the loading process, all the resources that have been downloaded are wasted and with them also all the energy required to do so.

Content findability

We should ensure that users find the content they seek in the easiest and fastest way possible.
This is because if users can't find what they are looking for, they will probably try to find it somewhere else either clicking on various links in the same website or in a new one and consume more energy.

Usability

We should ensure that our websites are usable and efficient on different devices, browsers and bandwidths.

Practical tips

There are so many elements that can be managed to make our websites more sustainable but in this article we will cover only three of them: images, fonts and videos.

Images

Images are one of the main elements used in our websites to communicate something or visually represent a concept. However, images are resources that need to be loaded therefore require some energy dependent on their colors, size, etc. We as designers and developers need to ask ourselves some questions: is this image really needed here? Does it add something useful for the user? Is it accessible so that everyone can benefit from adding it to our website?

If the answer to all the questions is yes, then we can apply some strategies to reduce the carbon footprint of our image. The main thing is to use a sustainable-friendly format whenever it's possible and my recommendation is the .webp format.
The .webp format was developed by Google specifically for images that would be used on the web and it is optimized to enable faster and smaller images.

Webp lossless images are about 26% smaller than png images whereas webp lossy images can be a minimum of 25 and a maximum of 34% smaller compared to jpeg images.

Here you can find further explanation about the compression technique that backs up this format.

Fonts

The most sustainable fonts are of course system fonts because they are already installed in any user's device and do not need to be downloaded.
However, at this point you may be wondering: what about creativity? What about branding? System fonts are very neutral.

In fact, there are services like Google Fonts or even Adobe Fonts that come to help us with this problem.
Google Fonts, for example, includes more than 1300 font families and maintains more than 30 optimized variations of each font.
Google also provides the most efficient resource whenever we call one of its fonts.

The third option, the most creative one, is obviously using a custom font. In this case, we should use formats that provide the best compression such as EOT, TTF, WOFF and WOFF 2.0.

Videos

Videos are one of the most energy-consuming elements of our websites. Therefore, we should use them only when essential: they should enhance the user experience.
It’s best to reduce the number of videos on our website and minimize their duration to their purpose only.

Video & Autoplay

Yes, we will talk about one of the worst things that can happen to a user: autoplay.
Autoplay is a feature that is still very much used in some websites, especially news websites, that's why I decided to include it in this article.

It annoys users because it takes away their control over the content they are consuming and users want to be in control of what they are doing and what they are seeing.
Autoplay is the digital equivalent of a salesperson that comes to you at the entrance of the store to ask if you need something of if they can help you, and you're like this:

Not appreciated at all, right?
For people with disabilities this feature can be even more problematic because:

it can be difficult to understand where the sound is coming from;
it can get in the way of screen readers and make it difficult to navigate the website;
it can cause physical reactions such as seizures due to the content.

The user is obviously forced to close the page, and we've already seen that this is the worst-case scenario: think about all the resources that have been downloaded and wasted because of a pointless feature.

So, here's what we can do:

remove autoplay;
add play/pause buttons so that users can manage the video as they prefer;
add usability options and warnings about the content;
add subtitles so that users can understand the content even if they can't hear it.

At this point you may be wondering: why are we talking about accessibility? Isn't this article about sustainability?
Well, the answer is simple: accessibility is sustainability. Sustainable strategies and principles aim to include as many as users possible because only when everyone will be able to access the content of our website then the resources required won't be wasted.

Conclusion

So, is a more sustainable UX really needed?
Spoiler alert: yes.

We've seen through this article that sustainable choices indirectly lead us to what users are looking for, and that is: performant, accessible and usable websites.

Today users also tend to choose more sustainable products and services therefore it's a good practice to add some information about the sustainability of our website.
There are various tools that can help us with this task such as Website Carbon.
It requires an url and then returns information such as the amount of CO2 produced everytime someone visits the page, whether the website is running on sustainable energy or not, some tangible equivalents of the amount of CO2 produced over a year with a fixes amount of page views, etc.

Let me close this article the same way it started: with a quote.

The internet should be a public good - healthy for the planet and for the people who use it.

DEV Community: Valeria Salis

Building a Sustainable Web: a practical exploration of Open Source tools and strategies

Introduction

Let's start from the beginning

UX and Web Sustainability

Cloud Native Sustainability Week

As a software developer, what else can I do?

Green software for practitioners

Main actions to reduce the carbon footprint of software

What you can't measure, you can't improve

Greenhouse Gases Protocol (GHG)

Software Carbon Intensity (SCI)

What about the community?

Environmental Sustainability Technical Advisory Group

Conclusion

Bonus: some other tools and resources

UX and Sustainable Web

Introduction

Let's start with some data

What does it mean to design sustainable websites?

Green Web Hosting

Web Performance Optimization

Content findability

Usability

Practical tips

Images

Fonts

Videos

Video & Autoplay

Conclusion

References