Estimate carbon impact of a webpage

[alexzurbonsen]

Prize category

Best Plugin

Overview

Build a plugins that gather the data needed for the sustainable web design model (as provided by the co2js plugin) to estimate the carbon impact of a webpage.

Questions to be answered

• How to measure page weight?
• How to measure the data reload ratio?
• Use Lighthouse or some other tool?

Have you got a project team yet?

I am working on this project alone

Project team

@alexzurbonsen

Terms of Participation

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

---

Project Submission

Summary

You are wondering about the carbon impact of your webpage? May be you already know websitecarbon.com or ecograder.com and used them for estimating the carbon emissions of loading a webpage? The plugins from this project enable you to do the same with the impact framework. They are measuring the page weight, check whether a page is hosted on a green domain, and more. The gathered data can be passed on to the co2js plugin’s sustainable web design model to get a carbon estimate. You can explicitly choose the model’s remaining parameters and make them transparent in your manifest.

Problem

How to measure the carbon impact of a webpage? This is a complex problem since there are a lot of variables involved and many of them are typically unknown, inaccessible or at least hard to get. This project follows the approach that for example websitecarbon.com and ecograder.com take as well. It uses the sustainable web design model for estimating the carbon emissions of a webpage load.

More details on the sustainable web design model:

The model has a broad scope and includes all essential segments of the network into its estimation

• consumer device use
• network use
• data centre use
• hardware production

It makes the complexity of estimating the emissions of all this segments accessible by focusing on the number of transferred bytes on webpage load only. The energy consumed by a page load is derived from the page weight.

Application

I created plugins that gather data for the co2js plugin and can be used in a pipeline to estimate the carbon impact of webpages.

For further aspects of estimating the carbon impact of a webpage and helpful content to figure out what you want when measuring a webpage, check out the contribution of #97.

Measure Webpage Plugin

Main task: measures the page weight of a webpage.

Further capabilities:

• returns weights for different resource categories (like image, font, etc.)
• optional: attempts to approximate the dataReloadRatio for the sustainable web design model
• can generate a lighthouse report

There are varios config options that should enable more fine grained estimations. For example you can choose to emulate a specific mobile device. Or you can tell the plugin to scroll to the bottom of the loaded page, such that all lazy loaded contents are loaded and counted into the page weight as well.

Green Hosting Plugin

Performs a check on the domain of the webpage in the Green Web Foundations database for green hosts. Returns a boolean that indicates whether the page is hosted green or not.

Timer Plugin

Generic plugin to adjust timestamp and duration to the actual measurement time.

Prize category

Best plugin

Judging Criteria

Overall Impact

Enables impact framework users to measure carbon emissions of webpages. Hopefully, this can also draw other people to the impact framework how want to measure a webpage and are looking for suitable tools. The visual appearance is not as nice as with the already existing webpages like websitecarbon.com yet. But on the upside you can be specific about all the parameters you feed into the computation. Plus, the pipeline also offers more configuration options compared to the already mentioned carbon measurement websites.

The plugin needs to become known and possibly improved further.

Opportunity

As mentioned above, it helps everyone looking for estimating the carbon impact of a webpage.

Modular

I think the plugins play well with especially the co2js plugin. The timer plugin is more generic and can be used independent of the webpage use case for other measurement plugins as well. (Up to date I mostly saw plugins that post process measured data, but if you actually want to measure something, having an accurate timestamp and duration is helpful.)

The scope of the Measure Webpage Plugin probably got to big, since it now also generates a Lighthouse report. I had that separated at first. But that meant to duplicate some config options. So, for now, and until I understand the interplay between puppeteer and Lighthouse config better, I included it in the Measure Webpage Plugin.

Video

https://www.youtube.com/watch?v=pMHKZTwIf0g

Artefacts

https://github.com/wr24-greenit/if-webpage-plugins

Usage

Example manifest:

https://github.com/wr24-greenit/if-webpage-plugins/blob/main/example-manifests/measure-webpage.yml

Process

My initial idea was to use Lighthouse and pull the page weight data from the lighthouse report. Since Lighthouse and the respective chrome launcher are ES modules and IF is a CommonJS module, that wasn't as easy as hoped.

Thus, I started to use puppeteer and compute the page weight.
I also made an attempt to approximate the dataReloadRatio by loading the page twice. It is not perfect but still seemed to be worth a try.

I gradually added more and more config options, exposing some of the configuration of puppeteer in the plugin.

I also learned how to generate a Lighthouse report with the help of puppeteer.

Inspiration

Initially, this issue from @jmcook1186

But also the work of websitecarbon.com and ecograder.com

Challenges

Navigating the complex world of loading webpages and how to arrive at a reasonable result (hopefully).

Figuring out ES and CommonJS module issues (not fun...)

Validating the result. Comparisons of the page weights measured by Lighthouse and my plugin showed that there are deviations between the two values. Usually they were in the order of 1% of the Lighthouse value. But I also had an example were the deviation was about 4.5%. It remains a task for the future to align these more. But for now, I think this may be good enough, since the error is small enough compared to other sources of error. Also, I am not sure how much Lighthouse's implementation choices influence the result and if the make sense for this use case.

Accomplishments

The entire pipeline is already pretty

Learnings

Learning puppeteer and Lighthouse.

Learning about loading a webpage and the challenges of estimating the page weight and data reload ratio.

Learning more about the impact framework.

What's next?

It adds the capability to measure the carbon impact of webpages with the impact framework, just as you could to with websitecarbon.com and similar tools.
There is also more work to do. For example adding a plugin that generates nicer visual output. Customizing the lighthouse report and may be extracting it into a Lighthouse plugin. Further ideas are caputered in issues on the plugin repo.