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!
Adding the Website Carbon Badge to Your Site
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!
<div id="wcb" class="carbonbadge"></div> <script src="https://unpkg.com/[email protected]/b.min.js" defer></script>
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.
<div id="wcb" class="carbonbadge wcb-d" style="font-size: 20px;"></div> <script src="https://unpkg.com/[email protected]/b.min.js" defer></script>
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.
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.
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
Test your website on Website Carbon
Pop a web address in the form below and run a test to see the carbon calculator in action: