Measure and report on the carbon impact of a website

[heaversm]

Overview

User Story

As a web developer I want to know how to get started with the Impact Framework with the ultimate goal of measuring my website's carbon footprint.

Rationale

There are numerous components that go into measuring a website's carbon footprint, which vary greatly based on the specific website being measured These can be calculated using existing models in the IF repositories. However, calculating the impact of a real website requires carefully configuring the manifest file and choosing the right models as well as finding accurate input data.

When each of us started using the Impact Framework, we found we needed more support in configuring the manifest file etc and the content we've created aims to offer that support to other technologists.

Impact

If this idea is successfully implemented, the GSF will have a great number of resources to support people onboarding into the impact framework, including easily understandable tutorials, sample code, a plugin specifically for website measurement, and suggestions for improvements to the framework and surrounding infrastructure to enhance consistency and legibility of the framework overall.

Scope Of Work

List some of the tasks that will be required to implement this idea

• A new model plugin
• A manifest file will have to be written
• Implement test cases
• A new feature to the framework itself
• It will require changes to the documentation

Examples and resources

Originally posted by @jmcook1186 in #35

Questions to be answered

• What resources and knowledge do new developers need in order to onboard into using the Impact Framework for the first time.
• How can the Impact Framework be used to measure website energy usage
• What framework improvements, documentation, and tools could be added to the framework to make it easier to use

Project team

@heaversm, @rachaelcodes, @rachanakabi, @iretep, @Bro-mar

Terms of Participation

• I agree to the hackathon Rules & Terms and Code of Conduct

[jawache]

Hi @heaversm so excited to see this proposal, I've been thinking about this for a while we even tried to explore this middle of last year in an early version of IF (note much of the content in the ticket is out of date but it gives some insights perhaps that might be useful) Green-Software-Foundation/if#58

There are two approaches here.

1 - Write a case study, so craft a manifest file to measure the impact of a website and document process, learnings, that all by itself would be a great learning experience as it will clearly identify gaps which need to be filled wit plugins and the best approach. It could form the guidelines for measuring websites using IF.

2 - Take a type of website and build tooling to make that type of website easy to measure in IF. That will require the creation of some plugins but would help with adoption and provide some end to end carbon metrics which is what's missing right now in the website carbon measurement ecosystem.

If you're intention is the second approach simply sucking in the data from various sources would be a great start, we call those importer models. So an importer to bring in data from google analytics about page views could be combined with the co2js plugin in a pipeline to automatically calculate your websites emissions.

Our GSF website is a static site so we were thinking of building an importer for github actions to tell us how many times it's been built, we'd combine that with some offline analysis to estimate energy per build and then create a plugin to multiply the num-builds with carbon-per-build to get the backend carbon cost.

Other thoughts we've had are about narrowing down the scope to say wordpress websites since a solution to measure wordpress end to end (backend and front end) would open the door to 25% of the internet (i'm not sure if wordpress exposes metrics which we can suck in as observations?)

[iretep]

happy to join!

[heaversm]

Hi @heaversm so excited to see this proposal, I've been thinking about this for a while we even tried to explore this middle of last year in an early version of IF (note much of the content in the ticket is out of date but it gives some insights perhaps that might be useful) Green-Software-Foundation/if#58

This is really helpful @jawache - thank you for the context. This will really help us get started.

[heaversm]

happy to join!

Thanks @iretep - can you provide some context into how you might like to contribute? (e.g. What would you like your role to be, what is your area of expertise, etc.?)

[iretep]

happy to join!

Thanks @iretep - can you provide some context into how you might like to contribute? (e.g. What would you like your role to be, what is your area of expertise, etc.?)

@heaversm - not sure exactly, my background is in software development. Do we have a call or something to kickoff the work or just connect here?

[rachaelcodes]

Hi heaversm I'm interested in this project - have you got a website in mind that you want to measure? Or is this project more about making a tool to generate an easy-to-read report based anyone using the IF on their website?

If you're still looking for contributors, I'm a software developer (mostly Python/JS) who also has a bit of an interest in technical writing and user experience if that's useful. Earlier this year, I experimented a bit with using the IF to measure the carbon impact of an AWS-hosted service, but know I could have gone into more depth with it.

[heaversm]

@rachaelcodes / @iretep - great! I would love to select a widely used website and / or platform - Wordpress has been suggested which I think is good, but there are no Wordpress websites I have access to at Mozilla. One potential site is mozilla.ai (created with Webflow, but there might be logistical issues toward getting access). Another is future.mozilla.org - but this is a bit of an obscure and custom build system.

Definitely open to any website / platform suggestions. Feel free to register for the team, and let me know if you do - I'll spend a few more days recruiting and then we can schedule a kickoff for next week to start planning.

Feel free, based on the info here, to start experimenting!

I'm keeping a running document here.

[alexzurbonsen]

Hi there, I missed this issue until now. Just followed the separate discussion issue on this repo so far. Already did some work on this issue in the last weeks for other reasons.

In case you are interested, I published the current status in a draft PR. Created a puppeteer and a lighthouse plugin. The latter is quiet young and I want to put more work into it, ideally. But the puppeteer plugin is more mature. Would be interested in what you think about this - if you like to take a look at it.

But I can imagine it is not really attractive to look at somebody elses code for something that you already made plans to build yourself. May be we can find some way to collaborate on this anyways...

[rachaelcodes]

Great thanks @heaversm , have signed up

[heaversm]

@alexzurbonsen - awesome - will take a look at this this weekend and follow up with you regarding your work. Love the idea of collaborating somehow. @rachaelcodes - thank you for signing up! Will be in touch shortly.

[rachanakabi]

I am Rachana, interested in the job. Can help in Coding, Testing & Article Preparation.
email id: [email protected]

[iretep]

Hi Mike, I heard your part just now on the Hackathon section.
I have access to 2 websites that I can tweak if we want:

1. https://www.madeinpeace.world/ (on Wix)
2. https://www.taste-dont-waste.com/ (on AWS)

[heaversm]

@iretep / @rachanakabi / @alexzurbonsen / @rachaelcodes (i see you already signed up) - Thank you all for your interest in this! Feel free to join this project if you haven't signed up separately, and regardless, if you would like to be involved in the discussion around this project, send me the best email to contact you at so we can coordinate a project kickoff time and discuss our preferred approach / roles / responsibilities / general intros etc. If you don't want to add it here, you can enter your info on this spreadsheet. Then we can get rolling.

If you haven't used the impact framework yet, see if you can get up and running on it.

Team Name: Web Sprouts 🪴

[tofols]

Hello @heaversm,

My name is Rachael and I am interested in joining this project. I have a background in Copywriting/Content and I am currently self-training as a UX Writer.

[alexzurbonsen]

Hi @heaversm, sorry for not responding sooner. I added my email to the google sheet you provided. I am not sure how much time I will have on the next days to contribute though.

Did you already kick off the project?

[heaversm]

@alexzurbonsen - sent you an email - we'd love to have you. Comment here if you don't see the email from me.

[alexzurbonsen]

@heaversm manifest file for the issue:

name: measure-webpage-demo
description: example manifest for estimating carbon emissions of a webpage
tags:
initialize:
  outputs:
    - yaml
  plugins:
    "timer-start":
      method: TimerStart
      path: '@wr24-greenit/if-webpage-plugins'
    "timer-stop":
      method: TimerStop
      path: '@wr24-greenit/if-webpage-plugins'
    "green-hosting":
      method: GreenHosting
      path: '@wr24-greenit/if-webpage-plugins'
    "measure-webpage":
      method: MeasureWebpage
      path: '@wr24-greenit/if-webpage-plugins'
    "co2js":
      method: Co2js
      path: '@wr24-greenit/if-webpage-plugins'
      global-config:
        options:
          firstVisitPercentage: 0.9
          returnVisitPercentage: 0.1
tree:
  children:
    child:
      pipeline:
        - timer-start
        - measure-webpage
        - timer-stop
        - green-hosting
        - co2js
      config:
        co2js:
          type: swd
        measure-webpage:
          lighthouse: true
          scrollToBottom: true
      inputs:
        - timestamp: '2024-01-01T00:00:00Z' # will be replaced by the actual timestamp
          duration: 1 # will be replaced by the time it took to execute the measure-webpage plugin
          url: https://www.tngtech.com
          resets: [true] # tells the timer-stop method to replace timestamp and duration

[heaversm]

Project Submission

Summary

We’ve built the guide we wish we’d had when we first used the Impact Framework along with examples, extensions and prototypes that we feel would make it easier for people to use in the future. It’s a pack of resources for web developers who are new to the Impact Framework to guide them through calculating the carbon impact of their websites. This includes: a video series demonstrating the Impact Framework, an article helping people understand the implementation stages and a plugin and example manifest that developers can use as a starting point.

Problem

The Impact Framework creates an incredibly flexible overarching structure for software impact measurement, with a plugin architecture that makes it possible to measure just about anything. But with this flexibility and the code-forward and nascent nature of the framework itself, it can be a bit daunting to navigate the varied and sometimes complex approaches each plugin takes toward measurement. Choosing the right plugins for your pipeline, understanding their required inputs, assumptions, order, and purpose, as well as decipher the output manifest file, can be intimidating for someone new to the green software space without proper guidance.

This complexity extends to developers of the plugins themselves - with the freedom afforded by the framework comes a lot of design decisions. What configuration options to allow, what units of measurement to enforce, what data to expose to the user in the output, and what logical prior or subsequent plugins might make sense to align with for common measurement tasks.

Our work in Carbon Hack 24 attempts to highlight, prototype, and address many of these issue we, as relative beginners, wrestled with and overcame in order to put the Impact Framework to use to measure website carbon.

Application

Our submission includes the following resources:

• An Impact Framework Launch Kit email / pdf with all the highlights on how to get started with the IF.
• A getting started medium article and github wiki tutorial
• A getting started code repo that accompanies a tutorial video on using and understanding the Impact Framework for a simple pipeline measurement task.
• An Impact Framework plugin to measure website usage
• Impact Framework Pipeline Builder Prototype
• Impact Framework Plugin Registry Submission Prototype
• A youtube playlist with the following videos:
  • Getting Started with the Green Software Impact Framework
  • How to Use the Impact Framework to Calculate your Website's Carbon Emissions
  • Website Measurement Approaches and Considerations
  • A demo video of the Impact Framework Pipeline Builder Prototype
  • A demo video of the Impact Framework Plugin Registry Submission Prototype
• Impact Framework Pipeline Builder Prototype
• Impact Framework Plugin Registry Submission Prototype

Prize category

📝 Best Content

Judging Criteria

• Overall Impact: By improving clarity and increasing access by more people to the Impact Framework, our submission helps to solve the hardest problem in the broader sustainability movement: getting started. Our addition of plugins, prototypes, and sample repos, will help foster discussion and experimentation on one of the most prominent software measurement tasks: Website Energy Usage. We firmly believe that if you can't measure (in an informed and transparent way), you can't improve.
• Clarity: Accessibility of the Framework to those getting started with Green Software was our key area of focus. As newcomers ourselves, we built the content, tools, and suggested improvements we wish we’d had ourselves when first getting started.
• Innovation: The innovation of our submission comes in several areas:
  • the prototypes that attempt to standardize plugins and facilitate their discovery and use in a user's pipeline
  • an plugin highlighting an opinionated approach on website measurement, as well as a discussion of the varied factors that should be considered in this complex measurement task, with opinions from experts in the field.
  • A multitude of ways to engage with the Impact Framework that matches different learning styles and experience levels.

Video

https://youtu.be/l3tUaNRjYQo

Artifacts

Currently Listed Here as well as above in "Application"

Usage

Visit each relevant artifact link for usage instructions on the specific component of interest.

Process

Each team member worked to their specific skillset in order to create deliverables for the overall submission:

• Our generalists and content-savvy team members helped simplify complex topics and identify gaps in current documentation and processes that a more technically savvy audience might gloss over.
• Our designers help create a user-friendly hierarchy and easily digestible diagrams to supplement the content as well as a stylish polish to our hurried notes and half-thoughts.
• Our tech savvy members created prototypes and plugins for the Impact Framework itself, helping users to ladder up from a conceptual understanding of the Framework to a tangible path toward their own measurement tasks.

Inspiration

Each of us on the team cares about the planet, and believes in the tools provided by the Green Software Foundation and other organizations as a way to build inroads toward more informed, optimized, and conscientious usage of technology for a sustainable future. The first step down that path for most of us was to first inform ourselves and share our knowledge.

Challenges

• Setting up the development environment and Impact Framework dependencies

• Understanding which plugins to use for the task at hand, where to find them, in what order to use them, and what their required configuration, inputs, and outputs were.

• Deciphering the manifest file output

• Figuring out what approach to take in measuring webpage usage

• Incorporating an unlisted third-party plugin required building it locally and linking it to a project, which is not documented as far as we know.

• Coordinating meetings of team members across 6 countries spanning 12 hours of time difference! (Great job team 🙌)

Accomplishments

We're proud of the great teamwork of each member of our scrappy team - we all found each other through the "looking for team members" discussion board, and our varied skillsets came together fairly seamlessly to create a large body of work despite busy lives and limited time.

We're also proud about how much we've learned about Green Software in the process - having developed skills through participation that we can carry forward into our own respective lives to further our education, collaboration, influence, and impact in the Green Software space.

Learnings

• How to use the Impact Framework
• How to develop a plugin
• The various things each current plugin measures
• The various approaches and considerations that come into play when measuring website usage.
• How to communicate effectively and divide tasks democratically as a distributed, multidiscplinary team.

What's next?

How will your solution contribute long term to the Impact Framework eco-system

We discussed the potential to keep working on building what we started here as the Impact Framework develops and user adoption increases. We feel like we've built a pathway to adoption, some tools to do very common measurement tasks, as well as painted a picture of some tools and processes that the ecosystem could develop to make the Impact Framework even more powerful and user friendly.