Guide
Sustainable web design
Sustainable web design means building sites that move fewer bytes and ask less of visitors' devices. Almost everything on the list also makes the site faster and stronger in organic search, which is why we treat digital sustainability as an engineering discipline rather than a badge.
Where a page's energy goes
- Data centre. Serving the page. Reduced by efficient infrastructure and renewable supply.
- Network. Moving the bytes. Driven almost entirely by page weight.
- Visitor device. Rendering and executing. Driven by JavaScript and image decoding.
Two of the three are yours to control through design and build decisions.
These figures are modelled estimates and should not be interpreted as direct measurements of electricity use or greenhouse gas emissions.
Techniques
How to make a website more eco friendly, in order of impact
Work top down. The first two categories account for the majority of avoidable weight on almost every site we assess.
Images
Images are the largest share of most pages. Convert to AVIF or WebP, generate responsive sizes, strip metadata, lazy-load below-the-fold media and question every decorative image that carries no information.
JavaScript
Unused framework and plugin code costs transfer and, worse, device processing. Split bundles per template, drop libraries used for one component, and prefer native browser features over polyfilled ones.
Third-party scripts
Chat widgets, tag managers, heat maps and embedded video players routinely add more weight than the page itself. Audit each one against the value it returns and load what survives after interaction.
Fonts
Self-host, subset to the characters you use, ship woff2 only and limit yourself to the weights actually on the page. A single unnecessary font weight can outweigh your entire stylesheet.
Caching and delivery
Long cache lifetimes, compression, HTTP/3 and CDN edges near your audience mean repeat visits transfer almost nothing and first visits travel shorter distances.
Hosting energy
Renewable-powered hosting reduces the data-centre share of the estimate. Worth doing, but it addresses less of the total than page weight does — so do it alongside, not instead.
Benchmarks
How to reduce page size, and what to aim for
Page weight is the single strongest predictor of both estimated emissions per pageview and mobile Lighthouse performance. These bands are a working guide, not a standard.
Credibility
Four digital sustainability claims worth retiring
“Dark mode makes a site sustainable”
It saves a small amount of power on OLED screens only. Compressing a single hero image saves more than a dark theme ever will.
“A carbon offset makes a website carbon neutral”
Offsets compensate rather than reduce, and we do not count them. We report estimated emissions and recognise evidenced reduction.
“Static sites are automatically green”
A static site with 4 MB of unoptimised images is heavier than a well-tuned WordPress install. Architecture matters less than what ships to the browser.
“Sustainability means an ugly, minimal site”
The constraint is bytes, not ambition. Efficient media, restrained motion and good typography look better than a bloated page, not worse.
Common questions
Sustainable web design FAQs
See where your bytes are going
The check breaks your page down by resource type so you know which technique to apply first.