DEV Community

GeopJr
GeopJr

Posted on

Calculate your website's Carbon emissions using GitHub Actions

In a world where people are willing to destroy our (only) planet for profit without providing something in return (looking at you NFTs 👀), we, as developers, are responsible for the sustainability of what we create or contribute to.

“If the Internet was a country, it would be the 7th largest polluter”
~ Sustainable Web Manifesto

There are at least three parts on reducing your website's carbon emissions: Host, Code & Content.

  • Host: Hosting your website on a host that uses renewable energy can decrease its CO2 emissions significantly. The Green Web Foundation has collected a huge list of them. Additionally, it has created many tools utilizing them, including the Green Web Check tool.

  • Code: In the vast ocean of JavaScript frameworks, we've seen many tools raise (and fall), some "heavier" and "slower" than others. The bigger bundles a framework creates, the more CO2 emissions the website produces per view. A quite thorough analysis was done by the creator of Solid here on DEV. But the results were similar enough for the choice of framework to be insignificant. A better tip would be writing clean code and minimizing the amount of JavaScript used.

  • Content: Images are the biggest offenders to the amount of data clients need to download when visiting a website. Compressing them, reducing the amount used and replacing them with SVGs (if possible of course) will all contribute against it. After that, ADs, tracking, other media (eg. sounds & videos) and fonts increase the total data transferred by a lot.

On the action side of things, the action uses lighthouse to get the amount of transferred data which then passes through some calculations to get the amount of CO2 it produces per visit. The Green Web Foundation's API is also used (if set to true) to determine whether the host is using renewable energy. Lastly, some additional calculations are being done to generate some fun facts about it before logging it in the action output & create comments on the commit or PR that caused it to run. This all happens inside a docker container for two reasons: 1) GitHub uses at max node12 (Current LTS is 16) plus dependencies are being bundled in the repo (which increases its size and makes development difficult). 2) lighthouse requires a browser to run which is far easier and less time consuming to just install in the docker image.

My Workflow

name: Calculate CO2 🌱
on: [push, pull_request]

jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - name: Calculate CO2 🌱
        uses: GeopJr/CO2@v1
        with:
          url: "https://geopjr.dev/"
          renewable: true
Enter fullscreen mode Exit fullscreen mode

Submission Category:

Maintainer Must-Haves

Reasoning: Reducing your website's carbon emissions is just as important as running tests. Accepting a PR or commiting code that increases them by eg. 20% is irresponsible and should be prevented as soon as possible.

Yaml File or Link to Code

GitHub logo GeopJr / CO2

A GitHub action that notifies you about your website's carbon emissions and gives you some fun facts about it

🌱 CO2 🔥

Get notified about your website's carbon emissions using GitHub Actions


Code Of Conduct BSD-2-Clause

How does CO2 (the action) work?

CO2 (the action) will calculate your website's carbon emissions based on the amount of data it transfers to the client, as well as notify you if your host is using renewable or bog standard energy, along with how much CO2 you could not emit by switching to one that uses renewable energy (if not on one already) Some fun (or not so fun) facts about it in the long run will also be included!

To stay on par with Website Carbon Calculator without spamming their API, the same functions happen locally This includes their calculations as well as their way of getting the amount transferred data (lighthouse).

The renewable energy data is provided by the The Green Web Foundation, however since it relies on an external API, it is disabled…

Additional Resources / Info

Marketplace

You can see it in action on the repo: on a PR, a commit or an action log.

The repo README includes workflows for connecting Vercel & Netlify previews with the action as well as some interesting action conditions.

This whole action is heavily inspired by the Website Carbon Calculator by Wholegrain Digital.

The renewable energy check is being done by The Green Web Foundation.

Take action: Switch to a green host | Make your website more efficient | Plant trees to reduce your carbon impact

Screenshot

pull request comment/review with the result of CO2

(there's more on the repo)

Discussion (4)

Collapse
rangercoder99 profile image
RangerCoder99 • Edited on

This stop/reduce carbon emissions thing is the wrong way to fight this fight. Most people don't understand this or are simply not willing to do what needs to be done. The science behind this is sadly hard to proof with the decade delay between cost and effect. Even if we get all the world to stop carbon esmissions right now the climate change and global warning will keep happening like we still dealing with what people did 10 years ago so asking people to do something and they not see any improvement for a decade is really hard to sell. 😵 To fight this if its not already too late we need have to develope better tech that got a lower carbon emissions or better yet none at all and give them the same or better resold without the cost going up. Or maybe reward them with Tax cuts or something else of real value so they care more about it.

Collapse
geopjr profile image
GeopJr Author

To be honest, I didn't plan on having discourse of any kind on under this post, but I guess it's too late to lock it now.

While I do agree with most of the points you made, you need to keep in mind that this is just action that automates websitecarbon.com/ locally. Obviously it is not made to fix climate change, but instead notify developers about the impact of their actions. Apart from that, those stats allow them to see how "efficient" or "clean" their code is, even if they do not directly care about their emissions.

You are right, lowering your carbon emissions won't suddenly revert hundreds of years of abuse, but it's still something. Same as using public transportation instead of a car.

As sustainablewebmanifesto.com/ mentions, it's more of a way of thinking. "Will this piece of code be efficient enough? Can I rewrite it to be?".

Another thing that should be noted is that if you take a look at most resources, they do not mention completely "deleting" the web. This is because we currently depend on it for many of our daily activities, being payments or even gov related actions. Same thing goes for non-renewable energy and others, we still need them in our daily lives even if they hurt the climate, what we can do is reduce our usage or find alternatives.

Lastly, I include the same links located at websitecarbon.com/ on each message, one of which being treesforlife.org.uk/, promoting planting trees as a way to offset your carbon impact. If there's a particular link you think it'd be a great fit for the action, feel free to open an issue on the repo.

Collapse
rangercoder99 profile image
RangerCoder99

Also think about the massive carbon emissions foot print that github got or the processer power to run this actions on every single site!

Collapse
geopjr profile image
GeopJr Author

As mentioned in the other reply, this action does not, of course, aim to solve climate change, but instead at the very least promote sustainable web.

Maintainers are still responsible for the amount of times their actions run. You can lock it to just PRs if the repo gets many commits. You can schedule it to once a day. You have it run on release. That's outside of my control.

Any concerns about GitHub's footprint are also outside of my control.

Once again, the action just automates websitecarbon.com/ locally. Website Carbon Calculator calls the lighthouse api (and then caches it), so I assume running lighthouse locally uses far less processing power (as there's no additional metrics and the results are not sent to whatever google sends them to through the api for analytics).

The answer to "Why did you create something that calculates carbon emissions when itself emits carbon?" is that, as vague as it sounds, it has a purpose.

Quoting websitecarbon.com/ :

"This website carbon calculator has been created by Wholegrain Digital to help inspire and educate people to create a zero carbon internet. [...]"

This action has the exact same goals.