The internet is a physical infrastructure running on electricity. Every page load — yours, your competitor's, every news article anyone read today — transferred data across servers, fibre cables, mobile towers, and screens. All of it burned energy. Most of that energy still comes from fossil fuels. The CO₂ released in that process is a website's carbon footprint, and measuring it has gone from niche academic exercise to practical business concern in less than a decade.
This guide is the entry point for the entire topic. Each section below gives you the working knowledge you need, then points you to the deep-dive article if you want the full treatment. Think of it as a structured map of the field — useful whether you are starting from zero or filling in specific gaps.
Use the Carbon Badge scanner to measure your own site while you read. The numbers will make everything more concrete.
A Brief Timeline of Web Sustainability
Understanding where the field came from helps make sense of why the standards, tools, and regulations look the way they do today.
2003: The first academic papers on internet energy consumption appear, mostly focused on data centre PUE (Power Usage Effectiveness). The concept of per-pageview emissions does not yet exist as a practical metric.
2009: Google's Luke Wroblewski coins the term “mobile first” — indirectly, this becomes relevant to carbon because mobile networks are significantly less energy-efficient per byte than wired connections. Designing for mobile means designing for lower data transfer, which aligns with sustainability goals even if that is not the motivation.
2013: Wholegrain Digital begins researching the carbon cost of web pages. This eventually leads to the Sustainable Web Design Model, the methodology that underlies most carbon tools today.
2017: The Website Carbon Calculator launches as the first public tool to estimate per-pageview CO₂. It brings the concept out of academic papers and into the hands of developers and agencies.
2019: The Sustainable Web Design community group forms at the W3C. The Green Web Foundation's dataset of verified green hosting providers reaches significant scale. The loading=“lazy” HTML attribute lands in Chrome — a small change with substantial carbon implications.
2021: SWDM v2 publishes. HTTPArchive data shows median page weight has crossed 2 MB. The gap between what is technically achievable and what is actually deployed widens.
2023: SWDM v4 releases, revising energy coefficients with updated data and splitting new vs. returning visitor calculations. The EU's Corporate Sustainability Reporting Directive (CSRD) enters force, beginning its phased rollout of mandatory ESG reporting for European companies — digital emissions land squarely in scope.
2024: France's REEN law (digital sobriety) fully takes effect for large companies. HTTPArchive records median desktop page weight at 2.3 MB. Carbon Badge launches with SWDM v4 at its core.
2026: CSRD reporting requirements expand to mid-size companies. The conversation shifts from “should we measure this?” to “how do we report it and reduce it?”
What Is a Website Carbon Footprint?
Every byte that travels from a server to a browser consumes electricity across three segments: the data centre hosting the files, the network infrastructure transmitting them, and the user's device rendering them. The Sustainable Web Design Model v4 (SWDM v4) assigns energy coefficients to each segment — 0.055 kWh/GB for data centres, 0.059 kWh/GB for networks, 0.080 kWh/GB for end-user devices — totalling 0.194 kWh per gigabyte transferred.
Multiply that by the world average grid carbon intensity (494 gCO₂/kWh from Ember Climate data) and you get the gram-per-pageview figure that carbon tools report. A 2.5 MB page on a non-green host emits roughly 0.24g CO₂ per visit. At 10,000 monthly pageviews, that is about 29 kilograms of CO₂ per year — from a single page.
The concept is more nuanced than it first appears: new vs. returning visitors have different energy profiles (returning visitors hit cache), mobile and desktop networks differ in efficiency, and green hosting changes the calculation by a meaningful 24.3%. The detailed conceptual introduction unpacks all of this, including the business case for caring about it beyond environmental responsibility.
How the SWDM v4 Formula Actually Works
Most people who use carbon scanners have never looked at the formula underneath. That is fine for day-to-day use, but it matters when you want to understand why two tools give different results, or why green hosting has such a pronounced effect on your score.
The core equation:
CO₂ (g) = page_weight_GB × 0.194 kWh/GB × 494 gCO₂/kWh × (1 − green_factor)Where green_factor = 0.243 if the host is verified renewable. SWDM v4 also introduced a new vs. returning visitor split: returning visitors, who load assets from browser cache, contribute roughly 0.02 kWh/GB of new data versus 0.194 kWh/GB for first-time visitors. The blended figure tools report assumes a 75/25 split by default.
The coefficients come from peer-reviewed data sources — IEA, Ember Climate, and original research by Wholegrain Digital — but they are global averages. Real-world emissions vary by data centre PUE, network type, and device. SWDM v4 provides a consistent, comparable baseline rather than precise measurement for any individual page load. That is an important distinction when interpreting scores. The full SWDM v4 breakdown covers every coefficient, the academic sources behind them, and what changed between v2 and v4.
Quick Reference: Carbon Grade Scale
| Grade | CO₂ per pageview | What it means |
|---|---|---|
| A | Under 0.15g | Top 10% — excellent |
| B | 0.15 – 0.30g | Better than average |
| C | 0.30 – 0.50g | Average — global median ~0.5g |
| D | 0.50 – 0.75g | Poor — significant headroom |
| E | 0.75 – 1.00g | Worst 20% by emissions |
| F | Over 1.00g | Immediate action needed |
How to Measure Your Website's Carbon Footprint
Measurement is where most organisations should start. You cannot set a reduction target without a baseline, and the baseline often surprises people — pages they assumed were lightweight turn out to be mid-D, and vice versa.
The Carbon Badge scanner applies SWDM v4 directly: enter a URL, get a grade (A–F), a gram-per-pageview figure, and a check against the Green Web Foundation's database to determine whether your host is verified renewable. It takes about ten seconds per page and requires no account for a one-off scan. The pro tier adds scheduled monitoring — useful for catching regressions when a new deploy unknowingly ships a 3 MB hero image.
Beyond a single tool, a complete measurement workflow involves pairing a carbon scanner with Google Lighthouse (which surfaces the same page weight issues through a performance lens), the Chrome DevTools Network panel (to see exactly what is transferring and at what compressed size), and periodic benchmarking against HTTPArchive medians for your category. The practical measurement guide walks through the full workflow, including how to handle multi-page sites, single-page apps, and pages behind authentication.
Quick Reference: What Drives Page Weight
| Resource type | Share of median page | Primary lever |
|---|---|---|
| Images | ~50% | WebP/AVIF, responsive srcset, lazy loading |
| JavaScript | ~25% | Tree shaking, code splitting, defer third-party |
| CSS + fonts | ~10% | Subset fonts, remove unused CSS, self-host |
| HTML + data | ~15% | Static generation, compression, efficient APIs |
How to Reduce Your Website's Carbon Footprint
Once you have a baseline score, the reduction path is fairly predictable for most sites. Images are almost always the biggest lever — they account for roughly 50% of median page weight, and conversion to WebP or AVIF alone can cut image payload by 25–50% with no visible quality loss. Add responsive srcset attributes and loading=“lazy” for below-the-fold images, and it is common to see a 40% total page weight reduction from image optimisation alone.
JavaScript is the second target. The Chrome Coverage tab routinely shows 40–60% of loaded JS is dead code — never executed on that page. Removing it, splitting it, or deferring it reduces both transfer cost and the CPU energy the user's device burns parsing and compiling it. Third-party scripts — chat widgets, analytics, pixels — deserve particular scrutiny, because their carbon cost never appears in your own bundle analysis.
Green hosting is the highest-impact single configuration change: no code required, 24.3% CO₂ reduction in the SWDM formula. Brotli compression, aggressive cache headers, and CDN edge caching compound the savings further. The complete reduction guide covers every technique with real numbers, code examples, and a prioritised action plan — including the nuances of OLED dark mode, font subsetting, and server-side rendering decisions that most guides skip.
Displaying Your Score: Carbon Badges
A carbon grade is more useful when it is visible. Displaying a badge on your website creates accountability — it shows visitors a concrete, verifiable metric rather than a vague sustainability claim, and it creates internal pressure to maintain or improve the score with each deployment.
Carbon badges are available as static SVG embeds (for sites where external scripts are not feasible), JavaScript widgets (which update automatically as your score changes), and API-driven custom implementations. The badge itself links back to a live scan so visitors can verify the score independently. The full badge guide covers the different badge types, what each element means, and how to communicate your score credibly to a non-technical audience.
How to Embed a Carbon Badge on Your Site
Implementation is deliberately straightforward. The one-line script embed looks like this:
<script src="https://carbon-badge.com/badge.js" data-url="https://yourdomain.com"></script>For WordPress, there is a plugin. For static site generators, the SVG embed or API approach avoids adding any JavaScript to the page at all — which is itself a carbon-conscious choice. The embedding implementation guide covers all integration methods with copy-paste code for the most common stacks: HTML, WordPress, React, Vue, and static generators including Astro and 11ty.
The Tools Landscape: What Is Available
Carbon Badge is not the only tool in this space, and the right choice depends on your workflow, reporting requirements, and whether you need single-page spot checks or portfolio-level monitoring across dozens of sites.
The main players as of 2026: Website Carbon Calculator (Wholegrain Digital, the original), EcoPing (monitoring-focused with alerting), Ecograder (adds SEO and UX factors), Beacon (agency-oriented bulk scanning), and Carbon Badge (SWDM v4, badge generation, and scheduled monitoring). They differ meaningfully in methodology choices, how they handle green hosting verification, whether they account for return visitors, and what additional context they provide around the raw number.
The full tool comparison breaks down each option across ten criteria: methodology, accuracy, monitoring, badge support, API access, pricing, and more. If you are evaluating tools for a larger organisation or agency workflow, that comparison will save you several hours of testing. And if you are specifically looking at EcoPing as a candidate, the EcoPing alternative analysis covers its specific strengths and the cases where a different tool is the better fit.
The Internet's Carbon Footprint: Context and Scale
Individual site choices feel small in isolation. Understanding the aggregate scale is what makes them feel worth doing — and what makes the case internally for investing engineering time in carbon optimisation.
The internet as a whole consumed approximately 416 TWh of electricity in 2023, comparable to the UK's entire national consumption. Digital infrastructure accounts for roughly 3.7% of global greenhouse gas emissions — comparable to commercial aviation. Internet traffic is projected to double again by 2027, and hardware efficiency improvements are only partially offsetting that growth.
The distribution is also heavily skewed. The top 10,000 websites by traffic generate a disproportionate share of total internet carbon. Optimising a major platform is orders of magnitude more impactful than optimising a personal blog — which is why large organisations face increasing regulatory pressure. The detailed statistics overview covers these figures by sector, geography, and projection, with citations to the primary research. It is the resource to share when you need to make the business case for sustainability investment.
Regulations and Compliance: What Is Coming
This is where I have seen the most change in client conversations over the past two years. Sustainability reporting used to be optional and voluntary. It is becoming mandatory for an expanding set of organisations, and digital emissions are in scope.
The EU's Corporate Sustainability Reporting Directive (CSRD) entered force in 2024 and phases in mandatory ESG reporting requirements through to 2028. Large companies were first; mid-size companies come into scope in 2026. CSRD requires reporting on Scope 3 emissions — which include digital operations and supply chain technology use. Website emissions sit in Scope 3.
France's REEN law (digital sobriety) specifically targets large French companies and public bodies, requiring them to reduce the environmental impact of their digital services. Germany and the Netherlands have similar legislation in various stages of discussion. The direction is consistent: digital sustainability will be a compliance requirement, not a differentiator, within a few years.
For organisations with formal sustainability reporting requirements, a systematic approach — baseline measurement, documented reduction actions, annual progress reporting — is exactly what auditors will expect. The website sustainability audit guide covers the audit process end-to-end: what to measure, how to document it, how to structure a sustainability report that meets both internal and regulatory expectations, and how to embed ongoing monitoring into your development workflow.
Where the Field Is Heading
A few trends worth watching as the discipline matures.
Real-time carbon intensity data. SWDM v4 uses a fixed global average carbon intensity (494 gCO₂/kWh). The next generation of tools will factor in time-of-day and geographic grid data — so a page load at 2 AM in Norway (when hydroelectric power dominates) has a genuinely different carbon cost than the same page load at peak demand in Poland. APIs like Electricity Maps make this technically feasible today; mainstream tooling adoption is a year or two away.
LCA-style full lifecycle accounting. Current tools measure operational carbon (the energy cost of transferring data). The full lifecycle includes embodied carbon in hardware manufacturing — the carbon cost of fabricating the server chips, the user's device, the network routers. Embodied carbon is potentially larger than operational carbon for some hardware categories. Methodologies that account for it are emerging but not yet standardised.
Carbon as a CI/CD gate. The logical endpoint of automated monitoring is blocking deploys that regress past a carbon threshold — treating a 0.5g page as a failed test in the same way a broken unit test blocks a merge. A handful of forward-thinking teams are already doing this. It will become a best practice pattern within the next few years.
Expanded regulatory scope. CSRD and REEN are the first wave. Expect broader EU digital sustainability legislation, potential UK equivalents post-Brexit alignment, and sector-specific requirements in finance, healthcare, and government procurement. Companies with clean measurement infrastructure and reduction trajectories already documented will adapt quickly. Those starting from zero when regulation arrives will struggle.
Where to Go From Here
This guide is the map. The articles below are the territory.
- New to the concept? Start with what a website carbon footprint is and why it matters.
- Ready to measure? The practical measurement guide walks through the full workflow.
- Want to understand the maths? The SWDM v4 deep-dive covers every coefficient and assumption.
- Focused on reduction? The complete reduction guide has the full technical playbook.
- Need the data? Internet carbon emissions statistics covers the aggregate picture with cited sources.
- Evaluating tools? The tool comparison covers all major options side by side.
- Looking at EcoPing specifically? See the EcoPing alternative analysis.
- Want to display your score? The badge guide covers everything about carbon badges.
- Need implementation help? The embedding guide has copy-paste code for every major stack.
- Building a formal sustainability programme? The sustainability audit guide covers the full process.
Start by running your most important page through the Carbon Badge scanner. The number you get back will tell you immediately which part of this guide is most relevant to you.