What your website burns

Every page load spends electricity. Some of it on the server answering the request, some on the networks carrying the response, and most of it on the phone or laptop doing the rendering. Nobody sends you an itemised bill, so it's easy to treat the cost as zero.

Your website's carbon footprint is measurable, though. Methods are public, and many fixes are within your control.

Where the energy goes

Three things decide the number.

1. How much data you send
   Bytes have to be moved, and moving them costs energy at every hop. A page carrying a 5MB hero image is not in the same category as one weighing 200KB.
2. Electricity behind your host
   A server on a grid running mostly on wind and hydro carries a different carbon cost than one sitting on coal, for exactly the same work.
3. The visitor's device
   This is the part people forget. Rendering your page drains someone's battery, and heavy JavaScript, large media and expensive layout work all cost more of it. Device is usually the largest of the three.

What about those AI models?

It's an obvious objection. Data centres used around 415 TWh of electricity in 2024, about 1.5% of the world's supply, and the IEA expects that to more than double by 2030 as AI builds out - to roughly what Japan gets through in a year.

Set that against compressing a hero image, it can feel like sorting your yoghurt pots for recycling while a huge refinery runs next door.

But you don't control the refinery, and you do control your own pages. Fixes cost nothing, they make your site faster at the same time, and they're the part you can act on. Not being able to fix all of it doesn't mean you should stop looking.

What makes a page heavy

1. Images, almost always
   An uncompressed photo straight off a camera can run to several megabytes. The same picture as a well-tuned WebP or AVIF is usually a couple of hundred kilobytes. Nothing else gives you that much return for that little work.
2. Video
   Autoplaying background video is the most expensive thing you can casually add to a page.
3. Fonts
   Quietly bad, because it's so easy to load four weights when the design only uses two.
4. Other people's JavaScript
   Third-party scripts grow without anyone deciding to grow them - a tag here, a chat widget there, a consent manager on top, all arriving on every page load. Consent banners usually cost you bytes and accurate numbers at the same time.

Open your network tab, sort by transfer size, and ask it of every third-party file: does this earn its bytes? Analytics included, ours as much as anyone's. Cabin's script is about 1.2KB and Google's gtag.js is about 145KB, though both are worth measuring yourself rather than trusting a number in a blog post, because sizes drift.

How to measure your site

For a quick read on a single page, Cabin's free How Green Is Your Website? tool will analyse any URL.

It measures one load of one URL. That's a benchmark, not a footprint. What you actually emit depends on which pages people visit, and how many of them arrive with a warm cache.

Cabin's Energy & Carbon section works from what your real visitors loaded instead. It shows total data transferred, CO2 per unique visitor (which Cabin counts without cookies), and a per-page list so you can see which URL is doing the damage. Carbon reporting is a Plus feature and above.

How to improve your website's footprint

Start with images, since that's where most of the weight is. Squoosh, Google's free browser-based compressor, will turn a camera photo into a WebP a fraction of the size, and the image never leaves your device while it does it.

If you're building on a modern framework, this is often already handled for you: Nuxt Image (which this site runs on) converts and resizes images automatically, and Next.js's next/image does the same, serving WebP by default with AVIF available too. Worth checking whether yours already does this before reaching for a separate tool.

Two more things are worth doing. srcset tells the browser to send a phone the phone-sized version of an image instead of the one built for a desktop monitor, so nobody downloads pixels they can't see. Lazy-loading defers anything below the fold, images included, until the visitor actually scrolls to it - a loading="lazy" attribute on an <img> tag is often all it takes.

Your CDN matters too, not just your host. A good one compresses images and video on the way out and serves them from whichever edge is closest to the visitor, so check whether yours already does it before you do it by hand.

After that: turn on Brotli or Gzip, and set cache headers so returning visitors skip the download entirely. Subset your fonts to the characters you use, or drop to system fonts. Look your host and your CDN up in the Green Web Foundation's directory, and if either isn't listed, ask them why.

None of that is exotic. It's the same list a performance audit hands you, which is rather the point: the fast version of your site and the low-carbon version of your site are the same site.

Start with one number

Measure one page today and write the number down. Fix the heaviest image on it, then measure again. That's the whole loop, and you can run it this afternoon without buying anything.

Cabin provides this loop, automatically for your real traffic, start with Cabin for free.