Digital sustainability

How to make your website more sustainable

(Guest post by Chris Butterworth, sustainability driven strategist, designer and developer)  

Your website has a carbon footprint!

The internet itself has a huge footprint and massive power requirements using 416TWh every year and that number will grow as more and more users and business join and more content being made available online.

Obviously, reading this article you care about the environment, the impact that technology can have and need to use the internet to get your message out there – let’s face it; there’s no bigger platform. But even by being online, your website uses electricity in a variety of ways which can be reduced to help lower its carbon emissions.

This article will run through the three areas your website uses energy and ways to help improve them.

Hosting

Your website needs somewhere to live and the server it sits on can be optimised to allow for a lower carbon footprint.

There are now a multitude of carbon neutral offerings available from the likes of 34SP, WP Engine (if you ask nicely), Kinsta, Raids and Nimbus – even Amazon are stepping up their game by investing in green energy supplies to power their infrastructure.

Setting up caching and compression here to serve files and images quicker and saving them to the browser also help reduce your carbon footprint by stopping the same file needing to be downloaded and rendered again.

Your website

I’m going to break this up into two elements: front end (what you can see) and back end (what you can’t).

Back end

Most back end operations will hopefully be covered by your hosting by serving cached files to help render and output pages quicker and using less energy.

If for whatever reason this can’t be done you can still do something.

CMS’s like WordPress are amazing but can be very slow when doing something complex with data thanks to their database structure. Optimising queries will help reduce the amount of energy needed and for how long by making sure they are run as fast as possible.

If you can, export a static version – there is nothing quicker than a static HTML document, there’s no database to query and no script to execute just a file to serve.

Front end

Compress everything!

Images and videos should be compressed and served at the optimal sizes and there are multiple ways of doing this. Images and videos should be lazy loaded; there is no point loading something if it is off screen.

For developers, tools like Gulp, Grunt and webpack are amazing as they can handle this with ease and do so much more.

Devices

How your website is designed and interacts can draw more power from a device than necessary. Whether it is script driven interactive experiences or CSS powered animations, these both use power but can be contained and reduced by optimising or removing scripts and optimising animations as well as pausing when the browser tab or window isn’t focussed on. WebKit have a great article on this and I highly recommend reading it: https://webkit.org/blog/8970/how-web-content-can-affect-power-usage/

Even without the interaction and animation, your device will use power to access your website and with that comes the need to charge – unfortunately this is out of our control as we can’t force people to use renewable energy suppliers but the growth of them – from Bulb, Good Energy, Ecotricity and even npower stepping up their game – it won’t be long before a lot more people are using them.

Budgeting targets

Setting goals can help give you a target to aim for. Whether you start by reducing your front end size by 20%, go extreme and use performancebudget.io or dig deeper and start timing and optimising database queries – having a target in mind will always help.

For front end budgets, Wholegrain Digital, Brad Frost, Dan Mall and many others have written articles based on this with Brad’s and Dan’s being focussed more on performance with becoming more sustainable being a side effect of that.

I will say not to be put off by the amount of work that is needed to help achieve this. Take small steps and focus on small aspects at a time – images are always a good place to start as they can take up more bandwidth than other file types.

Plus it’s a win-win scenario, by reducing your website’s carbon footprint it will also improve performance which can help improve conversion rates and, with consumers now becoming more conscious of who they purchase from, talking about reducing your carbon footprint will only help with this.

 

About the author: Chris is a sustainability driven strategist, designer and developer helping clients in multiple industries lower their digital carbon footprint without sacrificing on quality with creative, stable and performant websites and web applications. Get in touch with him on LinkedIn, Twitter or his website.