Sustainable Web Design: How to Reduce Your Website's Carbon Footprint

We work in rural Devon, surrounded by fields and hedgerows. Sustainability is not an abstract concept for us — it is the landscape we look out at every day. So when we read the Website Carbon Calculator's claim that the internet's electricity use produces emissions "equal to or greater than the global aviation industry", it stopped us in our tracks. It is an estimate, not a settled figure, but it is a useful reminder.

The Shift Project's 2019 report, Lean ICT, put the share of information and communication technology in global greenhouse gas emissions at 3.7%, up from 2.5% in 2013. That covers devices and networks as well as servers, and estimates vary between studies. Every time someone loads a webpage, data travels through fibre cables, through routers, and across server farms drawing large quantities of electricity. How much of it comes from fossil fuels depends on the country and the provider.

Your website has a carbon footprint. The question is: how large is it, and what can you do about it?

Key Takeaways

• Estimates of the internet's carbon footprint vary, but some put it on a par with aviation, and ICT's share of global emissions has been rising
• The Website Carbon Calculator currently puts the global average at approximately 0.36g of CO2 equivalent per page view
• Design and development choices — image formats, JavaScript weight, hosting location and energy source — have a direct impact on emissions
• Green hosting, image optimisation, efficient code, and reduced third-party scripts are the highest-impact changes you can make
• Leaner pages load faster for your visitors, and Google recommends good Core Web Vitals; they can also cost less to serve
• EU sustainability reporting rules (CSRD) are being narrowed to the largest companies, so check what actually applies to you before treating this as a compliance issue
• Free tools like Website Carbon Calculator and the Green Web Foundation's green web check give you an estimate and show whether a site runs on green energy

The Environmental Cost of a Website

It is easy to think of websites as weightless — they exist in "the cloud", after all. But the cloud has a very physical reality: rows of servers in data centres, cooling systems running around the clock, and a global network of hardware that consumes vast amounts of power.

As of October 2026, The Website Carbon Calculator (now on version 4 of the Sustainable Web Design model) says the global average web page produces approximately 0.36 grams of CO2 equivalent per page view. For a website with 10,000 monthly page views, it puts that at 43kg of CO2e per year. These are rough estimates, and a heavy page will produce more than a light one.

The emissions come from three main sources:

Data centres — The servers that store and serve your website content consume electricity continuously, whether pages are being requested or not.

Data transfer — Every byte sent from the server to a visitor's browser requires energy at multiple points along the network. Heavier pages mean more data, more energy, and more emissions per page view.

End-user devices — Rendering a complex, JavaScript-heavy webpage makes a visitor's CPU work harder, consuming more battery or mains power on their end.

The Green Web Foundation is an independent non-profit that tracks how much of the internet runs on green energy. Its dataset lets you check whether a website runs on 100% green energy, and hosting providers that use green energy can apply to be verified. A green host is one part of your footprint, not all of it.

How Your Design Choices Affect Carbon Output

This is where it gets interesting for us as designers and developers. Many of the decisions made during a build — choices that feel purely aesthetic or technical — have a direct environmental consequence.

Image size and format

Unoptimised images are one of the biggest contributors to page weight. A hero image saved at 4MB rather than 200KB represents a 20x difference in data transferred for every single page view. Modern formats like WebP and AVIF can deliver similar visual quality at a smaller file size than JPEG or PNG. Using next/image in our Next.js web design projects handles this automatically — serving the right format and size for each device without any manual intervention.

Video autoplay

Autoplay video is one of the heaviest features you can add to a website, and heavier pages mean more data transferred. A few seconds of video can weigh far more than a well-optimised image. If you need video, host it externally (on Vimeo or YouTube), load it only when a visitor explicitly requests it, and avoid autoplaying content above the fold.

JavaScript bloat

Modern JavaScript frameworks have made it possible to build extraordinarily capable websites, but they have also made it trivially easy to ship enormous amounts of code that runs on every page. Unused libraries, heavy animations, and unnecessary dependencies all increase the computational load on both servers and end-user devices. Code-splitting and tree-shaking — removing unused code at build time — are essential practices for any sustainable build.

Font loading

Variable fonts loaded from external services like Google Fonts make an additional network request and can add hundreds of kilobytes to a page. Self-hosting fonts, subsetting them to include only the character sets you actually use, and using font-display: swap to prevent render-blocking are small changes with a measurable impact.

Third-party scripts

Analytics platforms, tag managers, chat widgets, marketing pixels, and social sharing buttons each add weight to your pages and introduce additional network requests to third-party servers — servers you have no control over and no visibility into in terms of energy source. Auditing and removing unnecessary third-party scripts is one of the quickest wins available.

Practical Steps to Build a Greener Website

1. Choose green hosting

Where your website is hosted is one of the biggest decisions you can make. A site running on servers powered by renewable energy should produce lower hosting emissions than one running in a data centre burning coal or gas, although hosting is only one part of the footprint. You can check a host with the Green Web Foundation's green web check. It is worth raising at the start of any project, including when we build custom websites.

2. Optimise every image

Compress images to the lowest file size that maintains acceptable visual quality. Use WebP or AVIF formats. Implement lazy loading so images below the fold are only downloaded when a visitor scrolls to them. Use responsive images so mobile users are not downloading desktop-sized assets.

3. Minimise JavaScript

Build leaner. Every external library should earn its place. Prefer native browser APIs over JavaScript solutions where possible. Use static site generation — pre-rendering pages at build time rather than computing them on the server for every request — to reduce server-side processing. This is one of the reasons we build with Next.js: static generation and code splitting help keep the amount of JavaScript each page sends down.

4. Use system fonts or self-hosted, subsetted fonts

Where brand identity permits, system fonts require zero network requests. Where a distinctive typeface is important, self-host it and subset it to the glyphs you actually use.

5. Reduce or eliminate third-party scripts

Audit everything. Use Google Tag Manager to centralise scripts and remove those that are not delivering measurable value. Consider whether you need a live chat widget, a social sharing plugin, or a cookie consent solution that loads before anything else on the page.

6. Implement a caching strategy

Proper HTTP caching means returning visitors load pages from their local cache rather than requesting them from the server again. This reduces data transfer, reduces server load, and improves load times simultaneously.

7. Consider dark mode

Screens with OLED or AMOLED panels use less power when displaying dark content, so a dark mode option may save a little battery for visitors on those screens. The effect on your site's total footprint is small.

Keeping your site lean over time is part of ongoing maintenance. Our WebsiteCare service covers hosting, security, backups, updates and support, and its Growth plan adds performance audits. For deeper technical reading on keeping a site healthy, our website hosting and maintenance guide covers the full picture.

How to Measure Your Website's Carbon Footprint

You cannot improve what you do not measure. Several tools make it straightforward to assess the environmental impact of your current site:

Website Carbon Calculator — Enter a page address and receive an estimate of CO2 per page view for that page. Simple, free, and easy to share.

Green Web Check — From the Green Web Foundation. Enter your address to see whether your site runs on green energy, based on its dataset of verified hosting providers.

Google Lighthouse — Built into Chrome DevTools, Lighthouse measures performance, accessibility, and best practices. It is not a carbon tool, but it flags oversized images and heavy scripts, which are also what add page weight.

Our website audit includes a performance and speed test, with hosting covered under technical health. It does not include a carbon measurement.

What Lighter Pages Mean for Your Customers

Heavier pages are not only a carbon issue. Every extra megabyte has to reach a visitor's phone, often over mobile data, and they wait while it does.

We saw the effect in our Trade Website Speed Study. On a simulated mobile phone, the typical trade website in our study took 6.7 seconds to show its main content. Google counts 2.5 seconds or less as good, and over 4 seconds as poor. 72% of the sites we speed-tested (350 of 489) were over 4 seconds. That was a lab test on a simulated phone, not a measure of every visitor's real experience, and it covers trade websites only. It did not measure carbon.

Check your own page in four steps:

1. Open PageSpeed Insights, paste your homepage address and run the test.
2. Read the mobile results first and note the Largest Contentful Paint time. Google's guidance is to aim for 2.5 seconds or less.
3. Look through the diagnostics and suggestions for large images, unused JavaScript and third-party scripts.
4. Paste the same address into the Website Carbon Calculator and note the grams of CO2 per page view. Fix the biggest items, then test both again.

The Business Case for Sustainable Web Design

Here is the good news: many of the changes that make a website more sustainable also make it faster for visitors.

Leaner pages usually load faster. Google says it highly recommends that site owners achieve good Core Web Vitals, and that they align with what its core ranking systems seek to reward. It does not say that sites rank higher for being green. Lower page weights can also mean lower bandwidth costs.

Sustainable web design is rarely a trade-off. Often it is simply better web design.

CSRD and Scope 3 Digital Emissions

For businesses selling into the EU, or working with companies that do, sustainability reporting rules may come up. The EU's Corporate Sustainability Reporting Directive (CSRD) requires some large companies to report on sustainability, including emissions in their value chain, and its scope has been changing. In February 2025 the European Commission proposed applying it only to the largest companies, those with more than 1000 employees, and said it wants to ensure that reporting requirements on large companies do not burden smaller companies in their value chains. The European Parliament and the Council reached a political agreement on that simplification package on 9 December 2025. Check the Commission's corporate sustainability reporting page for the rules as they stand now.

These rules are aimed at large companies, not small ones. If a larger customer does ask about your digital footprint, it will be a supplier or procurement question, and an estimate from the tools above gives you a starting point. Our website maintenance guide explains how site performance drifts over time and why it is worth checking regularly.

Related Reading

• Core Web Vitals Explained: What They Mean for Your Business Website
• Web Design Trends 2026: What Actually Matters for Small Businesses
• Website Accessibility: A UK Small Business Guide

Frequently Asked Questions

How much CO2 does the average website produce?

As of October 2026, the Website Carbon Calculator gives a global average of approximately 0.36g of CO2 equivalent per page view, or 43kg a year for a site with 10,000 monthly page views. Heavy, image-rich, JavaScript-intensive pages are likely to be worse than average.

Does green hosting actually make a difference?

It can. The energy source powering the servers that host your site is one part of your website's carbon footprint, alongside data transfer and visitors' devices. Hosting on infrastructure verified as running on renewable energy can reduce the hosting portion compared with fossil-fuel-powered alternatives. You can check a host with the Green Web Foundation's green web check.

Is sustainable web design more expensive?

Not necessarily. The practices that reduce carbon output, such as leaner code, optimised images and fewer third-party scripts, also reduce page weight and can improve load times. Green hosting costs vary by provider.

How do I find out if my current website is sustainable?

Start with Website Carbon Calculator for a quick overview. Then run your site through Google Lighthouse in Chrome DevTools for a detailed technical audit. If you want a professional review, our website audit covers performance and speed alongside SEO and UX, with hosting under technical health. It does not include a carbon measurement.

Work With an Agency That Builds Lean by Default

We are not a company that bolted sustainability onto its practice as a marketing exercise. We build with Next.js because it produces fast, efficient, statically-generated sites. We optimise images because it is the right way to build. We audit third-party scripts because performance matters.

But we also know that every existing website has room to improve, and the starting point is understanding where you are now.

If you want to know how heavy your pages are and where the speed problems are, our website audit includes a performance and speed test and a technical health check covering hosting, with a prioritised list of improvements on the Full Audit. It is not a carbon audit, so use the free tools above for the CO2 estimate.

Get a website audit from Brambla and find out where your site stands. See our pricing for audit and project costs.

Related Reading

• Complete Guide: Web Accessibility: The Complete 2026 Guide for UK Business Websites