Low-carbon web design: images, dark mode, CDN optimization

Website carbon estimation tools use page weight and hosting carbon intensity as primary inputs. Website Carbon Calculator (websitecarbon.com) and Ecograder provide per-page estimates; the Sustainable Web Design model provides a methodology for estimating the full carbon footprint of a digital product at scale (total data transfer × energy intensity × grid carbon intensity). For more accurate measurement, integrate performance monitoring tools that track real user page weight data across device types and locations, then apply the Sustainable Web Design model's carbon intensity factors to calculate CO₂e per page view. Multiply by monthly page views for total monthly digital carbon footprint. For ESG reporting purposes, the Greenhouse Gas Protocol's guidance on Scope 3 Category 11 (use of sold products) covers digital services, and the Sustainable Web Design model is the most widely cited methodology for web carbon calculation in sustainability reports.

Video is by far the highest-carbon web content type — streaming one hour of HD video consumes approximately 36× more data than loading an average web page. Sites with significant video content should not assume that other optimisations are negated, but they should prioritise video efficiency first. Effective video carbon reduction: use efficient codecs (AV1 > H.265/HEVC > H.264; AV1 provides ~50% better compression than H.264 at equivalent quality); serve adaptive bitrate streaming that adjusts quality to connection speed and viewing conditions rather than always serving highest quality; implement poster images with click-to-play for non-essential videos rather than autoplay; avoid background video loops on hero sections (these continue consuming bandwidth while not being watched); and use video CDNs (Cloudflare Stream, Bunny.net) with renewable energy infrastructure. For sites where video is core to the product, focus on codec efficiency, adaptive streaming, and green hosting — these together can reduce video-related carbon by 40–60%.

SSR generally has a lower overall carbon footprint than CSR/SPA approaches for content-focused websites. SSR shifts rendering work to the server (where it can run on renewable energy and efficient hardware) and reduces the JavaScript payload sent to the client (which consumes user device battery). CSR/SPAs require large JavaScript bundles, client-side rendering work, and additional API calls — all consuming energy at the user device level. For e-commerce, blogs, marketing sites, and documentation — the majority of the web — SSR or static site generation (SSG) is both better for performance and lower carbon than SPA. CSR remains appropriate for highly interactive applications (dashboards, editors, complex forms) where the interactivity justifies the JavaScript investment. The broader architectural shift from SPA-first to SSR/islands-first in the React ecosystem (Next.js, Remix, Astro) is partially motivated by performance and carbon efficiency alongside the developer experience improvements.

AI features add carbon cost at two layers: inference API calls (each LLM API call consumes GPU energy at the provider's data centre) and the resulting content (AI-generated text and images can increase page weight if not managed). For inference energy: a typical LLM API call generates approximately 5–10g CO₂e for a short-form generation — comparable to 5–10 page views. AI features called on every user interaction (AI chatbots, AI-powered search, AI content recommendations) can meaningfully increase the digital carbon footprint of an application. Mitigation: cache AI responses where content can be reused across users (blog post summaries, product descriptions); use smaller, more efficient models for simple tasks; evaluate whether AI features provide sufficient user value to justify their energy cost. For AI-generated images: similar optimisation applies as for any image — AVIF/WebP, appropriately sized, lazy loaded. The energy cost of the AI generation (one-time at creation) is separate from and typically smaller than the cumulative energy cost of serving the generated image to many users.

Core Web Vitals (LCP, FID/INP, CLS) are Google's performance standards and correlate strongly with carbon efficiency — lighter, faster pages score better on Core Web Vitals AND have lower carbon footprints. Optimising for Core Web Vitals is often simultaneously optimising for carbon. The W3C Sustainable Web Design Community Group is developing the Web Sustainability Guidelines (WSG), a framework analogous to WCAG that addresses carbon and sustainability across web development, design, and hosting decisions — it covers many of the same areas as this guide in a structured checklist format. For organisations with formal sustainability reporting requirements, the Sustainable Web Design model (updated 2023) provides the methodology used for most digital carbon estimates, and its calculation framework can be used to set measurable carbon reduction targets for web properties. The EU's planned digital sustainability reporting requirements under CSRD (Corporate Sustainability Reporting Directive) will create formal reporting obligations for larger organisations' digital carbon footprints from 2025 onwards.

Font loading is a frequently overlooked carbon optimisation opportunity. The impact varies by font strategy: external Google Fonts loading (two DNS lookups, stylesheet fetch, font file downloads — typically 200–400KB for a two-weight custom font) adds significant page load overhead on every first visit. Self-hosted fonts with proper caching headers (one DNS lookup, cached after first visit) reduce ongoing overhead substantially. WOFF2 format (30–40% smaller than WOFF, 50–60% smaller than TTF) should be used for all web font deployments. Unicode-range subsetting (loading only the character ranges actually used) reduces font file size by 70–80% for sites using only the latin alphabet. Variable fonts (a single font file with continuous weight/width axes) can replace 4–6 separate font weight files with one file, reducing total font payload by 50–60% for designs using multiple weights. Combined, these optimisations can reduce font-related carbon from ~0.15g CO₂e per page view to under 0.02g — a meaningful reduction for high-traffic sites.

Green hosting certifications and claims vary in rigour — evaluating them requires understanding what is being claimed. The strongest certification is the Green Web Foundation's hosted infrastructure verification, which requires documented evidence of renewable energy (Power Purchase Agreements, Renewable Energy Certificates, or direct renewable generation) rather than self-reported claims. Major cloud providers (AWS, Google Cloud, Azure) publish detailed renewable energy commitments and regional renewable energy coverage percentages — Google Cloud is carbon-neutral for all cloud operations; AWS and Azure have regional variation. Specific regions (us-east-1, eu-west-1) typically have different renewable energy coverage than others — hosting in renewable-energy-intensive regions (Scandinavia, Pacific Northwest, Ireland) reduces carbon intensity for equivalent compute. For CDN hosting, Cloudflare operates entirely on renewable energy; Fastly and CloudFront have renewable commitments that vary by point-of-presence. The Green Web Foundation's hosting directory provides a searchable database of verified green hosting providers at the ISP and hosting level.

Prioritisation should be driven by the Sustainable Web Design model's data: data transfer accounts for ~43% of website carbon, with device energy (~52%) and network/data centre energy (~5%) making up the rest. The highest-leverage interventions target data transfer reduction, in order of typical impact per effort: (1) image optimisation — format conversion (AVIF/WebP), responsive sizing, and compression typically reduces page weight by 20–50% with manageable implementation effort; (2) JavaScript reduction — tree shaking, bundle splitting, and third-party script removal is higher effort but high impact for JavaScript-heavy sites; (3) video efficiency — codec and bitrate optimisation for video-heavy sites; (4) green hosting/CDN — switching to renewable-energy-hosted infrastructure; (5) caching strategy — extending browser cache lifetimes for stable assets reduces repeat visitor transfer. For most commercial websites, implementing image optimisation alone delivers 60–70% of the maximum achievable carbon reduction. Start with images, measure, then proceed down the priority list.