A call for sustainability on the web.
This post was originally published at the end of December 2020 in an internal blog at Vizzuality. It has been slightly edited for external publication.
In October 2020, the online magazine Branch released its first issue: “A Sustainable Internet for All”. Through a dozen articles, you are presented with the Museum of the Fossilized Internet, a museum set in 2050, which brings back the web experience from 2020 and the horrible fact you will have to download 8724 pages of code to buy Jeff Bezos’ book on Amazon, and new concepts such as “Demand responsiveness” where a site adapts to the carbon intensity of the grid.
These articles are eye-opening. They led me to rethink the impact Vizzuality has in building for the web, and the personal impact I have as a software developer. Are we (am I) contributing to the web’s sustainability?
This post is the beginning of an answer, and a call to raise awareness.
The state of the internet.
Since I joined Vizzuality in February 2015, the average internet page size has increased by an alarming factor of 1.6 on desktop and 2.4 on mobile ¹. In 2020, an average mobile site took no less than 9.8 s to load on a good 3G connection and 3.7 s on a 4G regular one. Back in the day, it would only take 4.1 s and 1.5 s respectively ². For mobile users, the web has essentially become twice as slow in five years.
Why is that? Websites now use 0.7 times more custom fonts, 1.2 times more Javascript, 1.4 times more images, 1.6 times more styles (CSS) and 1,170 times more videos ³.
There’s also been a major shift in the technologies. Whereas pages used to render on servers, and Javascript would be used sparsely to add animation and interactivity, front-end trends are now that hundreds of kilobytes of Javascript are pushed to the browser so it can render pages itself. This “innovation” has allowed us, developers, to build Single Page Apps (SPA) that are perceived as fast, because the browser doesn’t reload when the user navigates from one page to another. Adversely, the amount of Javascript has drastically increased the initial page load and partly contributed to the obsolescence of millions of devices. Nowadays, Apple and other companies use the speed of loading and parsing code as a marketing argument to renew your soon-to-be-obsolete devices.
And with 5G, this will get worse. With speeds promised to be up to 20 times faster, we could genuinely expect the web to become instant, but history has shown this will not be the case: we will push even higher resolution images and videos, and even more client-side Javascript. And this is ignoring the fact that access to the web is fragmented. People with limited resources and connectivity (especially in the Global South) are barred from accessing a vast portion of it. Reducing inequalities is at the heart of the web’s sustainability, and one of the three challenges Vizzuality is set to fight.
And, we’ve not yet mentioned other concerns about 5G, such as the increase of cell towers to cover the same population area, or the need to replace your devices to even access it. For comparison, the manufacturing carbon footprint of an iPhone 12 is 58 kg CO₂ eq ⁴.
So the question is: is the web in 2020 better than it was in 2015? Is the growth worth the environmental cost? In 2019, it was estimated that the digital world is responsible for 3.8% of all the Greenhouse gas emissions, or double the entire aviation industry ⁵.
What is a sustainable web?
Sustainability encompasses a lot. In this article, I’ll refer to web sustainability as a state in which:
- A website emits as few emissions as possible due to its energy consumption. This includes the energy for the servers, the network grid and the users’ devices.
- A website functions properly on older and less-powered devices.
- A website is accessible from high latency and low-speed connections.
- A website is open for everyone, no matter their (dis)abilities.
Where’s Vizzuality at?
To answer this question, I analysed two projects I worked on in 2020. The first one, a map of wildlife tourism in Africa affected by covid was designed to be light and built to be performant on low connectivity networks. The other, Soils Revealed, could be described as a typical Vizzuality project: it features a map with dozens of layers, a complex legend with lots of settings, and an analysis section with charts.
Sustainability at heart.
In October, the release of the magazine coincided with the start of my work on a project about Covid and Wildlife Tourism in Africa. Vizzuality was asked to build a mobile app that could be used to map wildlife tourism businesses and communities affected by Covid-19 in Africa. The app would need to work on low-end mobile phones, with extremely poor and slow internet connections.
The African Collaboration Platform’s mapping tool is an interactive web-based application that aims to raise awareness and understanding of the areas in eastern and southern Africa that have been most affected by the collapse of nature-based tourism. The portal shows where nature-based tourism is particularly important (based on 2019 data, before the outbreak of the COVID-19 pandemic) and where areas important for nature are located. As part of the incubation of a larger COVID-19 response initiative, the tool was conceived by the Luc Hoffmann Institute, which aims to be the world’s leading catalyst for innovation to maintain biodiversity for all life on earth. The prototype was built by Vizzuality, with additional work carried out by Locational to identify priority areas. The tool is hosted by the Regional Centre for Mapping of Resources for Development.
Before starting any implementation, I took some time to analyse what this would mean practically for us. I wrote a five-page document with, first, statistics about our users (which devices they use, what their phone sizes are, which type of connection they have access to), second, a brief analysis of the current front-end trends (what the average page size is, what the impact of common front-end libraries is), and third, a list of recommendations.
Among these recommendations, you could find:
- Do not use custom fonts
- Limit the use of images
- Only use native HTML elements
- Avoid Javascript frameworks and libraries
- Rely on the back-end for computations and page rendering
With these in hand, the project’s designer Estefanía started to work on an elementary design. I must give credit to her for trusting me and adhering to the recommendations. Soon after, Tiago, the project’s back-end developer, and I started on the implementation. We re-used Posso ir?’s code, which relies on a back-end framework called Ruby on Rails that helped us shift all the rendering to the back-end, rather than the user’s device. The front-end was kept to a minimum, with only two dependencies: Mapbox GL to render the map, and a library to display modals.
At the end of the development cycle, I did a second report to assess the app’s performance and sustainability. I wanted to see if we had accomplished our goals of making the platform accessible to our users. And we mostly did!
Loading most pages is nearly instantaneous, even on regular 2G networks! And though the map takes a few seconds to appear, all the navigational elements are as fast as the rest. The accessibility is also very good thanks to the use of native HTML elements. In spite of these results, the map’s overall sustainability is not up to where I expected it. A deeper analysis revealed this is mostly due to the mapping technology: 97% of the page’s data and 40% of the requests can be directly attributed to Mapbox.
A typical Vizzuality project.
How does this compare to other projects? Can we replicate these scores? By no means is Covid Wildlife Tourism Africa a typical project. It was conceived to be performant from the very beginning and is very small in scope. So what about other Vizzuality projects?
Starting in March last year, I also had the chance to work on Soils Revealed. It’s a platform similar to Global Forest Watch or Resource Watch in terms of functionality, where the user is able to visualise and analyse the carbon stored in the soil. On the Explore page, there is a map that uses Vizzuality’s typical technology stack: Mapbox GL, our internal libraries, the layer-manager and vizzuality-components (for the legend), and other libraries to draw shapes on it.
By mid-November, I spent about a day analyzing the app’s performance and sustainability. I took this opportunity to tweak them both a little. Before getting to the results, I’d also like to thank the project manager, Susana, for giving me that extra time.
For the first phase of this project, we didn’t focus on mobile users. As such, the performance has been measured simulating a Wi-Fi connection.
The homepage’s speed and sustainability score are quite good, but the map’s score is below average. And for both, the accessibility is degraded, mostly due to interactive and non-native HTML elements, and complex layouts. If we assume the users will visit the homepage and the map, we can estimate that the site emits 19.8 kg CO₂ eq per month ⁶, or as much as driving a car 133 km ⁷.
Even more so than in Covid Wildlife Tourism Africa, the map is behaving poorly. I think it is attributed to two facts: first, the map is way more crowded with features, and two, Vizzuality’s own technologies (which were not used in Covid Wildlife Tourism Africa) are far from optimised for sustainability. On that matter, you can see below that more than half the payload of a simple map is due to our own libraries.
This means that, at the present time, not only it is nearly impossible to provide a fast experience for mobile users, but that in desktop scenarios, where more complex features are provided, achieving good performance and sustainability scores is laborious. On my own calculations in Soils Revealed, the total payload presented above weighs around 470 kB.
Conclusion.
Before concluding, I’d like to share what I’ve learnt through these experiments. I hadn’t really thought of the impact I had as a software developer, or of the complexity of making the web more sustainable. Reading the Branch magazine, and learning about the ecoindex (FR), I discovered levers on which I can pull:
- By moving the computations and the rendering of the pages to the back-end, most of the energy consumption is shifted from the user’s device to our servers, which we have control over and could potentially power with low-carbon energy such as renewables. Not only that, but we also extend the lifespan of the users’ devices by keeping the web simple, like it used to be.
- By reducing the amount of the data transmitted over the wire, we lower the power intensity of the network grid, on which we have absolutely no control. Consequently, we also speed up the loading of pages on mobile networks and contribute to a more open web, where people with limited connectivity can finally access our tools.
- By simplifying our designs and going for the essential, we lower the complexity of our apps and keep the user’s device alive for longer. This also facilitates the ease of use and accessibility of our products, especially for people with cognitive disabilities such as learning difficulties.
As much as I enjoy this subject, and even though I am willing to, this post is not an attempt to launch a new initiative. It is a call to raise awareness. Vizzuality may act for good, and actively help organisations fight climate change, biodiversity loss and inequalities, but this does not exonerate us from going further. We must, and we will go further.
At a time of ecological collapse, where the general population, companies, and governments are asked to make substantial efforts and changes, I believe Vizzuality has a moral and ethical obligation to do more too.
In this post, I went through my journey, my “awakening”, and I hope this can spark new conversations about sustainability on the web.
Thank you.
PS: I’d like to thank Estefanía, Susana and Tiago for reviewing this article and providing me feedback to improve it. I’d like to further thank the whole Vizzuality team for the response after its publication, and to Camellia for suggesting we make it public.
Further reads.
- Branch magazine
- CO2 emissions on the web, suggested by Susana
- Internet Health Report
- Sustainable Web Design
- Tiny websites are great
References.
[1] Source: HTTP Archive.
[2] Mobile internet connection speeds provided by Mozilla.
[3] In size (payload), not in number.
[4] Source: Apple.
[5] Source of the emissions of the digital world (which is more than just the internet): Green IT. Source of the emissions of the aviation industry: Our World in Data.
[6] Before launch, we estimated Soils Revealed would have about 180 users a day. We also assume a month lasts 30 days. The Greenhouse gases emissions given by ecoindex are upper limits as the browser’s cache was disabled during the measurements. Given these, the calculation is: 180 * (1.62 + 2.04) * 30 = 19.8 kg CO₂ eq.
[7] On average, a car emits 148.1 g CO₂/km in the EU. Source: European Environment Agency.
Clément is a front end engineer who cares about accessibility and sustainability. He adores his houseplants and pre-covid, he invented an auto-waterer to keep them alive while on holiday.
