Reduce your website’s environmental impact with a carbon budget

https://css-tricks.com/reduce-your-websites-environmental-impact-with-a-carbon-budget/

by stareatgoats • 5 years ago

58 46 5 years ago

mro_name• 5 years ago

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

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.

aranchelk2• 5 years 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.

paisawalla2• 5 years 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• 5 years 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.

kitsunesoba4• 5 years ago

I think the argument is less for rebuilding existing sites, and more for paying some mind to efficiency when a site is first being developed and during rewrites brought on for other reasons. A good deal of waste reduction is possible with relatively little effort if it’s done at the right time.

aranchelk2• 5 years ago

The argument you are making is especially strong for people writing stuff like frameworks, build tools, etc. where a change could potentially impact all the developer users and in turn their end users.

pavlo• 5 years 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• 5 years 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

Lukas_Skywalker• 5 years 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.

_fat_santa• 5 years ago

The COP26 site is a bad look.

worldofmatthew2• 5 years ago

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• 5 years 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!

worldofmatthew2• 5 years ago

nice.

badhombres• 5 years 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• 5 years 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

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

choward• 5 years ago

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

realreality• 5 years 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.

jefflombardjr4• 5 years 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-...

maelito• 5 years 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.

jefflombardjr4• 5 years 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• 5 years 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.

gruez2• 5 years 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.

kitsunesoba4• 5 years ago

Google and Mozilla seem considerably less concerned about efficiency than Apple and Microsoft are. Safari is well known for being easier on the battery than Chrome and Firefox are on macOS, and pre-Chromium Edge had similar efficiency margins over Chrome and Firefox on Windows. I’ve heard that even Chromium-Edge tends to outperform its competitors on Windows even now.

This starts to make sense when you consider that for Apple and Microsoft, end users are the customer and bad battery life is going to have implications on number of devices sold. For Chrome and a lesser extent Firefox, the “customer” is instead web devs, who are more interested in a constant stream of new features than they are efficiency.

That said, both browser vendors and site devs are responsible. It doesn’t matter how optimized the browser is if a site loads tens of megabytes of dependencies and is written with expediency and cheapness in mind only.

jefflombardjr4• 5 years ago

They are 100% doing it. A lot of really bright people work on the engines/compilers.

The problem is telling individuals to focus on optimization.

Let's use javascript as an example. Say you need to transform an array. You can use `.map` or a `for` loop in javascript.

You see a lot of articles like this https://dev.to/henryjw/array-map-much-slower-than-for-loop-5... that say a `for` loop is faster. And sometimes it's true.

By the logic of the original article, you should hyperoptimize your code. The problem is. If everyone writes `for` loops instead of using `map`. When map eventually becomes more efficient there's all that garbage code out there that has to be refactored.

Ignoring the problems associated with benchmarking - this for example claims map now being faster than for loops. https://leanylabs.com/blog/js-forEach-map-reduce-vs-for-for_...

It comes down to return on effort. We only have so much effort to put at solving this problem. You maximize your return on effort by having a clear separation of responsibility. In this case the individual's responsibility is to write code to the latest spec. The institution's responsibility is to make the code written as efficient as possible.

A single website saving .000000001 ppm of carbon (exaggerating) is just never going to be worth the effort. But a compiler improvement on all websites running javascript. Now that's totally worth it.

Further reading behind this logic: https://www.goodreads.com/book/show/3828902-thinking-in-syst...

https://stackify.com/premature-optimization-evil/

Code Complete (chapter 25.2) https://www.oreilly.com/library/view/code-complete-second/07...

zebraflask• 5 years ago

Not 100% on topic, but related - not mining or using crypto or writing apps / software / sites that enable it, at least the ones like Bitcoin that are massively greedy re: electrical usage, might also be effective.

amelius• 5 years ago

Another solution I hear often is to simply tax the power used.

sudopluto• 5 years ago

no, it is not not only the responsibility of those writing browser engines / compilers.

it is the fault of the product designers who take any advancement in the efficiency of technology as a excuse to push more crap. see: blockchain for the sake of blockchain, machine learning for the sake of machine learning, web apps for the sake of web apps

saagarjha• 5 years ago

No, this is wrong. Performance is everyone's responsibility, because compilers are fundamentally garbage-in-garbage-out. The people that work on them are incredibly smart and I don't want to discount that, but there is fundamentally nothing they can do if you write something nontrivial that's O(n^3): that's on you to fix. The fact is that a lot of websites leave timers running in the background or use really inefficient ways to manipulate the DOM, and despite the work of all major browser vendors there's not much that can be done here except asking the people that make those websites to not do this. If you're one of them, you should make it your responsibility to care about performance.

bcrosby95• 5 years ago

I only recently found out that the idea of an "individuals" carbon footprint was popularized by BP, in order to shift the blame off themselves and onto us:

https://en.wikipedia.org/wiki/Carbon_footprint#Origin_of_the...

tunesmith• 5 years ago

Once again, the answer seems to be "why not both". Calculations on individual carbon footprint are useful for buying offsets. Complaining about individualization feels like permission to just not make it our problems. Yeah, we have big companies and big governments, but individuals use those services. So yeah, agitate for changes on the global scale, and yeah, also look at your own footprint.

marginalia_nu• 5 years ago

More practically, if the browser developers make more efficient browsers, what typically ends up happening is that the web developers make more inefficient websites that consume the additional resources available. It's Parkinson's law. We need both efficient web browsers and efficient websites.

All guilt and responsibility is individual, as individual humans are the only ones with subjectivity and agency. Assigning blame to groups and "others" is extremely counterproductive. You either do what you can or you don't.

We can sit around trying to find scapegoats and and point fingers for a hundred years, and it's not going to do any difference. The consumers can blame the the producers, the producers can blame the consumers. The voters can blame the politicians and the politicians can blame the voters. The right can blame the left and the left can blame the right. Men can blame women and women can blame men. Cats can blame dogs and dogs can blame cats.

The reason it all sounds true is that every single one the accusations are true. Why yes, the producers are to blame, so are the consumers, the politicians, the voters. We are all to blame, we're all culpable for our decisions as individual humans. Each and every one of us all have responsibility.

GoblinSlayer2• 5 years ago

Inefficient code reduces battery life, consumes CPU and RAM resources and overheats hardware - all this directly affects the user, not environment. If the browser terminated the script after, say, 1000 instructions, that would help, but it's only a mitigation for a bug in the script code, not a proper solution.

gherkinnn• 5 years 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.

gruez2• 5 years 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).

kitsunesoba4• 5 years 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.

nickdothutton• 5 years 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• 5 years ago

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

sebow• 5 years ago

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

danShumway• 5 years 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.

xupybd• 5 years 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.

Reduce your website’s environmental impact with a carbon budget

Related Stories