How I calculate a page's carbon

Every page here tells you how much CO2 it costs to load it once. Here's what that number means, in plain words.

Loading a web page uses electricity. Your phone or laptop uses some. The cables and masts that carry the page use some. So does the computer that stores it. Building all that hardware took energy too. Much of that electricity still comes from burning fuel, which puts CO2 in the air.

This page, right now

This page weighs 106.6 KB. Loading it once works out to about 0.013 g CO2e. The "e" means other greenhouse gases are counted too, as if they were CO2.

A typical web page today weighs over 2 MB. Every page here has to stay under 300 KB, or it doesn't ship.

Why lighter is greener

Every byte has to be stored, sent and shown. Fewer bytes means less electricity, and less electricity means less CO2. So I keep pages small: few pictures, no trackers, and nothing loaded from other sites.

Green hosting helps

The computers that store this site belong to Cloudflare, which the Green Web Foundation lists as running on green energy. The cables and your own device are another story, so those count at the normal mix.

It's an estimate

Nobody can measure the exact CO2 of one page view. The number comes from a widely used formula that turns bytes into energy, and energy into CO2.

It assumes your first visit. Come back later and your browser reuses what it already downloaded, so your real number is lower.

Dark mode doesn't change the number. It can save battery on some screens, but the formula only looks at bytes.

The technical bit

The formula is the Sustainable Web Design model (version 4), run with CO2.js 0.19.0 from the Green Web Foundation. 1 KB is 1,024 bytes.

It counts the same bytes my page budget checks, with the same code:

  • HTML, CSS and JavaScript, brotli-compressed the way the host serves them.
  • Fonts and images at file size. They arrive compressed already.
  • Every font and image a page uses, lazy-loaded images included.
  • All the JavaScript a page pulls in, framework runtime included.
  • Nothing from other sites, because no page here loads anything from one.

With green hosting on, the model counts the data centre's share at renewable-energy intensity. The network and your device count at the global average, because I can't vouch for those.

I report this number but don't cap it. With a fixed model it's bytes times a constant, so the byte budget is the real limit. A carbon cap would move every time the model changed, without me changing a byte.

The number is written into each page after the build, since it's part of the page it measures. That adds a few bytes, well inside the rounding.