8 ms·

Reduce your website’s environmental impact with a carbon budget

58 points by stareatgoats 5y ago

xupybd 5y ago
I'm not buying that this is going to have much impact. Maybe just fly to one less conference in your life time. It'll probably have more of an impact.
gherkinnn 5y ago
Isn't this well in the penny wise, pound foolish territory? I might as well try to fart less. And if one really wants to save the planet by reducing page foot print, surely killing tracking and ads would be the place to start. Or just run an uBlock Origin.
- gruez 5y ago
  > Isn't this well in the penny wise, pound foolish territory? I might as well try to fart less. Agree. Carbon emissions from client computing is probably a blip in terms other sources. Wasting resources (ie. cash spent on developers that could otherwise be allocated elsewhere) is counterproductive to the goal of reducing emissions as fast as possible. That's why I'm much more in favor of a carbon tax than random propositions that attract attention but have questionable efficacy (see also: plastic straw bans).
  - kitsunesoba 5y ago
    That strongly depends on where the saved developer resources (which I think are frequently overstated, but that’s another topic) are allocated. If they’re put towards squeezing more ad dollars for example, that’s still a net loss environmentally.
mro_name 5y ago
nice hints, thanks for posting! And indeed Greta is right.
kitsunesoba 5y ago
Very happy to see someone talking about this. I’ve thought for several years now that it was odd how environmental impact tends to get swept under the rug in the fervor of trends in web dev frameworks and tools.
aranchelk 5y ago
You can estimate a direct environmental impact of the Internet and then try to tie it back to individual websites, but it pains me that these articles seem to ignore the externalities, specifically how much more efficient many industries are specifically because of the Internet. E.g. commercial flights (at least pre-Covid) are generally full now and as a consequence much more efficient because of tech starting with travel sites like Hotwire. So many of our business ideas are about reducing financial waste and often times that absolutely has an environmental component. If I’ve got a web app that’s reducing waste of some external resource (fuel, food, etc.), the positive external impact may be orders of magnitude more, and spending the effort to rewrite it in vanilla JS versus improving quality and fixing bugs may be time very poorly spent.
- paisawalla 5y ago
  The cost-benefit analysis has been replaced by univariate zeroism in our society. >No one is too small to make a difference. And apparently no difference is too small to pursue.
  - cogman10 5y ago
    The "all or nothing" attitude is something that drives me nuts. Climate change is real, for sure, but we don't need to book-keep every single source of CO2 emission. Data centers are a blip when it comes to CO2 emissions. That's why companies like microsoft and google can earn good citizen points by purchasing offsets. It doesn't cost a lot of money to offset because they aren't emitting a lot of CO2 in the grand scheme of things. Amazon's logistics emit WAY more CO2 than AWS does. It's not even close.
    - paisawalla 5y ago
      You see it everywhere: in climate change, our societal response to COVID, in claims of inequity that basically equate any statistical variation with -isms and -phobias. I personally believe that education inflation is at play: nominally, rates of people who have university degrees are up, but the real value of education has been replaced by inferior methods and poor-quality thinking. In particular, a false confidence in their understanding of statistical data. So you have a lot of people walking around with the confidence of having earned a degree and completed an education, when they actually just have brain worms. And they're impervious to criticism to the point of arrogance, because they're College Educated. I think the solution (or at least, something you personally could help do to change things) will be found in hiring practices. For open positions in fields not requiring specific specialized skills like the law, STEM, etc: stop requiring college degrees, and start using IQ tests or similar filters for those roles.
pavlo 5y ago
The article criticises large sites saying that "[t]he average web page size now stands at around 2MB." but the page where the text is published is 1,5 MB itself. Its a bit sad, but probably makes the point precisely.
- dest 5y ago
  Including a stellar 378kB PNG image of 2776*1381 pixels, while it's only a small illustration in the article. https://css-tricks.com/wp-content/uploads/2021/11/cloud.png https://css-tricks.com/wp-content/uploads/2021/11/cloud.png
  - Lukas_Skywalker 5y ago
    Wow. A quick and dirty vectorization yields an SVG of 9kB. The PNG even looks like it was originally an SVG with some linear gradients.
    - garblegarble 5y ago
      Even just running it through optipng results in a 58% reduction to 158KB!
_fat_santa 5y ago
The COP26 site is a bad look.
worldofmatthew 5y ago
https://www.websitecarbon.com/website/worldofmatthew-com/ https://www.websitecarbon.com/website/worldofmatthew-com/ - "Hurrah! This web page is cleaner than 95 % of web pages tested". I don't think my website will be causing too many problems with the planet. Next I will be using mainly AVIF images for article images. Moreeeeee optimizations.
- thelopa 5y ago
  It said my personal site was cleaner than 100% of web pages tested. It said that loading my page costs 0.00g of CO2. Not bad!
  - worldofmatthew 5y ago
    nice.
badhombres 5y ago
I'm curious on what the percentage of contribution from the different aspects of loading a website are. How much are from the data center, from the network transfer, from the computer loading the website, etc. If the data centers could run on cleaner energy, how much does that contribute to the CO2e measurements?
open-source-ux 5y ago
What about calculating the environmental impact of the programming language you use? Some of the most popular languages are the least performative (we all know which ones). But they make life easier for developers, or as programmers love to say 'more productive'. It's good to see new(ish) languages take performance seriously: Rust, Go, Nim, Crystal, Julia. I don't think it's controversial to say a typed, compiled language gives you good performance for free (and the reduced computing resources that implies). When PHP 7 was released, Rasmus Lerdorf, the creator of PHP, said the performance improvements meant fewer servers, smaller memory use and reduced CPU activity - all of which equalled less power or electricity consumed. (And remember this is an interpreted language.) You can watch a segment from his presentation below where he talks about this, including the calculations he made of potential CO2 savings: Rasmus Lerdorf – "PHP in 2018" (extract from the 15 min mark): https://youtu.be/umxGUWYmiSw?t=15m16s https://youtu.be/umxGUWYmiSw?t=15m16s When you consider the millions of servers in use, that additional language efficiency adds up to a substantial saving in electricity use. And yet among developers, a common response to performance issues is to say: hardware is cheap, just add another energy-guzzling server or use a more powerful computer. The topic of ranking programming languages by energy efficiency has been discussed before on Hacker News. Here is the paper previously discussed which has been updated in 2021: Energy Efficiency across Programming Languages: https://sites.google.com/view/energy-efficiency-languages https://sites.google.com/view/energy-efficiency-languages
choward 5y ago
I found the lack of mentioning ad and tracking scripts to be noteworthy.
realreality 5y ago
The greenest site is the one that never gets built in the first place. We need to be honest about how much energy is being spent on unnecessary activity.
jefflombardjr 5y ago
I'm sure this is really well intended, but the individualization of environmental guilt is a major problem. [0] Where I agree with the article is to use tools like lighthouse and write code that uses the language properly. It is absolutely individual's responsibility to do this. The responsibility of making code efficient (dare I say "green") lies in those writing the browser engines/compilers. 0: https://medium.com/@mitpress/individualization-plant-a-tree-buy-a-bike-save-the-world-ecb916df95e4 https://medium.com/@mitpress/individualization-plant-a-tree-...
- maelito 5y ago
  Individualisation is just a step needed for collective change. From the individual to the state and then the world, everything is continuously collective. You just can't hope your institutions to change if a minority of citizen haven't proven lowering one's environmental impacts is possible, and made it socially desirable. Then institutional change can happen. In democraties at least, comsumer-citizens are necessary for the system to change.
  - jefflombardjr 5y ago
    Totally. But not in software. Take a look at Code Complete: Chapter 25. Does a way better job explaining this than I could in a comment box.
  - wmf 5y ago
    In the developed world we've already gone beyond the optimal point of individual environmental responsibility and it's all diminishing returns from here.
- gruez 5y ago
  >The responsibility of making code efficient (dare I say "green") lies in those writing the browser engines/compilers. I don't get it. Are they not doing that? Performance and battery life is a major selling point for browsers. If anything the biggest failure is at the individual developer/site level, not that firefox causes your fan to spin into overdrive when it tries to load a SPA monstrosity.
nickdothutton 5y ago
The carbon calculator produces the same result whether a site is served from a 1400w server or a 5w Raspberry Pi. Into the trash it goes.
mrkentutbabi 5y ago
So maybe start using Rust on the backend and WASM on the frontend?
sebow 5y ago
Kind of ironic when you open up "wappalyzer" on this website.Might want to check your priorities.
danShumway 5y ago
Install an adblocker and then evangelize adblockers to your coworkers, friends, and family. It feels a little weird to be doing math that's at this scale. We can debate whether computing power is a significant drive of climate change, and this sets off some greenwashing alarms for me, but I'm going to take it at face value and say, sure, we should have some conversations about power usage for applications. That being said, using an adblocker is basically just automating all of this article's advice -- it's reducing the amount of content that loads, reducing the amount of code that executes on each page. It's also fundamentally shifting away from the attention economy, removing some "traps" that try to get people to stay longer on websites than necessary. And when you install an adblocker on your phone/desktop, these environmental improvements are included on virtually every single page you visit, regardless of what the engineers tried to do. It's a quick way to reduce the carbon footprint of all the websites you visit, immediately. And every single consumer can do it, it has basically no individual downsides, it doesn't require a personal sacrifice. It feels weird that the top suggestions coming out of all of the sources that the author links to are basically saying "make your website show less unnecessary crud" and "make your website do less unnecessary crud", but there's not an acknowledgement or a reflection that the attention economy is one of the biggest reasons why websites do stuff like this. A call to Google to make things better, when Google's entire business model is based around making people look at their phones more and keep their phone screens on longer... it just kind of feels like missing the forest for the trees. You know why Youtube shows animated previews of all of its videos when you hover on them: because it gets people to click on videos more endlessly. Talking about the power consumption of the initial render for React, or whether or not Youtube is using CDNs effectively enough is really kind of ignoring the bigger picture of what the web is and why it works this way. So if you care about this, sure, write more efficient code, whatever. That's not bad to do. But if you really want to practically reduce the web's carbon footprint, then undermine the attention economy and hasten the collapse of the ad industry, and try very hard to contribute to starting a social movement/trend where consumers block ads. Unless you are in charge of something massive, that will have a larger impact than any individual code optimizations you make. I don't accuse the author of this at all, I take the author at face value. Outside of the author, we spend a lot of time trying to guilt individuals about systems that are designed to work a certain way, and we are often very hesitant to go beyond guilting individuals and questioning whether the larger systems we've designed should also be asking these questions. It is not individual designers being bad at SEO that are producing the majority on the Internet, it's ads. And it is fundamentally impossible to get everyone on board with the idea that websites should statically represent information quickly and then get people off them -- when the business model we have chosen for the Internet relies on eyeballs staying on pages looking at ads for extended periods of time. If we're not willing to have that conversation and if we're only willing to talk about this stuff in abstract terms, then guilting individual developers about the environmental costs of using React is kinda greenwashing, because I don't think it's React's fault that news sites have auto-playing videos and animated ad banners. It feels like organizing the silverware drawer while the house is burning down around you. If this is a pressing issue, then instead of researching the best compression techniques for code bundling, take that same amount of time you would have spent doing that, and instead send your friends illustrated tutorials about how Ublock Origin works, or instructions on how to set up adblockers on their Android phones. You can also consider installing SponsorBlock on Youtube, which will auto-skip sponsor segments and intro segments in videos, which will reduce the amount of time you spend rendering out videos. You can also consider installing NewPipe on Android, which allows you to block recommendations on videos, which is super helpful because you'll just flat-out spend less time watching Youtube. NewPipe also has a fork that integrates SponsorBlock. You can teach people how to download music/videos from Youtube, which will reduce the amount of power/data they stream. There's a lot of options here that we could explore from an environmental perspective. They're not good for Google, but I don't really care about that? I guess what I'm saying is that if you're concerned about power usage for devices, that's great, but consider widening the number of potential solutions that you're looking at and consider being more willing to look at solutions that are not just nice things that get posted to blogs that engineers at Facebook can feel safe sharing with each other. There are articles being linked from this one that talk about cutting down on "thank you" emails. Like... no, burn the ad industry to the ground or stop wasting my time.

58 points by stareatgoats 5y ago

I'm not buying that this is going to have much impact. Maybe just fly to one less conference in your life time. It'll probably have more of an impact.

gherkinnn 5y ago

Isn't this well in the penny wise, pound foolish territory? I might as well try to fart less. And if one really wants to save the planet by reducing page foot print, surely killing tracking and ads would be the place to start. Or just run an uBlock Origin.

gruez 5y ago
> Isn't this well in the penny wise, pound foolish territory? I might as well try to fart less. Agree. Carbon emissions from client computing is probably a blip in terms other sources. Wasting resources (ie. cash spent on developers that could otherwise be allocated elsewhere) is counterproductive to the goal of reducing emissions as fast as possible. That's why I'm much more in favor of a carbon tax than random propositions that attract attention but have questionable efficacy (see also: plastic straw bans).
- kitsunesoba 5y ago
  That strongly depends on where the saved developer resources (which I think are frequently overstated, but that’s another topic) are allocated. If they’re put towards squeezing more ad dollars for example, that’s still a net loss environmentally.

mro_name 5y ago

nice hints, thanks for posting! And indeed Greta is right.

kitsunesoba 5y ago

Very happy to see someone talking about this. I’ve thought for several years now that it was odd how environmental impact tends to get swept under the rug in the fervor of trends in web dev frameworks and tools.

aranchelk 5y ago

You can estimate a direct environmental impact of the Internet and then try to tie it back to individual websites, but it pains me that these articles seem to ignore the externalities, specifically how much more efficient many industries are specifically because of the Internet. E.g. commercial flights (at least pre-Covid) are generally full now and as a consequence much more efficient because of tech starting with travel sites like Hotwire. So many of our business ideas are about reducing financial waste and often times that absolutely has an environmental component. If I’ve got a web app that’s reducing waste of some external resource (fuel, food, etc.), the positive external impact may be orders of magnitude more, and spending the effort to rewrite it in vanilla JS versus improving quality and fixing bugs may be time very poorly spent.

paisawalla 5y ago
The cost-benefit analysis has been replaced by univariate zeroism in our society. >No one is too small to make a difference. And apparently no difference is too small to pursue.
- cogman10 5y ago
  The "all or nothing" attitude is something that drives me nuts. Climate change is real, for sure, but we don't need to book-keep every single source of CO2 emission. Data centers are a blip when it comes to CO2 emissions. That's why companies like microsoft and google can earn good citizen points by purchasing offsets. It doesn't cost a lot of money to offset because they aren't emitting a lot of CO2 in the grand scheme of things. Amazon's logistics emit WAY more CO2 than AWS does. It's not even close.
  - paisawalla 5y ago
    You see it everywhere: in climate change, our societal response to COVID, in claims of inequity that basically equate any statistical variation with -isms and -phobias. I personally believe that education inflation is at play: nominally, rates of people who have university degrees are up, but the real value of education has been replaced by inferior methods and poor-quality thinking. In particular, a false confidence in their understanding of statistical data. So you have a lot of people walking around with the confidence of having earned a degree and completed an education, when they actually just have brain worms. And they're impervious to criticism to the point of arrogance, because they're College Educated. I think the solution (or at least, something you personally could help do to change things) will be found in hiring practices. For open positions in fields not requiring specific specialized skills like the law, STEM, etc: stop requiring college degrees, and start using IQ tests or similar filters for those roles.

pavlo 5y ago

The article criticises large sites saying that "[t]he average web page size now stands at around 2MB." but the page where the text is published is 1,5 MB itself. Its a bit sad, but probably makes the point precisely.

dest 5y ago
Including a stellar 378kB PNG image of 2776*1381 pixels, while it's only a small illustration in the article. https://css-tricks.com/wp-content/uploads/2021/11/cloud.png https://css-tricks.com/wp-content/uploads/2021/11/cloud.png
- Lukas_Skywalker 5y ago
  Wow. A quick and dirty vectorization yields an SVG of 9kB. The PNG even looks like it was originally an SVG with some linear gradients.
  - garblegarble 5y ago
    Even just running it through optipng results in a 58% reduction to 158KB!

_fat_santa 5y ago

The COP26 site is a bad look.

worldofmatthew 5y ago

https://www.websitecarbon.com/website/worldofmatthew-com/ https://www.websitecarbon.com/website/worldofmatthew-com/ - "Hurrah! This web page is cleaner than 95 % of web pages tested". I don't think my website will be causing too many problems with the planet. Next I will be using mainly AVIF images for article images. Moreeeeee optimizations.

thelopa 5y ago
It said my personal site was cleaner than 100% of web pages tested. It said that loading my page costs 0.00g of CO2. Not bad!
- worldofmatthew 5y ago
  nice.

badhombres 5y ago

I'm curious on what the percentage of contribution from the different aspects of loading a website are. How much are from the data center, from the network transfer, from the computer loading the website, etc. If the data centers could run on cleaner energy, how much does that contribute to the CO2e measurements?

open-source-ux 5y ago

What about calculating the environmental impact of the programming language you use? Some of the most popular languages are the least performative (we all know which ones). But they make life easier for developers, or as programmers love to say 'more productive'. It's good to see new(ish) languages take performance seriously: Rust, Go, Nim, Crystal, Julia. I don't think it's controversial to say a typed, compiled language gives you good performance for free (and the reduced computing resources that implies). When PHP 7 was released, Rasmus Lerdorf, the creator of PHP, said the performance improvements meant fewer servers, smaller memory use and reduced CPU activity - all of which equalled less power or electricity consumed. (And remember this is an interpreted language.) You can watch a segment from his presentation below where he talks about this, including the calculations he made of potential CO2 savings: Rasmus Lerdorf – "PHP in 2018" (extract from the 15 min mark): https://youtu.be/umxGUWYmiSw?t=15m16s https://youtu.be/umxGUWYmiSw?t=15m16s When you consider the millions of servers in use, that additional language efficiency adds up to a substantial saving in electricity use. And yet among developers, a common response to performance issues is to say: hardware is cheap, just add another energy-guzzling server or use a more powerful computer. The topic of ranking programming languages by energy efficiency has been discussed before on Hacker News. Here is the paper previously discussed which has been updated in 2021: Energy Efficiency across Programming Languages: https://sites.google.com/view/energy-efficiency-languages https://sites.google.com/view/energy-efficiency-languages

choward 5y ago

I found the lack of mentioning ad and tracking scripts to be noteworthy.

realreality 5y ago

The greenest site is the one that never gets built in the first place. We need to be honest about how much energy is being spent on unnecessary activity.

jefflombardjr 5y ago

I'm sure this is really well intended, but the individualization of environmental guilt is a major problem. [0] Where I agree with the article is to use tools like lighthouse and write code that uses the language properly. It is absolutely individual's responsibility to do this. The responsibility of making code efficient (dare I say "green") lies in those writing the browser engines/compilers. 0: https://medium.com/@mitpress/individualization-plant-a-tree-buy-a-bike-save-the-world-ecb916df95e4 https://medium.com/@mitpress/individualization-plant-a-tree-...

maelito 5y ago
Individualisation is just a step needed for collective change. From the individual to the state and then the world, everything is continuously collective. You just can't hope your institutions to change if a minority of citizen haven't proven lowering one's environmental impacts is possible, and made it socially desirable. Then institutional change can happen. In democraties at least, comsumer-citizens are necessary for the system to change.
- jefflombardjr 5y ago
  Totally. But not in software. Take a look at Code Complete: Chapter 25. Does a way better job explaining this than I could in a comment box.
- wmf 5y ago
  In the developed world we've already gone beyond the optimal point of individual environmental responsibility and it's all diminishing returns from here.
gruez 5y ago
>The responsibility of making code efficient (dare I say "green") lies in those writing the browser engines/compilers. I don't get it. Are they not doing that? Performance and battery life is a major selling point for browsers. If anything the biggest failure is at the individual developer/site level, not that firefox causes your fan to spin into overdrive when it tries to load a SPA monstrosity.

nickdothutton 5y ago

The carbon calculator produces the same result whether a site is served from a 1400w server or a 5w Raspberry Pi. Into the trash it goes.

mrkentutbabi 5y ago

So maybe start using Rust on the backend and WASM on the frontend?

sebow 5y ago

Kind of ironic when you open up "wappalyzer" on this website.Might want to check your priorities.

danShumway 5y ago

Install an adblocker and then evangelize adblockers to your coworkers, friends, and family. It feels a little weird to be doing math that's at this scale. We can debate whether computing power is a significant drive of climate change, and this sets off some greenwashing alarms for me, but I'm going to take it at face value and say, sure, we should have some conversations about power usage for applications. That being said, using an adblocker is basically just automating all of this article's advice -- it's reducing the amount of content that loads, reducing the amount of code that executes on each page. It's also fundamentally shifting away from the attention economy, removing some "traps" that try to get people to stay longer on websites than necessary. And when you install an adblocker on your phone/desktop, these environmental improvements are included on virtually every single page you visit, regardless of what the engineers tried to do. It's a quick way to reduce the carbon footprint of all the websites you visit, immediately. And every single consumer can do it, it has basically no individual downsides, it doesn't require a personal sacrifice. It feels weird that the top suggestions coming out of all of the sources that the author links to are basically saying "make your website show less unnecessary crud" and "make your website do less unnecessary crud", but there's not an acknowledgement or a reflection that the attention economy is one of the biggest reasons why websites do stuff like this. A call to Google to make things better, when Google's entire business model is based around making people look at their phones more and keep their phone screens on longer... it just kind of feels like missing the forest for the trees. You know why Youtube shows animated previews of all of its videos when you hover on them: because it gets people to click on videos more endlessly. Talking about the power consumption of the initial render for React, or whether or not Youtube is using CDNs effectively enough is really kind of ignoring the bigger picture of what the web is and why it works this way. So if you care about this, sure, write more efficient code, whatever. That's not bad to do. But if you really want to practically reduce the web's carbon footprint, then undermine the attention economy and hasten the collapse of the ad industry, and try very hard to contribute to starting a social movement/trend where consumers block ads. Unless you are in charge of something massive, that will have a larger impact than any individual code optimizations you make. I don't accuse the author of this at all, I take the author at face value. Outside of the author, we spend a lot of time trying to guilt individuals about systems that are designed to work a certain way, and we are often very hesitant to go beyond guilting individuals and questioning whether the larger systems we've designed should also be asking these questions. It is not individual designers being bad at SEO that are producing the majority on the Internet, it's ads. And it is fundamentally impossible to get everyone on board with the idea that websites should statically represent information quickly and then get people off them -- when the business model we have chosen for the Internet relies on eyeballs staying on pages looking at ads for extended periods of time. If we're not willing to have that conversation and if we're only willing to talk about this stuff in abstract terms, then guilting individual developers about the environmental costs of using React is kinda greenwashing, because I don't think it's React's fault that news sites have auto-playing videos and animated ad banners. It feels like organizing the silverware drawer while the house is burning down around you. If this is a pressing issue, then instead of researching the best compression techniques for code bundling, take that same amount of time you would have spent doing that, and instead send your friends illustrated tutorials about how Ublock Origin works, or instructions on how to set up adblockers on their Android phones. You can also consider installing SponsorBlock on Youtube, which will auto-skip sponsor segments and intro segments in videos, which will reduce the amount of time you spend rendering out videos. You can also consider installing NewPipe on Android, which allows you to block recommendations on videos, which is super helpful because you'll just flat-out spend less time watching Youtube. NewPipe also has a fork that integrates SponsorBlock. You can teach people how to download music/videos from Youtube, which will reduce the amount of power/data they stream. There's a lot of options here that we could explore from an environmental perspective. They're not good for Google, but I don't really care about that? I guess what I'm saying is that if you're concerned about power usage for devices, that's great, but consider widening the number of potential solutions that you're looking at and consider being more willing to look at solutions that are not just nice things that get posted to blogs that engineers at Facebook can feel safe sharing with each other. There are articles being linked from this one that talk about cutting down on "thank you" emails. Like... no, burn the ad industry to the ground or stop wasting my time.