Key takeaways
Published estimates for the carbon footprint of an average web page view range from 0.36g to 4.61g of CO2e — a 13-fold spread. The disagreement is methodological, not measurement error.
The Sustainable Web Design Model (SWDM) v4 — a collaboration between Wholegrain Digital, Mightybytes, Footsprint, EcoPing and the Green Web Foundation — is the most transparent model available, and it uses page weight as a proxy for data transfer.
Under SWDM v4, user devices account for 54% of system energy, networks 24%, and data centres 22%. Most "green hosting" marketing addresses the smallest slice.
Which means the highest-leverage sustainable web design action is not switching host. It is shipping fewer bytes.
Every optimisation here also makes the site faster, which makes it convert better. There is no trade-off to manage.
Start by distrusting the number
Search for the carbon footprint of a web page and you will be given a confident figure. Which figure depends entirely on which page you land on:
Estimate per page view | Attributed to |
|---|---|
~0.36 g CO2e | Website Carbon Calculator, SWDM v4 |
~0.5 g CO2e | Website Carbon Calculator, different sample/version |
~1.76 g CO2e | Alternative calculator methodology |
~4.61 g CO2e | RESET.ORG |
That is a 13-fold range for what sounds like a single measurable quantity. Anyone quoting one of these as settled fact is either unaware of the others or hoping you are.
The spread comes from real methodological choices:
- Which model version. SWDM v4 produces materially lower estimates than v3 for the same page. Figures published before the v4 update are not comparable with figures published after it.
- Grid intensity assumptions. SWDM v4 uses a global average of 494 gCO2e/kWh, based on data from the energy think tank Ember. A model assuming a dirtier or cleaner grid produces a different answer for identical traffic.
- Whether embodied emissions count. v4 accounts for the emissions of manufacturing the devices, network equipment and servers involved, not only the electricity they consume while running. Models that ignore embodied emissions report lower numbers.
- Where the system boundary sits. Some models stop at the data centre. SWDM includes networks and, crucially, the user's device.
None of this means the exercise is pointless. It means the absolute number is unreliable and the relative comparison is not. Cutting your page weight in half genuinely halves the data-transfer component under any of these models. That is the useful signal, and it is what you should optimise against.
Where the energy actually goes
This is the finding that should reorganise your priorities. Under SWDM v4, system energy divides roughly as:
Segment | Share of system energy |
|---|---|
User devices | 54% |
Networks | 24% |
Data centres | 22% |
The operational intensities behind that: 0.055 kWh/GB for data centres, 0.059 kWh/GB for networks, and 0.080 kWh/GB for user devices, drawn from IEA and ITU data.
Most sustainable-web marketing is about hosting, which is the 22% slice. Green hosting is worth doing — SWDM v4 added a Green Hosting Factor precisely so that renewable-powered data centres are properly credited — but it addresses the smallest part of the system.
The majority of the impact is the phone or laptop in your visitor's hand, decoding your images, executing your JavaScript, and rendering your fonts. You reduce that by sending less and asking it to do less.
What actually moves the number
In rough order of impact per hour of effort.
1. Images
Images are usually the majority of page weight, and the fix is mechanical.
- Serve AVIF with a WebP fallback. AVIF typically lands 30–50% smaller than WebP at equivalent quality, and WebP is already far smaller than JPEG.
- Use
srcsetandsizesso a phone downloads a phone-sized image. Serving a 2400px hero to a 390px viewport wastes roughly 85% of those bytes. loading="lazy"on everything below the fold.- Delete decorative images that carry no information. The most efficient image is the one you did not ship.
2. Video
A single autoplaying hero video can outweigh an entire well-built site.
- Never autoplay a long video. Use a poster frame with click-to-play.
- If you must loop, keep it under about 12 seconds, muted, and heavily compressed.
- Load YouTube and Vimeo embeds behind a facade — a static thumbnail that swaps in the iframe on click. An unloaded embed costs nothing.
3. Fonts
- Self-host, and subset to the characters you actually use. A full multilingual font file for an English-language site is pure waste.
- WOFF2 only. Drop the legacy formats.
- Two weights, not six. Most sites ship weights they never render.
font-display: swapso text is readable while the font arrives.
4. JavaScript
The most energy-expensive bytes you can send, because the device does not just download them — it parses and executes them.
- Audit third-party scripts ruthlessly. Analytics, chat widgets, heat mapping, A/B testing, four tracking pixels. Each has a cost paid by every visitor on every visit.
- Ask what each one has produced in the last quarter. The chat widget generating two enquiries a month is not worth its weight.
- Prefer static rendering over client-side hydration where the content is static, which for a marketing site is nearly everywhere.
5. Caching and delivery
- Long cache lifetimes on static assets: a returning visitor should download almost nothing.
- A CDN shortens the network path, which reduces the 24% segment.
- Compress with Brotli.
6. Then choose a green host
Once the page is light, pick a host running on renewable or zero-carbon energy so the 22% segment is as clean as possible. The Green Web Foundation maintains a directory of verified green hosts. Do this second, not first.
The part nobody mentions: content strategy is a sustainability decision
Technical optimisation has a floor. Beyond it, the biggest lever is how much stuff exists and how many people load it.
- A site with 400 thin pages that nobody reads still gets crawled, indexed and served. Consolidating them reduces real energy use and usually improves rankings.
- An autoplaying carousel that shows six images to deliver one message costs six times the bytes for the same outcome.
- An email newsletter with a 2MB header image, sent to 40,000 people monthly, dwarfs the footprint of your homepage.
Sustainable web design is mostly editing.
Measuring your own site honestly
- Run a baseline in a calculator that names its methodology and version — you want SWDM v4 or equivalent transparency. Record the version alongside the number.
- Record page weight in KB separately. This is the metric that is actually comparable over time and across models.
- Track Core Web Vitals in parallel. They move together with weight and they have direct commercial value.
- Re-measure after changes and report the delta, not the absolute.
If you publish a carbon figure on your site, state the model and version you used. A number without a methodology is marketing, and increasingly readers know it.
The performance work overlaps almost entirely with speed optimisation — see how to score 90 on Core Web Vitals in Framer for the implementation detail. For the conceptual grounding, what is sustainable web design covers the principles, and 16 environmental websites shows how sustainability-focused organisations present themselves. Templates built lean are in the environmental category.
Frequently asked questions
How much CO2 does a web page produce? Published estimates range from about 0.36g to 4.61g of CO2e per page view — roughly a 13-fold spread. The variation comes from methodology: which model version, what grid intensity is assumed, whether embodied emissions are counted, and where the system boundary is drawn. Treat relative improvements as reliable and absolute figures as approximate.
What is the Sustainable Web Design Model? An open-source model for estimating digital emissions, developed collaboratively by Wholegrain Digital, Mightybytes, Footsprint, EcoPing and the Green Web Foundation. Version 4 uses page weight as a proxy for data transfer, assumes a global grid intensity of 494 gCO2e/kWh from Ember data, and accounts for both operational and embodied emissions across data centres, networks and user devices.
Is green hosting enough to make a website sustainable? No. Under SWDM v4, data centres account for about 22% of system energy, while user devices account for 54% and networks 24%. Green hosting cleans the smallest segment. Reducing page weight addresses all three at once and should come first.
Does sustainable web design hurt design quality? No. Every technique that reduces emissions — smaller images, fewer scripts, subset fonts, no autoplay video — also improves load speed, accessibility and conversion. There is no trade-off to manage, only a discipline to adopt.
What is the single highest-impact change? Usually images: serving AVIF or WebP at correctly sized dimensions with lazy loading. On most sites images are the majority of page weight, and the fix requires no design compromise at all.
Last updated: 17 August 2026.
Sources: Sustainable Web Design Model — Estimating Digital Emissions (SWDM v4) · Green Web Foundation, on the latest SWDM update · Wholegrain Digital, updating Website Carbon to v4 · Ember grid-intensity data · IEA and ITU energy-intensity data
