A option for CO2 emission assessment of your website

The “correct” capture of Scope 3 emissions is anything but trivial

This also applies to the capture of CO2 emissions from your website, which can be located in the above diagram on the right as “Scope 3-Downstream Activities”. This applies 100% if your website is hosted by a web hoster or co-located, and partially (about 63%) if your website is hosted in your own data center.

To bring some light into the darkness I would like to list which so called “System Boundaries” are involved until your website can be delivered to your customers. The list does not claim to be complete:

• Your website needs to be programmed, even if you use a CMS like WordPress
  • This generatesCO2 emissions when programming WordPress core, plugin and theme code
  • This generatesCO2 emissions when hosting WordPress sources on wordpress.org
  • The generatedCO2 emissions when hosting plugins and themes for example on Themeforest
• Your website must also be hosted somewhere
  • Your webhoster has to run his datacenter with electricity, cooling and employees
  • The servers, switches, routers and cables purchased by your web host have to be built somewhere and delivered to your host; this generates CO2 emissions
  • The web server and database your website runs on consumes electricity; this generates CO2 emissions.
• When delivering your website (from the web server to your customers) CO2 emissions are generated by the use of “the internet” with its cables, switches and routers (which in turn run in data centers).
  • Here you don’t know if everywhere “green” electricity is used for operation.
• When your website arrives at your visitors’ devices and is rendered / displayed, this generates CO2 emissions.
  • The wifi router, the PC, the laptop, the tablet, the cell phone of your customers need electricity, of which you do not know how “green” it is; this generates CO2 emissions.
  • Depending on age, CPU generation, number of CPU’s, amount of memory used, SSD or HDD usage, screen size, number of browser windows and tabs opened, etc., a device produces different amounts of CO2 emissions through power consumption.
  • Mobile surfing (outside of a wlan) requires radio masts to be built and operated by your network operator. This also generates CO2 emissions
  • The CO2 emissions are highest for mobile connections, followed by DSL and fiber-optic lines.

As you can see, there are a lot of unknown variables involved.

Sitespeed.io as an opportunity to capture CO2 emissions

I use Sitespeed.io myself to monitor CO2 emissions of my own and client websites. Sitespeed.io is a Node.js application based on the CO2.js framework of the Green Web Foundation.

The creators of Sitespeed.io offer the tool out-of-the-box as a Docker container. Alternatively, you can install Sitespeed.io “by hand” in good old Linux admin fashion, which was my preferred way.
So now “my” Sitespeed.io instance is running on a cloud server at Hetzner and consists of the following components:

• Sitespeed.io as Node.js application
• InfluxDB as database
• Grafana as graphical frontend
• The whole thing runs behind a Nginx reverse proxy, because I didn’t want to let Grafana run completely “naked” on the net

Practically it looks like that on my virtual CloudServer:

• Under /opt/sitespeed/bin/ the bash scripts for each domain to be captured are stored.
• In /opt/sitespeed/sitespeed-results/ the “HTML-results”, the images and videos of the captured domain are stored
• Under /var/lib/influxdb/data/ the data of the InfluxDB are stored.
• The bash scripts are called under the user “sitespeedio” in his crontab every 24 hours.

#!/bin/bash

# Declare Variables
WORK_DIR="/opt/sitespeed/"
BROWSER="chrome"
SUSTAINABLE="--sustainable.enable --sustainable.useGreenWebHostingAPI true --sustainable.model swd --sustainable.pageViews 250"
DISABLE="--visualMetrics=false --plugins.remove html --plugins.remove screenshot"
INFLUX="--influxdb.host=localhost --influxdb.database=datenbankname --influxdb.annotationScreenshot true --resultBaseURL https://da-findest-du-deine-testergebnisse.de/sitespeed-result"
SITESPEED="/home/sitespeedio/.npm-packages/bin/sitespeed.io"
URLS="${BIN_DIR}/wploft-url.txt"
BROWSERTIME="--browsertime.visualMetricse false"

# Inactive Variables
BIN_DIR="${WORK_DIR}/bin"
ME=`basename "$0"`
RUN="${BIN_DIR}/${ME}"
BT_HEADLESS="--browsertime.headless true"
BT_FLUH_CACHE="--browsertime.flushDNS true"
BT_PREWARM="--preWarmServer"

#################

cd ${WORK_DIR}

echo `date` " Starte Erhebung von ...." >> /tmp/sitespeed.log
${SITESPEED} -n 3 -d 2 -b ${BROWSER} ${BROWSERTIME} https://deine-domain.de --xvfb --connectivity.engine throttle -c cable ${INFLUX} ${SUSTAINABLE} --gzipHAR --name=deine-domain
echo `date` " Beende Erhebung von ...." >> /tmp/sitespeed.log
echo "----------------------------------------------"

Sitespeed is very well documented in my opinion! You can find all configuration options of Sitespeed here. You can reach the GitRepo with this url: https://github.com/sitespeedio/sitespeed.io

Visualization of collected CO2 emissions via Grafana

The Grafana board presented below should be seen as a suggestion of a visualization and can be downloaded as JSON here.
The board fully covers my current usecases. Feel free to contribute via Git, or we can exchange ideas via a virtual meeting. Just write me a mail, or contact me.