How to create a low carbon impact website

The internet has a larger toll on the environment than the entire aviation industry. Discover how to make changes to reduce your website's energy use.

Louise Hill 27 Feb 2023 4 min read Sustainable design

Eco-protestors are gathered. One holds a large black and white sign, written on it is "No nature, no future".

Dear internet, we have a problem.

If the internet were a country it would be the world's 4th largest polluter.

Ways the internet produces environmental damage:

Websites (computer illustration); servers (2 servers); electronic waste (a plug and a jack wire); infrastructure and equipment (mast with a signal on top).
4 key ways the internet causes environmental damage

1. Websites consume energy

This energy is usually produced through burning fossil fuels. Doing this contributes to climate change and carbon dioxide emissions.

2. Server emissions

Servers need energy to run and to cool down. The more data a website uses, the more server power it needs and in turn, the greater emissions it generates.

3. Electronic waste

Servers and hardware need to be updated and old equipment needs to be disposed of. This waste can be harmful to the environment.

4. Infrastructure and equipment

The internet needs data centres, cables, wires and other equipment to function. These consume energy and may become electronic waste too.

The good news is that it is totally possible to create a low-impact site. There are some quick changes you can make which can result in dramatic reductions to your site’s carbon emissions. We wanted to share some of the ways we reduced our site's carbon footprint so you can apply them too.

How did we ensure our site has a low carbon footprint?

At Futurelabs we focus on creating a more sustainable, equitable and accessible future. In practice, that means that when we are building a website, we want to ensure it has a low environmental impact.

On average, our pages on the Futurelabs website emit just 0.24 of CO2 per view (measured 27.2.23). We have a badge at the bottom of each of our pages to show the amount of carbon dioxide each produces.

Website badge showing "0.36 of CO2/view" and a button sayig "website carbon". Below the button reads: "Cleaner than 63% of pages tested".
Carbon badge in the footer of every page

The process

Having a climate-conscious site was a key goal from planning to execution. We considered how to reduce site energy consumption through technology, design and content choices.

Green hosting (2 servers and 2 leaves); clean code (computer and 3 sparkly stars on the screen); lazy loading (3 arrows rotating).
Tech considerations for a low carbon site

Technology decisions


Hosting
  • We chose to build our site on Webflow. Webflow’s web hosting (on AWS) has a carbon-offsetting program (they use Pachama) — offsetting has its drawbacks, but it seemed the best compromise overall
Clean code
  • The code on Webflow is very efficiently written, which automatically reduces a lot of code wastage
Lazy loading
  • As a default, Webflow only loads images once they are scrolled to. This means energy is not used loading up images which aren’t being viewed at that moment by the site’s visitor
Images and video (image placeholder and play button scribbled out); colours (artist's palette); fonts (computer screen with ABC on it); user experience (mouse cursor and a sparkle and star).
Design considerations for a low carbon site



Design decisions

Images and video
  • Making a visual impact is important for Futurelabs. However, when it came to images, we thought long and hard about what was and wasn’t necessary to include on the site
  • Webflow does a great job of optimising images across all screen sizes, however some need additional reduction 
  • Each large image was optimized by us using tinypng, this reduced file size dramatically 
  • Any images without transparency were exported as JPEGs to reduce file size
  • Instead of using video, which has notoriously large file sizes, we used animated GIFs for anything with movement in. We then ensured these GIFs were accessible.
  • We reduced the file size of GIFs when exporting them and then used an additional optimisation tool to reduce their size even more
  • When using simple graphics we generally used SVG files, instead of image files—they are often lower in file size
Colours
  • OLED screens emit more energy with screen colours which contain more white
  • We have mainly used off-whites and grays instead of white throughout our site and many of our pages use darker backgrounds
  • Green, our primary brand colour, has one of the lowest environmental impacts in the colour spectrum
Fonts
  • We love a beautifully crafted custom font. However, this can also add additional energy load to a web page. System fonts like Arial and Times New Roman have the least loading energy because they are pre-loaded on people’s computers
  • At Futurelabs we use the beautiful typeface: Inter. It is a variable font which makes it more energy efficient because all font weights come in 1 file from the google fonts API, but this was a trade-off for the benefit of a more customised brand and user experience
User experience
  • We have made every effort to help our site’s users navigate through content as efficiently as possible to reduce energy waste 
  • We have only used animation where we believe it assists in signposting where to go, or what to read next. JavaScript (which is used for a lot of web animation) does make pages less eco-friendly, but Webflow has great quality code and highly optimised animation solutions
Copy (titlw saying ditch the jargon and 2 subtitles saying optimise your images, use SVG files); SEO (a search field saying Futurelabs and 2 results for Futurelabs. First says Digital innovation studio, we design products + strategies + ventures + brands. The second has a Linkedin lkogo and reads 'Futurelabs innovation - Linkedin).
Content considerations for a low carbon site

Content decisions

Copy
  • At Futurelabs, one of our values is that we “ditch the jargon and get to the good stuff”, so we are efficient with our words
  • Streamlining copy allows people to get to the information they need faster, reducing energy consumption
Search Engine Optimisation
  • SEO helps people to find the relevant information they are looking for 
  • If they find your site faster, they use less energy overall
  • Each page on the Futurelabs site is optimised for SEO
  • Every image contains alternative text, which is vital for website accessibility and improves SEO

Trial and error

Even with this process in place, there were still a few pages that needed tweaking after scanning them with the incredibly helpful: Website Carbon Calculator.


How can Futurelabs help you with your sustainability goals?

We can build you a low carbon Webflow site or landing page with optimised SEO and analytics built in, with or without a CMS. We can also design a brand with you which has a lower carbon impact from the get-go. Additionally, we can take a look at your current site and help you reduce its carbon impact from a user experience and visual design perspective.


Get in touch to learn more.