Calculate your website's Carbon emissions

This was my submission for the DEV.to GitHub Actions 2 Hackathon.

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/[email protected]
        with:
          url: "https://geopjr.dev/"
          renewable: true

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

https://github.com/GeopJr/CO2

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