The Carbon Cost of a Website: How Much CO2 a Page View Really Produces

A website's carbon footprint is the greenhouse gas emitted to deliver and render its pages — the energy burned by data centres, the network that carries the bytes, and the visitor's own device. A typical page view sits somewhere around 0.2 to 1.0 grams of CO2, and the single biggest lever you control is page weight: fewer bytes, especially less JavaScript, means less energy at every hop. Sustainable web design is mostly performance engineering with a conscience.

We build websites for a living at Amplified Creations, and we've found that the same decisions that make a site fast also make it lighter on the planet. This post explains where the emissions actually come from, how to measure your own footprint honestly, and the concrete reductions that move the number.

What is a website's carbon footprint?

When someone asks "how much CO2 does a website produce", they're really asking about three stacked energy costs per page view:

• Server energy — the data centre that runs your application, queries your database, and renders the response. This is amortised across every visitor, but heavy server-side work (uncached queries, bloated frameworks) adds up.
• Network energy / data transfer — every byte travels through routers, switches, undersea cables and cell towers. This is roughly proportional to how many kilobytes you ship. It is the part most directly under a developer's control.
• Device energy — the visitor's phone or laptop spends CPU and battery decompressing images, parsing and executing JavaScript, and painting the page. A 2 MB JavaScript bundle doesn't just cost transfer; it makes a mid-range Android phone work hard, repeatedly.

The often-quoted estimate is that the internet is responsible for roughly 2–4% of global carbon emissions, in the same ballpark as the aviation industry. Per page view, models like the Sustainable Web Design model land most pages between 0.2 g and 1 g of CO2. Multiply by traffic and it stops being abstract: a page seen a million times a month at 0.8 g is roughly 800 kg of CO2 monthly — for one page.

Why page weight and JavaScript are the main levers

The cleanest mental model: emissions scale with bytes transferred and work done on the device. That points straight at two culprits.

Page weight is the total kilobytes a page downloads — HTML, CSS, JavaScript, images, fonts, third-party scripts. The median web page is now well over 2 MB. Most of that is images and JavaScript. Every kilobyte you don't send is energy you don't spend across the entire chain.

JavaScript is uniquely expensive because it costs twice. First the transfer, then — unlike an image — the device must parse, compile and execute it, often on every interaction. A heavy single-page-app framework can mean shipping hundreds of kilobytes of script to render text that plain HTML would have delivered for a fraction of the energy. This is why "ship less JavaScript" is the highest-leverage sustainability decision most teams can make, and it happens to also be the highest-leverage performance decision.

The short version

• Carbon per page view ≈ server energy + network transfer + device processing.
• Most pages emit roughly 0.2–1 g CO2 per view.
• Page weight and JavaScript are the dominant, controllable levers.
• Measure with the Website Carbon Calculator and a byte budget; reduce with less JS, efficient images, system/subset fonts, hard edge caching, and efficient hosting.
• Fast and green are the same engineering problem.

How to measure your website's carbon footprint

You can't reduce what you don't measure. Three practical tools, from quick to rigorous:

Website Carbon Calculator (websitecarbon.com) gives a fast estimate of grams of CO2 per view based on page weight and a guess about your hosting's energy. It's directional, not laboratory-grade, but it's an excellent first read and great for comparing before/after. The related co2.js library from The Green Web Foundation lets you compute the same estimates programmatically against real transfer numbers.

Byte budgets are the discipline that actually changes outcomes. Decide up front what a page is allowed to weigh — say, 500 KB total, with a hard cap on JavaScript — and treat exceeding it as a bug. A budget turns "we should be lighter" into a number a build or a review can fail against.

Lighthouse (built into Chrome DevTools) doesn't print grams of CO2, but it measures the things that cause them: total byte weight, unused JavaScript and CSS, oversized images, render-blocking resources, and the Core Web Vitals that correlate tightly with a lean page. A Lighthouse performance score in the mid-90s usually means a low-carbon page underneath.

Practical reductions that move the number

None of this is exotic. It's disciplined engineering applied consistently.

Ship less JavaScript

The biggest win. Ask whether a page needs a client-side framework at all. A marketing site, a blog, a portfolio — these are documents, and documents render beautifully as server-generated HTML with a sprinkle of small, targeted scripts. Audit third-party tags ruthlessly; each analytics, chat or ad script is bytes plus execution plus a privacy cost.

Server-render

Generating HTML on the server and sending finished markup means the device paints content immediately instead of downloading a framework, booting it, fetching data, then rendering. Less device work, faster first paint, lower carbon.

Use efficient images, right-sized

Images are usually the heaviest single category. Serve modern formats — WebP or AVIF — which are dramatically smaller than JPEG or PNG at equal quality. Right-size them: never ship a 3000px image into a 600px slot. Use responsive srcset so phones get phone-sized files, and lazy-load anything below the fold.

System fonts or a tight subset

A single custom font weight can be 50–150 KB, and a full family multiplies that. Native system font stacks cost zero bytes and look sharp. If a brand font is non-negotiable, subset it to the characters and weights you actually use and serve woff2 with font-display: swap.

Cache hard at the edge

A request served from a CDN edge node near the visitor travels a shorter network path and never wakes your origin server. Aggressive caching of static assets and, where possible, full pages cuts repeated server energy and transfer distance. Fingerprint assets and cache them effectively forever.

Choose green or efficient hosting

Hosting powered by renewables, or simply highly efficient and well-utilised infrastructure, lowers the energy-per-byte at the source. The Green Web Foundation maintains a directory you can check a host against. Honestly, though, an efficient lightweight site on average hosting usually beats a bloated site on "green" hosting — the bytes matter more than the badge.

How we approach this at Amplified Creations

Our house style is lightweight by default, and it's a deliberate stance rather than a marketing line. Our sites run on PHP 8.3 on OVH shared hosting behind Cloudflare, and they are server-rendered with no build step — there is no client-side framework shipping hundreds of kilobytes to render text. The HTML arrives finished; the browser paints it; we add small targeted scripts only where they earn their weight. Content lives in Cockpit CMS on SQLite, which is about as low-overhead as a CMS gets.

The carbon dividend falls out of that architecture. Because pages are mostly HTML and CSS with images served in modern formats and cached hard at Cloudflare's edge, our typical journal pages land in the low hundreds of kilobytes and score Lighthouse ~95+ on performance. Our analytics are cookieless and privacy-first, which means we don't load the cluster of third-party tracking scripts that quietly inflate most sites' weight and emissions — fewer scripts, less data transfer, less device work, and a friendlier privacy posture, all from the same decision. We don't claim a precise gram figure for every client, because honest measurement depends on real traffic and hosting energy data we won't fabricate — but the levers are pulled in the right direction by construction.

Sustainability also shows up at the product level for our clients. Delicious Diamonds, the luxury jewellery brand we build for, runs a 1% climate pledge — a slice of revenue committed to climate work — so environmental responsibility is wired into the business, not bolted on as a banner. A light, fast site is the digital expression of that same value: respect for the customer's bandwidth, battery and attention.

FAQ

How much CO2 does a single web page produce?

Most pages emit roughly 0.2 to 1 gram of CO2 per view, depending heavily on page weight and hosting. A lean, server-rendered page sits near the bottom of that range; a heavy JavaScript app loaded with third-party scripts sits well above it. Multiply by your monthly traffic to see the real total.

What is the single most effective way to reduce a website's carbon footprint?

Ship less JavaScript and fewer bytes overall. JavaScript costs twice — transfer plus device execution — so cutting it reduces emissions across the whole chain while also making the site faster. Server-rendering and efficient, right-sized images are the close runners-up.

Does sustainable web design mean a worse-looking site?

No. A low-carbon site is just a well-engineered one: fast, lean and accessible. Efficient images, smart fonts and server rendering improve the experience rather than degrade it. The visual design is unconstrained; what changes is the discipline behind how it's delivered.

How do I measure my website's carbon footprint?

Start with the Website Carbon Calculator for a quick grams-per-view estimate, then use Lighthouse in Chrome DevTools to find the byte weight, unused JavaScript and oversized images causing it. Set a byte budget per page and treat going over it as a defect.

Does green hosting matter more than page weight?

Page weight usually matters more. Renewable-powered hosting lowers the energy per byte, which helps, but a bloated site on green hosting can still out-emit a lean site on average hosting. Reduce the bytes first, then choose efficient or renewable hosting — they compound.