What is the carbon footprint of my website?
As a web developer and being sensitive to the climate change, I am necessarily interested in the impact of our digital uses on the climate and good practices to reduce this impact. So I wanted to know the energy consumption of a visit to my site.
Some numbers
Let's start with some figures: according to The Shift Project, in 2019 , digital represented 3.5% of global emissions. One might think at first that this represents a small part, but this figure is nevertheless equivalent to the carbon footprint of air traffic, which is renowned for its bad impact on the climate. And above all, the digital carbon footprint increases by 6% per year, which means that it doubles every 12 years. Digital carbon emissions are broken down as follows:
- 63% for the use of digital services
- 37% for the terminals production
Even if the development of new features often pushes users to renew their devices and therefore contributes to the production of new terminals, I will rather focus here on use since that is where developers have a direct impact. Emissions due to the use of digital technology are broken down as follows:
- 60% for user terminals
- 18% for networks
- 22% for data centers
The Jamstack, an ideal solution?
As explained in my previous article, I trained in React.js last year. In the process, I discovered the world of the Jamstack which consists of pre-generating the pages on the server and directly send them to the client when he visits the site.
Instinctively, I told myself that this technology should have a positive impact on the carbon footprint since once the client has loaded the page, there are no more requests sent to the server. However, we have seen above that the majority of emissions come from the user's terminal.
This is even more true with the use of Single-Page Applications where the HTML of the pages is generated on the client side by JavaScript. In this way, we shift the energy consumption from the server to the client. And we can assume that servers have a better performance than users machines.
The use of the Jamstack still has a positive impact thanks to the absence of queries to the database. But if the user interface is not optimized, this gain will quickly be canceled out. It is therefore not a magic solution but it is indeed a good practice to use when possible in a global eco-design approach.
Let's analyze the consumption of my site
To go further, I wanted to test on a concrete case and what better than my own site? I therefore used the GreenFrame tool which allows me to obtain an estimate of the carbon impact of a visit to a site.
A visit to my site therefore consumes 27 mg of CO2 equivalent, which is quite a good result. The distribution given by the tool in its free version is as follows:
- 51% for the CPU
- 8% for the network
- 42% for the screen
I therefore have two points that I must improve as a priority: the consumption of the user's screen and the consumption of his CPU.
Regarding the screen, I have already set up a dark theme which is supposed to reduce the consumption of screens using OLED technology, but this is not the theme displayed by default. So I set the dark theme as the default theme but it had no impact on the result. It therefore seems that the model used by GreenFrame does not take this parameter into account. To have a real impact on the consumption of the screen, this requires a deeper reflection to reduce as much as possible the time spent by visitors on the site.
Regarding the CPU, I imagine that I could improve my result by removing the logos animation which falls on the first section of the homepage. This animation uses the Matter.js library and should probably be energy consuming. Indeed, the CPU consumption went from 30mWh to 15mWh after this modification, i.e. a reduction of half. I finally decided to keep this animation because I think it brings a plus. I will certainly consider removing it when my traffic reaches several hundred visits per month.
The importance of being able to measure
To conclude, I want to emphasize the importance of having tools to measure the impact of digital. Indeed, measurement is the basis of any improvement process such as the one I tried to apply in the previous paragraph.
It is also necessary to measure in order to be able to communicate and I think that communication on the impacts of our digital uses is a key to raising user awareness and perhaps changing habits. It is for this reason that I indicate in the footer of my site the carbon emissions caused by a visit to it.
Sources
https://www.gatsbyjs.com/blog/static-sites-fight-climate-change/
https://marmelab.com/blog/2020/09/21/web-developer-climate-change.html
https://marmelab.com/blog/2020/09/22/developers-save-the-planet-the-solution.html
https://marmelab.com/blog/2021/03/04/argos-comparing-the-energy-consumption-of-two-web-stacks.html