Top Tips for Low Carbon, Sustainable & Greener Website Design and Development

We don't talk about it much. BUT making the internet lower carbon, more sustainable and generally greener (whatever that means!) is something close to our hearts.

By comparison to lots about decarbonizing* the world, making websites and apps lower carbon is relatively easy.

This is largely because so much is centralised and digital in tech. A bunch is about following some best practices in design and development and the rest about the energy being used.

The average website makes about 1.76 grams of CO₂* per visit. It might not sound like much, but multiplied up by the billions and billions of sites and visits every day it's a chunk. It's estimated that the tech sector is about 3-4% of global emissions*. So there's work to be done.

We've been very conscious of this when building Zopeful, so have tried to keep everything as lightweight online as possible (it's less emissions for us to remove!). We got it down to 0.26 grams per visit, though recently added a bunch more stuff so now it's about 0.32 grams per first visit. Also, it's all run on renewable energy. We're still going to keep trying to reduce it!

Keeping these visitor linked emissions down is important to us and we're always searching for ways to reduce it, as. well as balance that with what we're looking to make next.

Okay, let's get down to business

This is a quick starter-for-10 on some best practices when making digital stuff to lower its carbon footprint and the emissions from visitors using your tech.

For those that have been around web design and development a while you'll see a bunch of overlap with other best practices - though often not followed - for performance, pagespeed and accessibility.

- Image size - ohhhhh yes! Optimise those images people. There's no point having chunky image files for that thumbnail img! It's a site carbon bloater! Get them small, thank us later for your pagespeed boost too.

- Caching enabled - there's no point serving the same content for return visitors. Using caching effectively reduces the grams of CO₂ for return visitors (it knocks 30% off for us!). You can do this by using a CDN (Content Delivery Network).

- Lazy loading - if you can avoid preloading things that are offscreen until they're needed that'll help too. The user might not even scroll, or maybe they will... who knows in 2022

- Renewable energy - such an easy win now, with a load of green hosting services available. Check whether they're using renewables or offsetting by buying carbon credits. REGOs* are fine (credits that match energy use to renewable energy generation). If your hosting service isn't, switch now, it's an easy win! The Green Web Foundation have a good list of providers

Remember, the electricity being used is across the data centers, transmission networks and also end user devices.

- Video - if image files matter, video size matters just as much. It's best not to autoplay videos too, as thats automagically adding to the carbon intensity of your site and the user might not even be interested in the vid.

- Fonts - not always the aesthetic choice though if you can, use system fonts. If you really want to use a custom font only download the needed characters rather than the whole lot (inc subsets)

- Avoid scroll jacking - and animation on scroll where you can. Sometimes it's nice but is it necessary?

- Use less JavaScript - who doesn't like some JS to spice things up? It also adds to page weight and is processed locally on your user's device so impacts energy consumption. If you can do a thing with CSS, why use JS? (don't @ us!)

- Minify and compress everything not mentioned already. Yep, all code. All assets. The lot.

- Use up to date file formats for all your assets. For example JPG and WEBP for images (oooops that's one we missed, it's on the list to chase down all our pesky PNGs!). For fonts WOFF and WOFF2 have higher compression than other formats.

- Best tool for the job - if it's a lightweight task being performed, use something lightweight. Don't use big tools for small things (they're likely more carbon intense). Making a micro-site, use something appropriate.

- Hosting provider hardware - this is going a bit deeper, but checking to see what they're using and the type of drives can influence the energy used. Solid state FTW

- Go local - if your customers are local or in a single country, use a host in that country. If you have an international audience, using a green host with global caching locations is the way to go. CDNs are good for this too.

- Third Party Services - this is a biggie, third party tools can multiply the amount of carbon per visit. It's things like analytics and ad pixels - they all increase the carbon intensity of your site. Choose and use them wisely. If you're not actively using the service for something important, delete it

- Growing SEO - sounds simple, though sites that are found easier will require less searches. Each search has a carbon footprint (it's somewhere between 1g to 10g per search). Also, less energy is used too. It's just good practice to build up your organic reach anyways - win, win!

Ready to get reducing your site's carbon?

Perfect, we hoped you'd say that (we've become more than a little obsessed with getting our carbon as low as possible!).

Start by analysing your site. We like Beacon as it gives you clues on what to work on reducing next, and there's others like Website Carbon.

Take a look at lowwwcarbon to compare your sites carbon to others. A quick quide per visit is:

Amazing: less than 0.25g

Great: less than 0.5g

Good: less than 1g

OK: less than 1.5g

Bad: above 1.5g

When you've got it down you can submit it to them to add to their low carbon website showcase (we're in it 👋). If you'd like to go deeper there's more resources on sustainable.dev.

Have hope, make progress 💚

For explanations of all the terms in italics with asterisks* check out our Climate Buzzword Dictionary