Designing & building a sustainable website

Regardless of whether you are launching a brand new site, or have been managing an existing site for years, there are many ways you can reduce your website’s carbon footprint.
 
But in the same way that it’s harder to alter the plumbing of a house after it’s been built, it’s trickier to implement some changes to a website once it’s already live.
 
This article will focus on the things to think about if you’re building a new website.
 
If you already have a website that’s up and running, fear not, we suggest many things you can do to ‘green up’ your website in our Making your current website more sustainable article.

Hosting & storage

If you’re building a new site, you need somewhere to store the finished product. The first thing you can do to ensure your new website is green, is to ensure that your storage solution runs on clean energy.

Nine times out of ten, you will store your website in a data centre, managed by your hosting provider. Data centres use LOTS of electricity to keep your websites online, and their servers nice and cool.[2] Because data centres use so much power, the source of that energy has a large impact on your digital carbon footprint.

Starting with a data centre that runs on clean renewables (here’s a list), like wind and solar, is a great foundation for your new, low-impact website.

(If you already have a hosting provider, you can find out if they are “green” by asking them the questions in this article.)

Green images

The next thing you want to consider when you’re building your new, eco-friendly website is the design itself. Believe it or not, how your website looks will affect how much carbon it emits. Two of the biggest contributors are the images you use, and the font you pick.

First let’s talk about image files. They are much, much bigger than text; on the web, a picture is worth 6000 words, or about 8 solid pages of type.

Designs that use lots of images, or very large images, need more storage, and require users to load more ‘stuff’ to see your web page. Both of these use more energy and affect your carbon footprint. They can also slow down your website.

Reducing the total number, and dimensions of images used in your web designs will go a long way to reducing your impact.

However, there is no need to make web pages “just text”. Designers can also use other low-impact visual styles to engage users, such as Illustrations with solid colours, greyscale or other single-hue image styles, and oversized typography.

Eco-friendly type

Like images, typefaces can make up a large part of your page weight. Just like images, they can be optimised for performance. Here are a few options:

  1. Use a system font over a custom font. This means that you let your user’s device determine the typeface on your webpage. You have less control over the look and feel, but as there is no type file to load, your page will be ultra-lightweight.
  2. If using a custom font, limit the number of custom fonts & weights you use. More fonts to load = more page weight = longer load time. You can also use a variable font, which means that you only need to load a single type file, rather than one for each weight or style.
  3. If using a custom font host it yourself, don’t use an external provider like Adobe Fonts to load it. With externally hosted fonts, your web page may have to make several calls to the provider before loading the type, and that takes time!
  4. Use the right file type (likely WOFF2), and remove unnecessary glyphs with FontSquirrel

Caching & Content Delivery Networks

Remember our librarian from the Intro to sustainable web design article? When you asked him for Charlie and the Chocolate Factory, he had to walk to the shelves, find it, and bring it back to you. But what if he knew that Roald Dahl books were really popular. To speed up checkout, he might decide to keep a copy of popular titles behind the desk, so you can get them instantly. This is essentially what website “caching” does.  

When you cache a web page, you make a copy of it and place it a little closer to users. They see your webpage sooner, and their device uses less energy to load it. One is good for your business, the other is good for the planet.

When you cache your webpages and store them in multiple locations (typically around the world), that’s called a “Content Delivery Network” or CDN. If you have users spread out across multiple countries, this can speed up their experience because your website data can be stored closer to them. This would be like our librarian strategically placing copies of popular books around the entire library, so customers always have a copy close by.

Remember the essentials

If you want to make a website as eco-friendly as possible, there are some things that are worth thinking about before you go live. Choosing a green hosting provider, light-weight designs and typefaces, and a sensible caching strategy can all help ensure your website is both fast and good for the planet.  

Why not listen to our podcast?

In this episode, Danny talks to UX Designer Sam Selbie about finding simple ways to make your business website more sustainable.
We look at ways of reducing your website’s carbon footprint through some small changes, such as image sizes and hosting, as well as exploring how a sustainable website can also benefit your customers and their experience of your brand online!
Find out how you can start being more sustainable today.