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.

‍

‍

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.

‍

‍

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

I chose to build the Futurelabs 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

• 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
  ‍

‍

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.