This page is a demonstration of how the Performance Resource Timing API can be used with CO2.js on a web page. It is a demonstration repository for the concepts outlined in the blog post Including user interaction in website carbon estimates.

This page contains three lazy-loaded images.

At present, a script runs when the page is loaded. This script uses the Performance Resource Timing API to collect information about the data transferred when the pay was loaded. This information is then fed into CO2.js which uses it to provide a carbon emissions estimate based on the Sustainable Web Design Model version 4. The script also reruns each time a new image on the page is loaded by the browser. Whenever a new image loads, the resulting CO2e estimate is calculated and updated in a sticky banner on the left of the page. It also logs a trace of the estimation in the console.

At the moment this, demonstration does not make any adjustments to grid intensity based on server location or user location, nor does it make any checks to see if the web page is hosted on a Green web host. This should be noted as changes to these variables would affect the final carbon emissions estimate produced on this page.

View online at: https://fershad.github.io/webpage-co2e/

1. Clone this repository.
2. Navigate to root folder for this project on your device.
3. Run npm run start. This will install the http-server package and spin up a local server.
4. Visit https://localhost:8080 to view the demo.