Guide

Sustainable web design: best practices

Every page view has a carbon cost — the energy to transfer, process and render its data. The upside: the same things that make a page sustainable make it faster, cheaper and more accessible. Here are the highest-impact ways to lighten your site, roughly in order of impact.

Last updated: July 2026

PageLens flags these issues on any page you visit; this guide is the how behind the fixes. Measure as you go and treat page weight like a budget you don't want to overspend.

01 Right-size images

Images are usually the single biggest source of page weight — and the easiest win.

• Compress everything. Aim for the smallest file that still looks good; quality 75–80 is often indistinguishable.
• Use modern formats — AVIF or WebP typically beat JPEG/PNG by 30–50%.
• Serve responsive sizes with srcset/sizes so phones don't download desktop-sized images.
• Lazy-load below-the-fold images (loading="lazy") and always set width/height.
• Replace animated GIFs with MP4/WebM video — often 80–90% smaller.
• Don't ship a 4000 px hero when 1600 px will do.

02 Ship less JavaScript

JavaScript is the most expensive kind of byte: it's downloaded, parsed and executed, draining battery and CPU.

• Audit the bundle and remove unused dependencies and dead code (tree-shaking).
• Code-split so each page loads only what it needs; lazy-load heavy features.
• Prefer the platform. Native HTML/CSS often replaces a whole library (dialogs, accordions, form validation).
• Defer non-critical scripts (defer/async) so they don't block rendering.

03 Tame third-party scripts

Analytics, ads, chat widgets and embeds each add bytes, requests and energy — usually on every page.

• Audit what's actually used and remove the rest.
• Load non-essential third parties lazily or only on interaction (e.g. a chat widget on click).
• Choose lightweight, privacy-friendly analytics over heavy tag suites.

04 Optimize fonts

• Self-host and serve WOFF2 — the smallest, best- supported format.
• Limit families and weights; each one is a separate download.
• Subset to the characters and languages you use.
• Use font-display: swap, or a system-font stack for body text to ship zero font bytes.

05 Trim your CSS

• Purge unused rules — UI frameworks often ship far more than you use.
• Inline critical CSS for first paint and load the rest asynchronously.
• Prefer small, composable styles over large kits you barely touch.

06 Handle video responsibly

• Never autoplay. It forces a large download before the user asks for it.
• Use a poster image and load the video on click.
• Compress and serve efficient formats (MP4/WebM); use a streaming host for long content.

07 Green hosting & efficient delivery

This is the one lever you can't optimize away in code: the electricity your servers and networks actually run on. Green hosting changes the carbon per byte, not the number of bytes.

• Know what "green" means. A green host powers its infrastructure with renewable energy — directly, or matched with certificates — rather than fossil fuels.
• Check your host with The Green Web Foundation' greencheck (the same data PageLens uses). Their directory shows which providers are verified.
• Prefer providers on real renewables over ones that lean on offsets or certificates alone — the impact isn't equivalent.
• Switching host is often the single biggest one-time carbon reduction you can make — with no change to your code.

Then make delivery efficient:

• Use a CDN to serve assets from close to the user.
• Enable compression (Brotli or gzip) and long cache lifetimes so returning visitors re-download less.
• Serve over HTTP/2 or HTTP/3.

08 Design for sustainability

The greenest byte is the one you never send. Before optimizing assets, question whether they need to exist — this is where designers and product owners have the most leverage.

• Design with restraint. Every carousel, animation, embed and "nice-to-have" feature has an ongoing energy cost. Cut what doesn't earn its place.
• Avoid autoplay and infinite scroll — they pull down data users never asked for.
• Make the efficient path the default. Load heavy media, maps and embeds on demand, not on page load.
• Practise data discipline. Trim bloated analytics, unused tracking and oversized content.
• Help people find things fast. Clear content and navigation means fewer searches and fewer page loads.

Sustainable choices are almost always better UX too — faster, calmer and more accessible.

09 How website carbon is measured

Estimates aren't exact, but they're grounded in shared, open models — worth understanding so you can read any tool's number critically.

• The Sustainable Web Design (SWD) model is the current industry standard. It estimates emissions from transferred data, split across data centres, networks and user devices, and factors in grid carbon intensity and green hosting. PageLens uses CO2.js, an open-source implementation of it.
• Green hosting lowers the assumed grid intensity for the data-centre share — which is why it improves your estimate.
• The W3C Web Sustainability Guidelines (WSG) go beyond carbon to cover UX, hosting, business and social factors — a broader framework if you want to go deeper.
• Treat any single figure as an estimate for comparison and trend-tracking, not an exact measurement.

10 Measure & set a budget

• You can't improve what you don't measure. Check pages with PageLens, Lighthouse or WebPageTest.
• Set a page-weight budget (e.g. under 1 MB) and treat regressions as bugs.
• Re-check after changes — sustainability is a habit, not a one-off audit.

← Back to PageLens