DEV Community

SIKOUTRIS
SIKOUTRIS

Posted on

How We Built Carbon Badge: A Website Carbon Calculator Using SWDM v4

#webdev #sustainability #php #opensource

How We Built Carbon Badge: A Website Carbon Calculator

Every website has a carbon footprint. Every page load consumes energy across data centers, networks, and end-user devices. Most site owners have no idea how much.

We built Carbon Badge to make website carbon emissions visible and actionable.

The Problem

Website sustainability is growing in importance:

  • The internet accounts for roughly 3.7% of global carbon emissions
  • An average web page produces about 0.5g CO2 per pageview
  • EU regulations are pushing digital sustainability requirements

But measuring website carbon is surprisingly complex. There was no simple tool that combined accurate calculations with an embeddable badge.

How It Works

The Sustainable Web Design Model (SWDM v4)

We use the latest SWDM v4 methodology from the Sustainable Web Design community:

// Energy intensity: 0.194 kWh per GB transferred
// Split: Data Center (0.055) + Network (0.059) + Device (0.080)
define('SWDM_KWH_PER_GB', 0.194);
define('SWDM_GRID_INTENSITY', 494); // gCO2/kWh world average
Enter fullscreen mode Exit fullscreen mode

The calculation considers:

  1. Page weight — Total bytes transferred (HTML, CSS, JS, images, fonts)
  2. Energy per byte — Using SWDM v4 coefficients for DC, network, and device
  3. Grid carbon intensity — 494 gCO2/kWh global average
  4. Green hosting — Reduced factor if hosted on renewable energy (checked via Green Web Foundation API)

Grading System

Grade CO2 per pageview
A < 0.15g
B < 0.30g
C < 0.50g
D < 0.75g
E < 1.00g
F > 1.00g

The Embeddable Badge

Sites can embed a carbon badge showing their grade:

<a href="https://carbon-badge.com">
  <img src="https://carbon-badge.com/api/badge/yourdomain.com" 
       alt="Carbon Badge" width="140" height="40">
</a>
Enter fullscreen mode Exit fullscreen mode

The badge updates automatically every 24 hours.

Technical Stack

  • PHP 8.1 + MySQL on o2switch
  • Cloudflare for DNS and CDN
  • Green Web Foundation API for green hosting verification
  • Stripe for Pro/Business/Enterprise plans
  • Cookie consent with conditional GA4 loading

Performance

Practicing what we preach:

  • Full security headers (HSTS preload, CSP, X-Frame-Options)
  • Dark theme (lower energy on OLED screens)
  • Minimal JavaScript
  • Schema.org markup (WebSite, Organization, SoftwareApplication, FAQPage)

Pricing Model

  • Free: 3 scans/day, 1 page per scan
  • Pro (9 EUR/mo): 50 scans/day, embeddable badge, monitoring
  • Business (29 EUR/mo): 500 pages/scan, API access, 5 sites
  • Enterprise (79 EUR/mo): Unlimited everything

Content Strategy

16 articles covering:

  • Website carbon calculation methodology
  • Green hosting explained
  • Reducing website carbon footprint
  • CSRD digital sustainability requirements
  • Industry benchmarks

Lessons

  1. The SWDM methodology is well-documented but translating it into code required careful attention to units
  2. Green Web Foundation's API is excellent — free, fast, well-maintained
  3. Dark themes aren't just aesthetic — they reduce energy consumption on OLED devices
  4. Badge mechanics drive viral growth — each badge is a backlink and brand impression

Try it: Carbon Badge — Free website carbon calculator with embeddable sustainability badge.

Top comments (0)