How to make your eco-friendly brands website greener

How to make your eco-friendly brands website greener

Did you know that if the internet were a country it would be the 6th largest polluter?!

Do you think about your website having a carbon footprint? Or how your social media use and video streaming do? Or how that cloud storage packed full of files (guilty!) is actually having to be hosted in data centres that need to be powered somehow. It’s honestly so easy to only think about how the physical things we see around us have an impact on the planet and yet of course our online activities do too. In fact they are having a profound effect.

We don’t all need to close down our online businesses and give up. Especially as if you are reading this post you most likely got into doing your business because you wanted to make a difference and not business as usual. You are probably trying to choose planet over profit, or planet and profit. And there are many of consumers who want to be choosing the better option.

See where your website is currently at

You can use a tool like https://www.websitecarbon.com/ to see how much CO2 a page on your website produces.

Know that you can make improvements as you go rather than having to dramatically change things overnight. I’d love to redo my website incorporating everything I’ve been learning but frankly right now it can’t be a priority and I just have to tweak what I can.

Switch to more eco-friendly hosting

A somewhat easy thing to do if you are hosting your website (eg. not using a builder or platform like Squarespace, Shopify, Showit, Wix etc) is to switch to a more eco-friendly/green website hosting company.

What to look for….

Data centre location – One thing most people (including myself previously) don’t tend to think about is where the data centres for your website hosting is located. If you are a UK based company and all or most of your customers are in the UK then you should choose a web host that has UK data centres not a US based one. This reduces the data transfer.

How they are powered – Some website hosts will be powered entirely by renewable energy others might utilise tactics such as carbon offsetting to boost their claims.

Other commitments to good practices – Check out their claims around how they do business and what commitments they have made.

Check their reviews – Same as you would with any other website hosting company you can get a good sense of what their customer service might be like for example.

The good news is switching might not be as stressful as you could be imagining in fact a lot of website hosts will in fact help you migrate your website over to them either for a small fee or free! You could also commit to making the change as part of a website redesign.

The Green Web Foundation Directory is a good place to look for a suitable website host.

If you are using one of the hosted platforms – check their sustainability policies!

During my research for the best solutions for clients when starting Elm Leaf Studio I was quite shocked to see certain companies like Squarespace do not appear to be prioritising sustainability and lack any transparency. However Shopify do have policies in place and are transparent with what they are doing, they write reports and have sustainability aims and the hosting is ‘green’.

Make your website easy to navigate

If you remember that every page load on your website equates to energy use and thus greenhouse gas emissions then you can see how unnecessary clicks has an effect. Your website visitors will thank you too if they can just find what they are looking for.

Reduce your website size

Minimising how much needs to load on a page from what you can see to the more techy scripts and code makes a difference to the size of a page (and thus site). Try to avoid using too much video and certainly don’t autoplay (which is bad practice anyway)

In general the smaller your website is, the faster it is as well so it really is a win-win. You can use caching which serves visitors a copy of aspects of your website rather than freshly loading them each time.

Another consideration particularly relevant for e-commerce is using a content delivery networks to reduce the page load by serving the content from a data centre that is nearer to the website visitor. This makes your website faster and the data doesn’t travel as far as if your website is hosted in a completely different country.

Ensure photos are saved for web – especially for e-commerce!

If you have an e-commerce website then you will of course have a lot of imagery on your website, it’s pretty much par for the course. Although I did see an interesting approach taken by Organic Basics to create a ‘low impact’ version of their site which make use of illustrations rather than photos and they say “The Low Impact website reduces data transfer by up to 70% in comparison to our regular website.”

But don’t worry I’m not suggesting you take such a radical approach. A common thing I’ve noticed over my years of working as a website designer is that when clients upload their own images they are often much too big! Even photos from your smartphone are large nowadays.

If you are working with a photographer then you can ask them to supply you with low-res images that are saved for web, and you could specify the dimension in relation to what you need for your website. So say the largest your image is going to be viewed at is 1200px wide then you don’t need an image that is 2000px wide. You can often further optimise by using a service like Tiny PNG which will strip extra data from the image making them smaller. Saving images as jpgs are usually smaller in size that pngs as they have less data.

As you will have seen from the Organic Basics example using vector illustrations where you can could significantly reduce the page load.

Bonus round: A darker colour palette, minimising web fonts and limiting animations

This might surprise you but even colour choices can make a difference, as a darker colour uses less power on OLED screens. Choosing web safe fonts or simply minimising the number of custom web fonts will reduce the number of scripts running when the page is loaded, you might consider using an on brand heading and a web safe font (eg. a typical computer system font) for the body copy. And similarly to everything else creating animated effects will add extra code to a website so limiting them will make the website smaller.

What’s your biggest takeaway? What actions will you plan to take?