Contents
The web is currently unsustainable, but we have a lot of ways to improve the way we create digital services. All people working in tech can do something—and we have to. It might also challenge how we think about accessibility, personal data and business models.
The environmental footprint of the digital world seems intangible to most. Yet our digital systems generate more emissions than the aviation industry.
According to a study by the GreenIT group 1, this current annual footprint results in:
- 6,800 TWh of primary energy (PE)
- 1,400 million tonnes of greenhouse gases (GHG)
- 7.8 million m3 of fresh water (water)
- 22 million tonnes of antimony (ADP)
Based on these figures, the digital world’s contribution to the footprint of humanity represents:
- 4,2% of the Primary Energy Consumption
- 3,8% of the Greenhouse Gas Emissions
- 0,2% of the water consumption
Look it up, it’s really a lot. Who’s to blame for that? Let’s see.
The unbearable weight of the web
Each minute, millions of clicks and content are sent on the internet. 80% of the global bandwidth is used for streaming (on demand, Youtube and pornography are the top 3 contributors).
However, the main impact does not come from our usage of the web nor is it on the data centres. The main offenders are the devices we use. In each of these, there are a lot of non-renewable resources. Most of the time, they are built and disposed of in unacceptable conditions. On top of that, we own too many devices, change them too often and most often do not recycle them. Truth be told, they often fail us unexpectedly. Because of planned obsolescence, some might say. Sure, some people want the latest smartphone. What else can you do when the manufacturer stops maintaining the one you already own?
Most of the time, we change our devices not because they are broken, but because they lag.
Our devices lag mainly because websites and applications have gone out of control—websites are too heavy, overloaded, filled to the brim with dark patterns, images and videos.
As users, we must take care of our devices and keep them as long as possible. Reducing the number of connected devices helps a lot too, as does reducing the number of flat screens.
But the people who produce our digital services must act to reduce the load on these devices. Eco-designing, as we will see, is a good starting point. Yet it might imply rethinking the web and how we perceive its users. Let’s start by looking at the responsibility of web developers.
The state of the (unsustainable) web
To reduce the environmental footprint of our websites, we have to make websites lighter and keep the UX as fluid as possible. The user must find the website easily and get to the service or information they came for. This implies working on usability and keeping away from dark patterns.
One practical way to reduce the footprint is to ensure the pages are as light as possible. The heavier they get, the less likely are users to even see your website.
There are two things to keep in mind. Firstly, most people don’t have the latest smartphone or even a decent, affordable internet connection234. Secondly, there is the topic of accessibility. Your website has to be as easy to use as possible56.
Page weight
Websites are heavy, and it’s getting worse.
The median size of a web page is around 1900Kb and contains 74 requests. Since 2018, the size has increased by 434 Kb on desktop and 179Kb on mobile. So much for the bandwidth and overall performance. Keep in mind that not all people have unlimited mobile data or even a reliable internet connection.
Sure, images and media are to blame. But Javascript (JS) also has its share of responsibility. CSS, too. Let’s go deeper.
What makes websites heavier
Looking at the stats from websites, we can easily explain the weight of web pages. Here we discover a lot of bad practices, whose remedy we’ll look at in eco-designing.
For half of the websites on the internet:
- More than 373Kb of JS is used. Frontend libraries like React and others surely have a part to play in that. jQuery, too. Lighter alternatives exist. As a developer, ask yourself if you really need that. You may need a certain functionality, but probably not the whole toolbox.
- On average, it takes almost 2.5s to load the JS alone. Yes, you read it right. Given that most people will give up on a mobile website if it takes more than 3s to load, it’s a problem.
- More than 18 requests are needed just for loading the JS scripts.
- More than 6 stylesheets are used.
- Images weigh a total of more than 1Mb.
Here are some other alarming stats:
- More than 83% of the websites use jQuery. Do they really need such a complete toolbox? Some website owners probably don’t even know they use jQuery since it is shipped with Bootstrap (but not for long) and some WordPress plugins and themes among other things. Yes, Bootstrap getting rid of jQuery could be a huge step forward towards a more sustainable web. This will be the case starting with Bootstrap 5.
- Speaking of Bootstrap, it is still used by nearly a quarter of all websites. Do they really use all its features?
- Less than half of the websites use a print stylesheet. The web was supposed to print less stuff. But, if we have to print, it’s always nice to have a dedicated stylesheet to remove most of the cosmetics. Spoiler alert: we print a lot more since the arrival of the web, which is a good illustration of Jevons’ Paradox.
- Most of the images are resized by the browsers, which means that we send more data than we needed by the device.
- Speaking about optimizing images, only 4.2% of the websites use WebP.
- The number of DOM elements keeps increasing, and their distribution is quite alarming. More elements means more complexity, which means less performance and a greater environmental footprint.
- And it gets worse when you look at the most used elements. So much for accessibility and semantic HTML. Not to mention all these iframes. They are generally not great for a lot of reasons (accessibility, security, performance) but iframes are still widely used, for example when embedding a Youtube video or a social media feed on your website.
Technical optimizations
Finally, let’s talk about some technical optimizations which can help your users get faster (and lighter) websites.
Green-IT Analysis is a browser addon which will improve your browser DevTools by measuring the environmental impact of websites and checking for good practices. It is available on Firefox and Chrome.
- If you haven’t done it yet, optimising images is a good starting point. They catch the eye but don’t have to slow down your user. Thankfully, web.dev provides all necessary information for that! Maybe you could give CSS Sprites a try, too. And keep in mind an old saying: if you’re optimizing images manually, you’re doing it wrong. If you want to make it as easy as possible, include it in your workflow.
- Most of the websites don’t use text compression. Most of the elements you use on your websites are basically text (HTML, stylesheets and scripts). The gains of text compression could be huge7. Minifying them keeps things even better.
- There’s still a lot to do about caching. Users shouldn’t have to reload everything every time they come back to your website8. CDN can also be a good way to reduce the environmental footprint by shortening the distance between your users and what they load from your website9.
- Maybe you don’t need jQuery or your fancy JS libraries. Sure, they are useful. But they are also massive and filled with some functionalities you don’t need. If you think you really do, look for lighter alternatives.
In the end, the benefits from these optimizations could be huge. Most of these optimizations are well documented because they are related to web performance optimization. It might take some research on your first try, but it’s really worth it.
However, the environmental impact of your website isn’t limited to the possibility of technical optimizations. What about all the clutter? Do we need all these images, videos, social media feeds and share buttons? And all these functionalities most users will never use?
Now let’s blame the designers.
Functional sobriety
Even before technical optimization, there are huge potential gains by choosing not to include some stuff. Here are some recommendations for designers:
- Less images, less videos, social media feeds and share buttons.
- Do you really need comments on your articles?
- Choose your fonts with care and optimize them.
- Like a third of the websites, you might be using WordPress. Sure, it does everything you want but do you need all these functionalities? Optimize it or look for the JAMStack.
- Do you need a native mobile app when the gains from a Progressive Web App (PWA) could be huge? Take a look at PWA as it might improve the user experience of your website.
- Do users really need Google Maps embedded on your website to find you? Openstreetmap does the same without all the trackers (more on that later) and, most of the time, a simple (optimized) picture of a map does the job.
- Do you really need a carousel? I strongly believe your users don’t.
- Once upon a time, everyone around wanted a forum. See what’s left of that.
When eco-designing for the web, you must focus on a digital service. You can analyze a website or application, but the real focus is the user experience. What is the purpose of your user? What do you provide for them? It could be booking a train ticket, reading the latest news or even chatting with fellow gamers. In the end, this is what you will work on to enhance the user experience and, therefore, reduce the environmental footprint. By focusing on the users’ purpose, you can keep in mind what is essential to your user and remove what seems superfluous.
Also keep in mind that all websites are not supposed to stay online forever.
If you have some stats on your website, use them to look for unused functionalities and pages. Speaking of stats, let’s talk about analytics and ads.
Surveillance capitalism
Back in 2015, ads took 39% of the mobile data. I don’t suppose it got better since then.
Most of the things you use on the web are free—mostly “thanks” to ads. That means lots of images, videos and info everywhere on the web distracting you from what you want. But it gets worse: those ads are not randomly chosen. Enter the age of surveillance capitalism and microtargeting.
Some twenty years ago, you went to Tripod and saw ads, carefully planted on the pages. Until some folks realized it would be better to choose the right ad for each page. Just because you want to learn how to make an egg sandwich doesn’t necessarily mean you want to buy a new car. So began the age of contextualized ads. That means choosing what ad to display depending on the content of each page. Every time a user clicked on an ad, the owner of the site earned a little money. It was another good reason to produce quality content.
Some years later, Google and other tech companies decided to up their game by focusing the choice of the ads on the user. Back in 2000, the Silicon Valley tech startup bubble was threatening them and it was more of an “evolve or die” situation. Through trackers and cookies, a lot can be learned about what you did, who you are and what you like. Through prediction algorithms, it is finally possible to give you THE ad you unknowingly want. Browsing Facebook, you see that product on Amazon you were looking just the other day. Watching videos on Youtube, you get suggestions related on that other hobby of yours (yes, corgis, we’ve all been there). “Allow us to know your location and browsing history. It’s not for us but for you!”
Of course, these prediction algorithms need to be fed, hence the multiplication of trackers and cookies.
Ad tracking is a huge invasion of privacy, and it weighs a lot in your web pages. Since the arrival of GDPR in 2018, some companies had to learn how to work without cookies. Given the choice to allow cookies or not, some users refused them altogether. On some websites, it could be as high as 90% of users opting out of cookies. Some newspapers suddenly had to learn how to make a living without microtargeting and went back to contextual ads. Guess what? They increased their revenues. There is a (still slow) rise of awareness around ads. Also keep in mind that microtargeting greatly helps the proliferation of fake news, misinformation and extremism.
If you really want to implement ads on your website, at least do it properly. And if you need analytics (which is great in order to know what your audience wants from your website), look for alternatives to Google Analytics10. Finally, privacy by design might be a good angle to rethink the business model of your website.
Other Benefits
We just read many good reasons to create a more sustainable web and act for the planet. But sometimes this is not enough. Here are some benefits to business.
Eco-designing digital services results in a better user experience: increased performance, easier-to-implement accessibility and also better security by reducing the attack surface by removing superfluous tools and functionalities. All of which can greatly improve your SEO. Also remember that a better user experience often proves better for your business.
Nowadays, with all the concerns about climate change, communicating about contributing to a sustainable web can be highly beneficial to your brand image.
You might also want to stop using Dark Patterns and do your share to fight the attention economy.
Final tips and resources
Here are some guidelines to keep in mind:
- As with performance and accessibility, use a holistic approach. Keep only functionalities truly useful to your user
- Optimize UX/UI to help the user reach their goal faster
- Choose your technical stack with great care by keeping in mind what you want to achieve. When you choose a library or framework, look for a lighter alternative. When you use a framework or CMS, look for ways to optimize it
- While coding, use the Web eco-design check-list (PDF). Here, your first steps should be towards optimizing images, using caching, CDN, minifying text assets and compression
- Find a green web host
- Keep in mind that the published content should be optimized too
- Keep applying good practices while updating your website. It might be useful to monitor your website. With each update should come a quick audit. When your website is not useful anymore, take it offline.
And some resources to go deeper:
6. See the WebAIM Million
7. See the compression section of the Web Almanac 2019
8. See the caching section of the Web Almanac 2019
9. See the CDN section of the Web Almanac 2019
10. Alternatives to Google Analytics
https://www.offen.dev/
https://volument.com/
https://matomo.org/
https://goaccess.io/
About the author
Laurent Devernay is an advocate of sustainable technologies in France, holding regular talks and events on the subject, collaborating with GreenIT and the Institut du Numérique Responsable.