An energy efficient web

How much do you know about energy first?

Why do websites cost energy? Sure, they have to be designed, developed, deployed and run on servers and devices. But let’s break it down to the physics. What is it that actually consumes energy? It’s a CPU or GPU that has to perform calculations, it’s a network of servers, routers and wi-fi antennas that have to connect to each other, it’s screens that have to produce photons to light up and display a website. So in every stage of a website, from its inception to a user visiting it, we have to minimise or avoid these aspects entirely.

Energy efficiency starts with design

Images, videos, custom fonts, they all require energy to download, process and display. The less resources you use, the more energy you save.

And not every resource has the same footprint:

  1. images require less energy than videos
  2. text requires less than images
  3. a system font requires less than a custom one

Fewer resources are not just a good way to save energy. Lightweight sites are faster, which is great for users and SEO. And text-heavy sites are typically more accessible.

Remember those photons? Dark mode can save up to 20-30% on OLED screens. So maybe it’s time to design a dark theme for your website. We're working on that ourselves too!

Energy efficient web development in the ’20s

It’s the roaring twenties again. Gone are the days where a developer simply edits the designed resources and copies them onto a web server. Instead we rely on package managers, build tools, continuous integration servers, cloud services (like a headless CMS), preview environments and finally our actual website. Needless to say, all these moving parts consume energy. It’s difficult to know just how much, as it’s a web of parts depending on other parts depending on other parts.

The good thing is that we can also use these modern development tools to save energy. We can automatically create smaller versions of the same videos and images, we can remove unused code from our styles, scripts and font files and generate static versions of our sites that only use all those connected cloud services during build.

Pick from the options to improve energy efficiency

Running websites efficiently

  • A lot of web pages are the same for every visitor. So it makes no sense to generate a new version of the page every time. Instead we only generate a new version of the page when its content changes. We use static site generators for this. The same can be achieved with server-side caching and a good cache busting strategy. As a result the server only has to serve the pre-generated / cached web page. This saves a lot of energy, especially on frequently visited sites.

  • When a user visits a page, it has to be served over the network. A request starts in the user’s browser, travels through the network to the server and back to the user. This could mean a full trip around the world. To save on network costs, we can use a world-wide content delivery network (CDN), to serve web pages from a server near the user. CDN’s are very easy to use with static sites, as they can simply store a copy of the pre-generated pages. We also use as little of the network as possible by compressing resources with gzip and brotli.

  • For dynamic pages we use cloud functions (lambdas) on an edge network. Just like the CDN, they run close to our users. Unlike a regular server, a cloud function only runs when it receives a request. When more requests are made at the same time, more instances of the cloud functions spin up. When the requests decrease, the cloud functions scale down. This way, we only use the energy we need when we need it.

  • Once a user received a resource we can ensure it never has to request it again. We achieve this using client-side caching. We ensure a resource never changes (or revision the resource name if it does). Then we tell the browser it can keep the file “forever” (using ’Cache-Control’, ‘public, max-age=31536000, immutable’).

  • At the end of the day, our websites will still require websites to run. The best we can do, is make sure they run on sustainable energy. Our websites partially use green hosting providers, so we still have some work to do here. You can check if your site has green hosting.

Commit to energy efficient websites

We’ll continue to improve the energy efficiency of our websites. And will push our design partners, hosting providers and clients to do the same. We are committed to creating a more sustainable web. So all of us at De Voorhoede signed the Sustainable Web Manifesto. You should commit and sign it too.

Sign now