Sustainability claims are everywhere, and people are rightfully skeptical. "Our website is eco-friendly" means nothing without data. A carbon badge changes that — it puts a real number on your website, measured in real time, visible to every visitor. No hand-waving, no vague promises. Just data.
I built Carbon Badge because I was tired of seeing sustainability claims on websites that loaded 15MB of JavaScript and autoplay video. If you care about your website's environmental impact, prove it publicly. If you do not care yet, maybe seeing the number will change your mind.
What a Carbon Badge Shows
A carbon badge is a small, embeddable widget that displays the estimated CO2 emissions per page view for the page it is displayed on. The visitor sees something like: "This page produces 0.32g CO2 per view — cleaner than 78% of websites tested."
That single number communicates: this website has been measured (unlike 99% of websites), the result is public (transparency = accountability), and there is a benchmark (how does this compare to others?).
For sites that score well, the badge is a genuine differentiator. For sites that score poorly — well, the badge becomes a motivator. Nothing drives optimization faster than a publicly visible bad score.
How the Measurement Works
When you scan a page through our scanner or embed the badge, here is what happens behind the scenes:
Step 1: Page load analysis. We load the page and measure the total data transfer — every HTML file, CSS stylesheet, JavaScript bundle, image, font, API call, and third-party request. This gives us the page weight in bytes.
Step 2: SWD model application. We apply the Sustainable Web Design (SWD) model v4 to convert bytes to energy consumption (kWh). The model distributes energy across four segments: data center operations (15%), network transmission (14%), end-user device processing (52%), and infrastructure production (19%).
Step 3: Carbon intensity calculation. We multiply the energy consumption by a carbon intensity factor — grams of CO2 per kWh. By default, we use the global average grid carbon intensity (0.442 kg CO2e/kWh as of the latest IEA data). If we can determine the hosting provider and their energy sourcing (through the Green Web Foundation database), we adjust the data center component accordingly.
Step 4: Benchmark comparison. We compare the result against our database of measured websites to generate the percentile ranking ("cleaner than X% of websites").
The measurement is repeated periodically (typically weekly) to track changes. If you optimize your page — compress images, remove scripts, switch to green hosting — the badge updates to reflect the improvement.
How to Embed a Carbon Badge
Embedding is straightforward. After scanning your site at /scan, you receive a snippet of HTML/JavaScript to add to your page. The snippet is lightweight — under 5KB — because adding a heavy script to measure carbon would be ironic, to say the least.
The badge can be placed in your footer, sidebar, or any location where it is visible without dominating the layout. Most sites put it in the footer next to privacy policy and legal links.
Customization options include: light and dark themes, compact and detailed display modes, position and styling overrides, and the option to link directly to a detailed report page for your site.
What Drives Your Score
The factors that most influence your carbon badge result are, in order of typical impact:
Page weight (especially images): This is usually the dominant factor. A page with 3MB of unoptimized images will score poorly regardless of other optimizations. Compress and convert images to WebP or AVIF, use lazy loading, and implement responsive images.
Third-party scripts: Analytics, chat widgets, marketing pixels, social embeds. Each adds data transfer and processing load. Audit ruthlessly — remove what you do not genuinely need.
Web fonts: Custom fonts add 100-500KB per page. Subset fonts to only needed characters, use font-display: swap, and consider system font stacks.
Hosting energy source: Verified green hosting reduces your data center emission component. This shows up directly in the badge calculation.
Caching and CDN: While these do not change the first-visit measurement, they reduce emissions for returning visitors — which matters for your total annual footprint.
Why Public Carbon Transparency Matters
A carbon badge is not just a measurement tool. It is a commitment device. Once the number is public, you are accountable.
I have seen this play out with dozens of sites that embed our badge. The pattern is consistent: they embed the badge, see a number they are not proud of, immediately prioritize optimization work, watch the number improve, and then become advocates for web sustainability in their industry.
The psychological mechanism is simple — public accountability works. A carbon metric buried in an internal dashboard gets ignored. A carbon metric visible to every visitor gets fixed.
Beyond accountability, the badge signals values to your audience. In B2B contexts, sustainability-conscious procurement teams notice. In B2C contexts, environmentally aware consumers notice. In both cases, the badge says: "We measure, we care, and we are transparent about it."
For Agencies and Developers
If you build websites for clients, carbon badges add a dimension to your deliverables that most competitors do not offer. Including a carbon measurement in your project scope — and targeting a specific score — positions sustainability as a design and development competency, not just a marketing claim.
Some agencies now include carbon performance alongside Core Web Vitals in their quality standards. The overlap is nearly complete — the same optimizations improve both metrics.
For developers contributing to open-source projects, embedding a carbon badge on documentation sites or project homepages sets a standard for the community.
Common Questions
Does the badge add to my page's carbon footprint? Minimally. The badge script is under 5KB gzipped. For reference, that is less than a single small image or a few lines of CSS.
How often is the measurement updated? Typically weekly. Major changes (like a site redesign or hosting switch) will be reflected within a week.
Can I remove the badge if I do not like my score? You can, obviously. But the more productive response is to fix the issues driving the score. Check our optimization guide for practical steps.
Is the measurement accurate? It is an estimate based on the SWD model and available data. No website carbon calculator is perfectly accurate — the variables are too complex. But the measurement is consistent, which means it reliably tracks improvement over time. That is what matters most.