Sustainable Web Design: The Complete UK Guide
The internet creates roughly 2-4% of global carbon, on par with aviation. Every website plays a part. This guide covers what green web design means, how to measure your impact, and what to do about it.
What Is Sustainable Web Design?
The Environmental Cost of the Internet (UK Context)
The UK's digital sector is a large and growing source of carbon. Data centres, networks, and billions of devices all use power. Each page visit starts a chain: the server handles the request, the network sends the data, and the device shows the page. Heavier pages mean more data, more work, and more energy at every step.
The average UK page weighs about 4MB (HTTP Archive, 2025). An OYNK-built page averages under 200KB. That is a 20x gap in data, with matching gaps in energy use and carbon output.
Beyond Green Hosting — Why Page Weight Matters More
Many think green web design just means picking a "green" host. Hosting matters, but it is only one link in the chain. As we explain in our piece on the reality of green hosting, many green claims rest on energy certificate trading, not real cuts in carbon.
The factor you control most is page weight. A 200KB page will always produce less carbon than a 4MB page, no matter where either is hosted. Green web design starts with smart code, not bought certificates.
How to Measure Your Website's Carbon Footprint
The Sustainable Web Design (SWD) Model
The most common method for estimating web carbon is the Sustainable Web Design (SWD) model. Wholegrain Digital created it; the Green Web Foundation now maintains it. It estimates CO2 per page view using data transfer, energy rates, grid carbon levels, and the share of return visitors who benefit from caching.
The model has known limits. It skips device processing, JavaScript energy, and the wide range in device power use. But it gives a standard, repeatable baseline that works well for comparison and progress tracking.
EcoPigs vs Other Carbon Calculators
| Feature | EcoPigs | Website Carbon | Beacon | Ecograder |
|---|---|---|---|---|
| Carbon per page view | ||||
| Performance metrics (LCP, CLS, TTFB) | Not applicable | Not applicable | ||
| Waste breakdown by category | Not applicable | Not applicable | Not applicable | |
| Live grid carbon intensity | Not applicable | Not applicable | Not applicable | |
| Prioritised quick wins | Not applicable | |||
| P.E.E.R. scoring (4-pillar) | Not applicable | Not applicable | Not applicable | |
| Free tier |
What a Good Score Looks Like
By the SWD model, a "good" site makes less than 0.5g CO2 per view. The UK average is 1.0-2.0g. A lean site can hit under 0.1g. For context, oynk.co.uk makes about 0.04g per view, roughly 25-50x less than average.
But the trend matters more than the number. The goal is steady cuts over time, not hitting one target. Our free carbon calculator gives you a starting point.
The W3C Web Sustainability Guidelines (WSG)
What the Guidelines Cover
The W3C published the Web Sustainability Guidelines (WSG). These are a broad set of tips to cut the green impact of websites and apps. They cover four areas: UX design, development, hosting, and business strategy.
Key tips include cutting page weight, fewer HTTP requests, smaller images, clean code, green hosting, and no dark patterns. The guidelines are advice, not law. But they reflect the growing view of what good digital practice looks like.
How to Assess Compliance
Unlike WCAG, the WSG has no formal test method yet. You assess yourself against the tips. Our P.E.E.R. framework overlaps well with the WSG. A site that scores A or above on P.E.E.R. will usually meet WSG goals.
Why This Matters for UK Organisations
The EU's CSRD and the UK's new Disclosure rules are growing the scope of reporting. Digital systems count as Scope 3 emissions for most firms. A clear, data-backed plan for digital green practice gives you audit-ready proof that goes beyond a policy page.
Sustainable Web Design Principles
Six rules that cut carbon while making your site faster and easier to use.
Reduce Page Weight
The biggest single win. Aim for under 500KB per page. Cut unused CSS, trim JavaScript, and check every file that loads. The UK average is 4MB. There is usually 70-80% waste to remove.
Optimise Images and Media
Use modern formats like WebP and AVIF. Serve images sized to their box, not the source file. Lazy-load images below the fold. One raw hero image can add 2-5MB. Compressed, it is 50-100KB.
Choose Efficient Frameworks
Not all tools are equal. Static builders like Astro and 11ty ship zero JavaScript by default. React and Next.js send more code but can be trimmed with code splitting and partial loading.
Minimise Third-Party Scripts
Every tracker, chat widget, and pixel adds weight and requests. Audit third-party scripts each quarter. Drop what you do not use. Defer or lazy-load the rest.
Use Green Hosting (But Know Its Limits)
Pick hosts with real green energy, not just traded certificates. But remember: green hosting on a heavy site does less good than lean hosting on a light one. Cut page weight first. Choose hosting second.
Implement Caching and CDNs
Good caching stops repeat data transfers for return visitors. Use long-term caching for versioned files. CDNs cut the distance data travels, which reduces both load time and energy use.
The P.E.E.R. Framework — Sustainability as Performance
How Performance and Sustainability Converge
The core idea of our P.E.E.R. framework is that green and fast are the same goal, measured two ways. A faster site sends less data, uses less power, and makes less carbon. An accessible site serves more people with less effort. A well-ranked site gets found without paid ads.
P.E.E.R. stands for Performance, Experience, Emissions, and Ranking. Each pillar gets its own score. Together they show how well a site serves its users, the planet, and the business. There is no trade-off between green and growth.
Real Numbers from Real Audits
Average UK Website
OYNK-Built Website
Our research found that 90% of UK B Corp websites failed basic digital green standards. Zero out of 20 green leaders passed. Unyte Group went from an F to a B after our rebuild, cutting CO2 per view by 82%. Even brands that care about the planet often miss their digital footprint.
Frequently Asked Questions
Is sustainable web design more expensive?
Not always. Green web design is about doing more with less. A fast, lean site with few extras often costs less to host and maintain than a heavy site full of plugins. Build costs may be similar. But total cost over time is usually lower.
Does sustainable web design mean boring design?
No. Green web design cuts waste, not creativity. It means better images, not fewer. Smart motion, not heavy libraries. Lean font loading, not five weights of three typefaces. The look can be just as bold. The code underneath is simply cleaner.
How do I measure my website's carbon footprint?
Use our free Website Carbon Calculator for a quick estimate using the SWD model with live grid data. For deeper insight, our P.E.E.R. audit checks emissions plus speed, access, and SEO. You get the full picture, not just one number.
What are the W3C Web Sustainability Guidelines?
The WSG are tips from the W3C on green web design. They cover user experience, dev practices, hosting, and business strategy. They are advice, not rules. But they are becoming the agreed standard for responsible digital work.
Get a Sustainability Audit for Your Website
See where your site stands on carbon, speed, access, and search ranking. Get a clear action plan you can start on right away.