Sustainability
5 min read

Create a low carbon impact website

By
Louise Hill
October 3, 2023
Share this post
Eco-protestors are gathered. One holds a large black and white sign, written on it is "No nature, no future".

Overview

Dear internet, we have a problem.

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

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

Ways the internet produces 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. I wanted to share some of the ways I reduced my site's carbon footprint so you can apply them too.

Websites (computer icon); servers (server icon); electronic waste (a battery icon); infrastructure and equipment (an electricity plug icon).
The main ways the internet causes environmental damage

How did I ensure this site had a low carbon footprint?

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

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

Website badge showing "0.11g of CO2/view"; and a button sayig "website carbon". Below the button reads: "Cleaner than 89% of pages tested".
Look out for this badge at the bottom of each of this site’s pages.

The process

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

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.

Green hosting (recycling icon); clean code (code icon); lazy loading (loading symbol icon)..
Technology decisions made for a lower environmental impact

Images and video

  • Making a visual impact is important for Futurelabs. However, when it came to images, I 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, I used animated GIFs for anything with movement in. I then ensured these GIFs were accessible.
  • I 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 I 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
  • I have mainly used off-whites and grays instead of white throughout the site

Fonts

  • I 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, I 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

  • I have made every effort to help site users navigate through content as efficiently as possible to reduce energy waste
  • I have only used animation where I 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
Images and video (image icon); colours (artist's palette icon); fonts (text icon with an underline); user experience (mouse cursor active icon).
Design decisions that helped create a site with a lower environmental site

Copy

  • At Futurelabs, one of the core values is to “ditch jargon and get straight to value”, so I am efficient with my 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 I help you with your sustainability goals?

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