Skip to content
Treemap to identify CO2 and energy usage for a web page via a WebPageTest result
HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
server
.gitignore
README.md
index.html
screencap.PNG
server-demo.html

README.md

greentree

Treemap to identify CO2 and energy usage a web page via a WebPageTest result

Using a WebPageTest result, the GreenWebFoundation API, and calculations from Carbon Website, display a treemap visualisation, per host of:

  1. Bytes per request
  2. Energy used serving each request (Watt Hours)
  3. CO2 generated for each request (grams and also litres)

The blocks are grey if the host uses non-renewable energy and green if it uses a renewable energy source.

Client Side

https://rposbo.github.io/greentree

There's a single page with all the logic inside; just paste in a WPT test ID and hit GO! The dots and dashes are calls to GreenWebFoundation API to see if the host is using renewable energy; dashes are when the call failed (probably blocked by the browser thinking it's an advert ping).

Here is an example greentree treemap for The Sun website, generated in your browser from a WebPageTest result - it can take a while to load, so the result is below:

example greentree treemap for The Sun website

Server Side

The rest of the repo is the nodejs version of this, so you can hook it into a pipeline and generate static reports if you wanted to.

Here is an example greentree treemap for The Sun website using data already generated on the server from a WebPageTest result.

You can’t perform that action at this time.