Announcing the Website Carbon Badge

The work of reducing carbon emissions on the web is mostly invisible.  Low carbon websites don’t necessarily look any different from the carbon heavy variety as many of the changes happen under the hood. Since launching websitecarbon.com, our website carbon calculator, a couple of years ago, we’ve heard from many companies and developers who have dramatically cut their website’s carbon emissions after seeing their scores, yet these successes go mostly unnoticed and uncelebrated. 

We wanted  to create an easy way for any site to show its website carbon emissions, increase awareness around the issue and show off the achievement of having a low carbon website. We wanted to celebrate the businesses and individuals going the extra mile to make a difference. Enter the Website Carbon Badge!

The badge is easy to add to any site and shows a live carbon calculation of the current page. Just copy a couple of lines of code into your page template or CMS and on every visit to the page, the badge will display the score. If you add it to a common component like the footer, you’ll see a calculation on every page. 

Just two lines!

Currently there are just two theme options – light and dark – but if you have even a smidgeon of CSS knowledge, you can customise the colours, shapes and fonts however you like. Here’s an example where I’ve added the wcb-d class to enable the dark theme which works better on dark backgrounds and some inline css for a larger font-size.

We soft launched this badge earlier this year and it has been tested in the wild and refined and is now ready for you to use. If you’re proud of your website carbon score, add it to your site to tell the world and raise awareness about the internet’s carbon impact. Please drop us a line if you do this as we’d love to see it in action!

See websitecarbon.com/badge for more instructions.

For those of you who code or are just interested in how we approached making a lightweight javascript based badge, read on.

The key technical aims for the badge were:

• Low carbon and performance impact
• Themeable so it could better integrate with different backgrounds
• Simple enough to add to a site that any blog writer could include it.

Initially when we set to work on this badge we were going to approach it like the status badges you see on NPM and Github – using a generated image. We went as far as spinning up a basic SVG generator which spat out a static badge with the score on it. The drawback of this approach was that because the badge would be included on on every page of a website, each result would be an entirely new image showing a different score and none of it would be cached between pages. An HTML badge doesn’t have this issue as the only dynamic element of the badge would be the carbon score. The presentation and logic could all be efficiently cached in one small Javascript file.

Taking advantage of now having a script running on the client side, we reduced the requests we make by saving the results in localStorage and only making a request to the API at most once a day. The badge is now served in a single js file which can be delivered easily via unpkg and is highly cacheable across pages and across websites.

Using this method, the data transfer looks like this:

• First download → ~1.3kb
• Subsequent pages —> ~380 B (just the API response)
• Return to a page visited in the last 24 hours —-> 0B
• Visits to any other site using the badge —> ~380 B (again, just the API response)

The other huge benefit of this approach is how customisable it is. Anyone can customise the styles to suit their own site. At some point, we’ll release an unstyled version of the badge to allow for even more flexibility in the implementation. You can see a more customised version of the badge in the footer of this page.

If you have any ideas on how we can further reduce the page weight, please let me know ([email protected]) or contribute via the Git repo.

p.s Big thanks to Ivo Bathke for building a React wrapper for the badge: https://www.npmjs.com/package/react-carbonbadge