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

We work from a converted farm building 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 discovered that the internet's carbon footprint is comparable to — and on some estimates larger than — that of the global aviation industry, it stopped us in our tracks.

According to research by The Shift Project, digital technologies account for around 4% of global greenhouse gas emissions — and that figure is growing at roughly 6% per year. Every time someone loads a webpage, data travels through fibre cables, through routers, and across server farms drawing enormous quantities of electricity. Most of that electricity still comes from fossil fuels.

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

> Key Takeaways > > - The internet's carbon footprint is comparable to that of the global aviation industry, and the figure is rising > - The average webpage generates approximately 0.5g of CO2 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 > - Faster, leaner sites rank better, convert better, and cost less to host — sustainability and commercial performance align > - EU CSRD regulations now require larger businesses to report on Scope 3 digital emissions, making green web design a compliance issue as well as an ethical one > - Tools like Website Carbon Calculator and Ecograder make it easy to measure your current footprint

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.

The Website Carbon Calculator estimates that the average webpage produces around 0.5g of CO2 per page view. That sounds negligible until you multiply it. A modest business website receiving 10,000 visitors per month generates roughly 60kg of CO2 per year — equivalent to driving a petrol car nearly 400 miles. A high-traffic site with heavy pages can produce many times that figure.

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. Cooling those servers can consume as much energy again.

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 tracks which hosting providers run on renewable energy. As of 2024, only around 20% of websites are hosted on genuinely green infrastructure — which means the majority of the web still runs on fossil fuels.

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 deliver equivalent visual quality at a fraction of the file size of 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 most carbon-intensive features you can add to a website. A few seconds of compressed video can weigh more than hundreds of images. 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

The single highest-impact decision you can make is where your website is hosted. A site running on servers powered entirely by renewable energy produces dramatically fewer emissions than one running on a data centre burning coal or gas. When we build custom websites for clients, hosting on infrastructure with verifiable renewable energy commitments is a conversation we have at the start of the project, not an afterthought.

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: its static generation and efficient code splitting mean our sites ship far less JavaScript than comparable builds.

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 consume significantly less power when displaying dark content. Offering a dark mode option — particularly as a default — can reduce energy consumption on end-user devices, especially on mobile.

Keeping your site lean and performing well over time is part of what our SiteCare service addresses — ensuring dependencies stay updated, performance does not degrade, and your site continues to run efficiently long after launch. 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 any URL and receive an instant estimate of CO2 per page view, alongside a comparison to other sites and a check on whether the hosting is green. Simple, free, and shareable — useful for client conversations.

Ecograder — A more detailed audit that scores your site on sustainability criteria including hosting, page weight, and code efficiency, with specific recommendations for improvement.

Google Lighthouse — Built into Chrome DevTools, Lighthouse measures performance, accessibility, and best practices. High performance scores and low page weights correlate directly with lower carbon output. It is not a carbon tool, but it is the most actionable technical audit available.

We use Lighthouse as part of every website audit we carry out. It is a reliable proxy for environmental performance as well as commercial performance.

The Business Case for Sustainable Web Design

Here is the good news: everything that makes a website more sustainable also makes it more effective commercially.

Leaner pages load faster. Faster pages rank better in Google — Core Web Vitals are a confirmed ranking factor. Faster pages convert better — research consistently shows that even a one-second improvement in load time increases conversion rates meaningfully. Lower page weights mean lower bandwidth costs and lower hosting costs. Green hosting providers are often highly competitive on price.

Sustainable web design is not a trade-off. It is better web design.

CSRD and Scope 3 Digital Emissions

For businesses selling into the EU — or working with companies that do — this has moved beyond ethics into compliance. The EU's Corporate Sustainability Reporting Directive (CSRD), which came into force in stages from 2024, requires larger companies to report on Scope 3 emissions: the indirect emissions in their value chain.

Digital infrastructure — websites, SaaS tools, cloud services, email marketing platforms — falls within Scope 3. As reporting requirements trickle down through supply chains, businesses of all sizes may find themselves being asked to account for the carbon footprint of their digital operations by enterprise clients or procurement processes.

Getting ahead of this now — understanding your website's footprint, choosing green hosting, and building efficiently — positions you well for a regulatory environment that is only going in one direction. Our website maintenance guide includes a section on performance auditing that forms a useful baseline for this kind of assessment.

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?

The Website Carbon Calculator estimates an average of approximately 0.5g of CO2 per page view. A site receiving 10,000 monthly visitors would produce around 60kg of CO2 per year. Heavy, image-rich, JavaScript-intensive sites can be several times worse than average.

Does green hosting actually make a difference?

Yes — significantly. The energy source powering the servers that host your site is one of the largest single variables in your website's carbon footprint. Hosting on infrastructure running on verified renewable energy can reduce your site's emissions by 80% or more compared to fossil-fuel-powered alternatives.

Is sustainable web design more expensive?

Not typically, and often the opposite. The practices that reduce carbon output — leaner code, optimised images, reduced third-party scripts, static generation — also reduce page weight, improve load times, and lower hosting costs. You are paying for less, not more.

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 assessment, we include environmental performance as part of our website audit — looking at page weight, hosting, image optimisation, and JavaScript efficiency alongside the standard SEO and UX review.

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 your website's environmental impact — and what it would take to reduce it — our website audit covers exactly that. We will measure your page weight, assess your hosting, identify the code and content decisions that are costing you in emissions and in performance, and give you a clear action plan.

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