A Guide To Greener Websites

In our increasingly digital world, we often overlook the environmental impact of the websites we build and use every day. 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 the various ways websites consume energy and how seemingly small optimisation decisions can make a significant difference.

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.

Popular Static Site Generators

• 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

Popular Headless CMS Options

• 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 Greener Websites

Based on these insights, here are the most effective strategies for reducing your website’s energy footprint:

1. Embrace static where possible: Use static site generators for content that doesn’t need dynamic generation
2. Optimise image delivery: Implement responsive images with appropriate sizes for different devices
3. Leverage caching: Properly configured caching dramatically reduces redundant server requests
4. Minimise JavaScript: Each kilobyte of JavaScript consumes significantly more energy than static HTML
5. Implement lazy loading: Only load below-the-fold content when users actually need it
6. Choose green hosting: Select providers powered by renewable energy

Green Hosting Providers

If you’re serious about reducing your website’s carbon footprint, consider these hosting providers that prioritise sustainability:

• 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, we have more power than we might realise to reduce the environmental impact of the digital world. By making thoughtful optimisation choices—particularly around static content generation, headless CMS implementation, and image delivery—we can build websites that not only perform better but also consume significantly less energy.

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 of page views.