What is a Carbon Badge

I’ve added a javascript badge to the bottom of the website. It calculates the carbon usage of each page of this site.

The badge is created by websitecarbon.com. They are taking the effort to raise awareness of energy usage across the world wide web. You can read about how they calculate carbon usage here: https://www.websitecarbon.com/how-does-it-work/

Some Analysis

Here is my examination of the minified javascript. It is doing what their site states it is doing.

This is the code with some indentation and whitespace added:

#https://unpkg.com/website-carbon-badges@1.1.3/b.min.js#

const wcID = e=>document.getElementById(e),

wcU = encodeURIComponent(window.location.href),

newRequest = function(e = !0)
{
	fetch("https://api.websitecarbon.com/b?url="+wcU)
	.then((function(e)
	{
		if(!e.ok)
			    throw Error(e);
		
		return e.json()
	}))
	.then((function(n)
	{
		e && renderResult(n),
		n.t = (new Date).getTime(),
		localStorage.setItem("wcb_"+wcU, JSON.stringify(n))
	}))
	.catch((function(e)
	{
		wcID("wcb_g").innerHTML = "No Result",
		console.log(e),
		localStorage.removeItem("wcb_"+wcU)
	}))
},

renderResult = function(e)
{
	wcID("wcb_g").innerHTML = e.c+"g of CO<sub>2</sub>/view",
	wcID("wcb_2").insertAdjacentHTML("beforeEnd","Cleaner than "+e.p+"% of pages tested")
},

wcC = "<style>#wcb.carbonbadge{--b1:#0e11a8;--b2:#00ffbc;font-size:15px;text-align:center;color:var(--b1);line-height:1.15}#wcb.carbonbadge sub{vertical-align:middle;position:relative;top:.3em;font-size:.7em}#wcb #wcb_2,#wcb #wcb_a,#wcb #wcb_g{display:inline-flex;justify-content:center;align-items:center;text-align:center;font-size:1em;line-height:1.15;font-family:-apple-system,BlinkMacSystemFont,sans-serif;text-decoration:none;margin:.2em 0}#wcb #wcb_a,#wcb #wcb_g{padding:.3em .5em;border:.13em solid var(--b2)}#wcb #wcb_g{border-radius:.3em 0 0 .3em;background:#fff;border-right:0;min-width:8.2em}#wcb #wcb_a{border-radius:0 .3em .3em 0;border-left:0;background:var(--b1);color:#fff;font-weight:700;border-color:var(--b1)}#wcb.wcb-d #wcb_a{color:var(--b1);background:var(--b2);border-color:var(--b2)}#wcb.wcb-d #wcb_2{color:#fff}</style>",

wcB = wcID("wcb");

if ("fetch" in window)
{
	wcB.insertAdjacentHTML("beforeEnd", wcC),

	wcB.insertAdjacentHTML("beforeEnd", '<div id="wcb_p"><span id="wcb_g">Measuring CO<sub>2</sub>&hellip;</span><a id="wcb_a" target="_blank" rel="noopener" href="https://websitecarbon.com">Website Carbon</a></div><span id="wcb_2">&nbsp;</span>');

	let e = localStorage.getItem("wcb_"+wcU);

	const n = (new Date).getTime();

	if( e )
	{
		const t = JSON.parse(e);
		renderResult(t),
		n - t.t > 864e5 && newRequest( !1 )
	}
	else
		newRequest()
}

Your Data

The only variable the javascript takes from your visit is the website’s URL (in this case, liamwhalen.com and any pages e.g. liamwhalen.com/welcome). The javascript performs a fetch() call, which is an https:// request to the api site with the URL as a parameter. According to websitecarbon.com’s privacy policy they are recording information about these calls (i.e. IP address, web browser type, etc.). The information is stored in a database and the results published to their site. I do not know what information they are keeping, but I have given two examples for clarification about what they might be recording via an https:// request.

Here is a link to their privacy policy: https://www.websitecarbon.com/privacy-policy/

They store data to help determine carbon usage. They use Google Analytics to help achieve this. I do not mind Google Analytics. I mention it here for transparency.

After you visit a page at liamwhalen.com, the values calculated are stored on your local computer using the local storage technology of your web browser. That local store is only updated if it has been over 24 hours since your last visit to a specific page. This is checked in the line:

    n - t.t > 864e5 && newRequest( !1 )

864e5 = 86,400,000 milliseconds = 86,400 seconds / 60 = 1,440 minutes = 24 hours. So, they are not recording every visit to each page. Only the first visit since the last 24 hours you have loaded a web page. Because it is using local storage, this check is unique for each user, and if you use more than one web browser it is unique within web browsers because they each have their own local storage.

The && in the check above short circuits if the time elapsed is not greater than 24 hours. Therefore, newRequest( !1 ) is only called when needed.

I hope you do not mind my adding this badge to the site. As the people at websitecarbon.com mention, they are conscious of the fact that adding the badge also creates traffic that adds to the carbon usage of the world wide web. However, this badge is a small addition, and I believe that increasing awareness of this issue is important. As a side effect, encouraging the creation of efficient pages will build a world wide web that loads faster, which creates a pleasant browsing experience.

Custom CSS Styling

The good folks at websitecarbon.com have defined variables for the colours used by the badge. If you enclose the badge in your own div, you can specify different colours very easily by using a more specific CSS selector.

Since the colours of my site are white and blue, I opted to set both the colours of the badge to the same blue. This affects the outline of the badge, the background colour of the ‘Website Carbon’ link portion of the badge, and the text of the badge.

Example HTML

<div id="example-websitecarbon">
	<!--the code provided by https://websitecarbon.com/badge-->
</div>

Example CSS

#example-websitecarbon #wcb.carbonbadge {
	--b1:#6a9fb5; 
	--b2:#6a9fb5;
}