Illustration representing green web design

A guide to sustainable web design and low carbon websites

In our increasingly digital world, the importance of sustainable web design and low carbon websites cannot be overstated. Behind every click, scroll, and page load lies a complex chain of energy consumption that spans from server farms to the devices in our hands. Today, I want to explore how green web development practices and eco-friendly website design decisions can make a significant difference in creating energy-efficient websites.

The three pillars of website energy consumption

When we think about website energy usage, we need to consider three main areas of consumption:

1. Data centres

Data centres are the physical backbone of the internet, housing the servers that store and deliver our content. These data centres consume energy through:

  • 24/7 Server Operation: Keeping machines running continuously, even during periods of low traffic
  • Storage Solutions: Maintaining data on SSDs or HDDs requires power even when the data isn’t being accessed
  • Database Processing: Every search, filter, or dynamic content generation consumes CPU cycles
  • Cooling Systems: Preventing servers from overheating often requires as much energy as running the servers themselves

Many servers operate at just 10-15% of their capacity while still drawing significant power, a major inefficiency in the system.

2. Data transfer

Every piece of content must travel from servers to users, creating another substantial energy footprint:

  • Network Infrastructure: Power needed for the countless routers, switches, and transmission equipment that make up the internet
  • Content Delivery Networks: Distributed servers that help optimise delivery but require their own energy
  • Mobile Networks: Particularly energy-intensive, consuming 3-5 times more power than wired connections to deliver the same data

3. End-user devices

Finally, our devices consume energy processing and displaying web content:

  • Rendering Operations: Parsing HTML, CSS, and JavaScript
  • Display Energy: Powering screens to show the content
  • Battery Drain: More complex websites deplete mobile batteries faster, leading to more frequent charging

Static sites vs. server-side rendering

One of the most impactful architectural decisions we can make is choosing between static sites and server-side rendering (SSR).

Static sites pre-build HTML files that can be served directly without additional processing. This approach:

  • Reduces server CPU usage by 2-10x compared to dynamic rendering
  • Creates pages that are 25-30% smaller on average
  • Allows for aggressive caching, reducing origin server load by up to 95%

Meanwhile, server-side rendering generates HTML on-demand for each request, requiring significantly more processing power and limiting caching opportunities.

  • Astro: My personal favourite, Astro’s “islands architecture” allows you to add interactive elements only where needed, keeping most content fully static. Its zero-JS-by-default approach means dramatically less client-side processing.

  • 11ty (Eleventy): A simpler, JavaScript-based static site generator that’s highly flexible while producing lean output without any client-side JavaScript framework dependencies.

  • Hugo: Written in Go, Hugo is renowned for its blazing-fast build times, making it ideal for large sites with thousands of pages.

  • Jekyll: One of the pioneers in the static site space, Jekyll remains popular for its simplicity and GitHub Pages integration.

Headless CMS

Traditional content management systems like WordPress or Drupal typically combine content management with content delivery, often leading to inefficient resource usage. Headless CMS solutions offer a more environmentally friendly alternative by decoupling these concerns.

How headless CMS reduces energy consumption

  1. Separation of concerns

    • Content creation/management is separated from how it’s presented
    • Administrative interfaces (which are resource-intensive) are only used when content changes
    • Front-end delivery can be optimised independently of back-end systems

  2. Perfect pairing with static sites

    • Content from headless CMS can be pulled during build time
    • Pre-rendered static files can be deployed to CDNs
    • This eliminates database queries and dynamic rendering for each visitor
    • A headless CMS + static site setup can reduce energy usage by 60-80% compared to traditional CMS

  3. API-driven efficiency

    • Content is delivered through lightweight APIs
    • Only the necessary data is transferred, not entire page templates
    • Devices receive precisely what they need, reducing processing requirements

  4. Reduced server load

    • Content delivery servers experience significantly less load
    • Most visitor interactions don’t hit the origin server at all
    • Backend systems can scale down when not actively being used for content management
  • Contentful: Offers excellent performance with a focus on efficient API design
  • Sanity.io: Provides a lightweight, customisable solution with efficient data structuring
  • Strapi: Self-hosted open-source option giving complete control over server resources

When paired with static site generators like Astro, these headless CMS solutions create an extremely efficient content delivery system that minimises energy consumption while maintaining full content management capabilities.

Energy-efficient JavaScript frameworks

When interactivity is necessary, choosing the right JavaScript framework can make a significant difference in energy consumption. Here’s how the popular frameworks compare from an environmental perspective:

The most eco-friendly frontend frameworks

  1. Svelte

    • Compiles components to highly optimised vanilla JavaScript at build time
    • Eliminates the need for a virtual DOM and runtime framework code
    • Results in significantly smaller bundle sizes (often 3-5x smaller than React)
    • Lower CPU usage on client devices means less battery drain and energy consumption
    • Studies show Svelte can reduce client-side energy usage by up to 42% compared to React

  2. Preact

    • A lightweight alternative to React with a similar API
    • Only 3kb in size compared to React’s ~40kb
    • Requires less bandwidth to transfer and less processing power to run
    • Compatible with the React ecosystem while being much more efficient
    • Can reduce energy consumption by 25-30% versus standard React applications

  3. Solid.js

    • Combines reactive programming model with efficient DOM updates
    • No virtual DOM overhead, updates only what needs to change
    • Extremely performant with minimal bundle size
    • Energy studies show it performs similarly to Svelte in efficiency tests

Framework selection considerations

When choosing a framework with energy efficiency in mind:

  • Bundle size matters: Smaller JS files mean less network transfer and parsing time
  • Runtime efficiency: Less CPU-intensive operations means lower device energy consumption
  • Partial hydration: Frameworks supporting partial hydration (like Astro) allow you to add interactivity only where needed
  • Island architecture: Isolating interactive components prevents unnecessary re-renders

For applications requiring moderate interactivity, Svelte or Preact should be your first consideration. For highly complex applications, Solid.js offers an excellent balance of features and efficiency. And remember—the most energy-efficient JavaScript is often no JavaScript at all for content that doesn’t require interactivity.

Image optimisation

I used to feel conflicted about storing multiple sizes of the same image. Yes, it increases storage requirements, but is it worth it? Let’s take a closer look.

For a website with 100,000 monthly views and 2MB of images per page:

Single large image approach:

  • Storage: Minimal at 2MB total
  • Monthly bandwidth: A whopping 200GB
  • Energy cost: Approximately 12-40 kWh per month

Multiple size approach:

  • Storage: Slightly higher at 2.8MB (40% increase)
  • Monthly bandwidth: Dramatically reduced to 50GB (75% reduction)
  • Energy cost: Only 3-10 kWh per month

The minimal one-time storage increase is vastly outweighed by the ongoing bandwidth savings. When we consider that transferring 1GB of data over the internet consumes roughly 0.06-0.2 kWh (with mobile networks at the higher end), these optimisations add up quickly.

Building sustainable websites through green web development

Based on these insights, here are the most effective strategies for sustainable front-end development and climate-conscious web design:

  1. Embrace static generation: Use static site generators for sustainable web design that doesn’t need dynamic generation
  2. Optimise for efficiency: Implement responsive images and assets for energy-efficient websites
  3. Smart caching: Configure caching to reduce server load in your green web development workflow
  4. Minimise JavaScript: Each kilobyte of JavaScript impacts your website sustainability audit metrics
  5. Implement lazy loading: Create low carbon websites by loading content only when needed
  6. Choose web hosting with green energy: Select providers committed to sustainable digital services

Web hosting with green energy

If you’re serious about sustainable web design and creating energy-efficient websites, consider these hosting providers that prioritise eco-friendly website design:

  • GreenGeeks: Offers 300% renewable energy match for all the power they consume, effectively putting more clean energy back into the grid.
  • Kualo: UK-based hosting running on 100% renewable energy, with a strong commitment to environmental practices.
  • Krystal Hosting: Another UK provider running on 100% renewable energy with carbon-neutral operations.
  • Green Mountain: Based in Norway, they utilise hydroelectric power and the naturally cold environment for cooling.
  • GreenHost: Dutch hosting provider using wind energy and focusing on overall sustainable operations.

Green CDNs

Content Delivery Networks are crucial for efficient delivery but also consume significant energy. These CDN providers focus on sustainability:

  • Akamai: Has committed to powering 100% of their operations with renewable energy by 2030 and has already made substantial progress.
  • Cloudflare: Working towards 100% renewable energy for their network and developing innovative cooling systems to reduce energy usage.
  • BunnyCDN: Focuses on optimising their infrastructure for efficiency and offers a carbon-neutral CDN service.
  • KeyCDN: Operates with a focus on efficiency and uses some data centres powered by renewable energy.

Conclusion

As web developers and site owners committed to sustainable web design, we have more power than we might realise to reduce the environmental impact of the digital world. Through green web development practices and climate-conscious web design choices—particularly around static content generation, headless CMS implementation, and creating energy-efficient websites—we can build low carbon websites that not only perform better but also contribute to sustainable digital services.

The next time you’re deciding whether to implement those multiple image sizes, convert to a static site architecture, or adopt a headless CMS approach, remember: these “small” optimisations can lead to substantial energy savings when multiplied across thousands of users and millions

Get your free homepage audit

Discover how accessible and sustainable your website really is. Our comprehensive homepage audit reveals opportunities to improve user experience, reduce environmental impact, and ensure compliance with accessibility standards.

Performance

Speed optimisation, Core Web Vitals and user experience improvements

Sustainability

Carbon footprint analysis and recommendations

Accessibility

WCAG compliance check and inclusive design assessment

Ready to see how your website measures up? Get your free audit today, no commitment required.

Request your free audit

Be the first to know

We're not sending out a newsletter just yet, but one's on the way.

Sign up now to get occasional updates on new projects, useful resources, and insights on building better, more sustainable websites - delivered straight to your inbox when the time is right.

No spam. No fluff. Just the good stuff.