A carbon grade is set in grams of CO₂e per page view, but nobody designs a web page in grams. Designers and developers think in kilobytes and megabytes: the size of a photo, a font file, a script. Because GreenTracer's estimate is proportional to the data a page transfers, every grade limit can be turned into a page weight. This article gives those weights, explains where the limits come from, and shows how to use them as a budget.
Where the grade limits come from
GreenTracer uses the digital carbon ratings published with the Sustainable Web Design Model v4. The ratings are based on how much data real web pages transfer. According to the ratings page, the transfer-size figures were taken from the HTTP Archive's crawl of 1 June 2023, and each grade is tied to a percentile: A+ at the 5th percentile, A at the 10th, B at the 20th, C at the 30th, D at the 40th and E at the 50th. Anything heavier is F.
In other words, the grades compare your page with the web as it was measured. A page at the A+ limit sits at the 5th percentile of that crawl, so roughly 95% of the pages measured were heavier, and an E sits around the middle. The ratings page describes the E/F line as a global average data transfer size of 2.4 MB and says the scale is meant to help with “setting goals and page weight budgets”.
Each grade in page weight
Under SWDM v4, one gigabyte transferred is estimated at 0.300 kWh, and GreenTracer uses the model's global average grid intensity of 494 g CO₂e per kWh. That is about 0.148 g per megabyte. If The Green Web Foundation lists your host as green, the model removes the data centres' operating energy, which brings it to about 0.121 g per megabyte, so the same grade allows a heavier page. Dividing each grade limit by those rates gives:
| Grade | Up to (g CO₂e per page view) | Standard host | Host listed as green |
|---|---|---|---|
| A+ | 0.040 | 270 kB | 331 kB |
| A | 0.079 | 533 kB | 653 kB |
| B | 0.145 | 978 kB | 1.20 MB |
| C | 0.209 | 1.41 MB | 1.73 MB |
| D | 0.278 | 1.88 MB | 2.30 MB |
| E | 0.359 | 2.42 MB | 2.97 MB |
| F | over 0.359 | more than 2.42 MB | more than 2.97 MB |
These use decimal units (1 MB is 1,000,000 bytes). The ratings page prints its own transfer sizes, such as 272.51 KB for A+; our figures are worked back from the gram limits, so they differ slightly. The grades page lists the same limits.
What counts towards the weight
- Data as transferred. Files are counted at the size sent over the network, usually compressed. Chrome DevTools shows this as “transferred” in the Network panel's status bar, next to the larger uncompressed total.
- Everything on the first load. HTML, styles, scripts, fonts, images and files from other companies' servers, for one uncached visit without scrolling or clicking.
- The heavier device. GreenTracer tests mobile and desktop and grades the heavier of the two, so the budget has to hold on a wide screen too.
What fits in a budget
These are illustrations, not typical sizes. Your own numbers will differ, so measure them.
- Aiming for A+ (270 kB). This suits a text-led page: lean HTML and CSS, little or no JavaScript, system fonts or one small web font, and a few compressed images. A single 3 MB photo uploaded straight from a camera would be more than eleven times the whole budget.
- Aiming for B (978 kB). Picture a page with 100 kB of HTML and CSS, 250 kB of scripts and 80 kB of fonts. That leaves roughly 550 kB for images: a well-compressed hero image and a handful of smaller ones.
- Where it goes wrong. A single 3 MB hero photo puts a page in F before anything else loads. An embedded video player or chat widget loaded on every page can take a large share of a B budget too; our article on loading maps, chat and embeds on demand covers that.
Grades move in steps, but the estimate doesn't. A page just under a limit and one just over it are almost the same, so watch the bytes as well as the letter. Our guide to reading a carbon report explains how the grade sits alongside the estimate.
Turn a grade into a team budget
web.dev defines a performance budget as “a set of limits imposed on metrics that affect site performance”, and lists total page size, maximum image size and the number of third-party resources among the things you can limit. A carbon grade gives you a ready-made total:
- Pick a target grade for each important page type: home, service page, blog post.
- Look up its page weight in the table, using the column for your host.
- Split it by type of file, leaving some headroom, and agree simple rules, such as a maximum size for any single image.
- Check the page after each significant change. The report's breakdown shows where the data goes, and earlier checks stay in its history so you can see progress.
