Sustainable design: how your website can save energy and the environment

How harmful to the environment is running a website?

How much energy is your robots-falling-over Tumblr using up? Surely our own humble UX platform can’t be destroying the environment, we love the environment! It’s got all of our stuff in it! Does a Google search really use up the same amount of energy as boiling a kettle? (No – but its annual energy consumption equals 1/4 of a nuclear power plant).

Even though it may not be as obviously harmful as leaving your diesel van idling outside your house ‘just to keep it warm’ – the internet is responsible for a significant portion of the world’s energy consumption:

• Our billions of internet-connected devices will produce 3.5% of global emissions within 10 years, this is likely to rise to 14% by 2040, according to research published by Climate Home News (and reported in The Guardian).
• This percentage surpasses the aviation and shipping industries thanks to a 20% increase in global demand for all sorts of fancy tech, including: internet-connected devices, high resolution video streaming, emails, surveillance cameras and smart TVs.
• The IT industry consumed roughly 3-5% of the world’s electricity in 2015, and by 2025, it could be use 20% of all electricity and emit up to 5.5% of the world’s carbon emissions.

So what’s truly responsible for this rampant appetite for energy?

Well yeah, obviously humans, but let’s just take it as read that the world would be a much nicer place without us in it. The answer I’m looking for is data. Tonnes of the stuff. All housed in warehouses that look like this…

As researcher Anders Andrae, who works for the communications technology firm Huawei, alarmingly states in the Climate Home News research:

We have a tsunami of data approaching. Everything which can be is being digitalized. It is a perfect storm. 5G is coming, IP [internet protocol] traffic is much higher than estimated and all cars and machines, robots and artificial intelligence are being digitalized, producing huge amounts of data which is stored in data centers.

Energy consumption will likely triple in the next five years as one billion more people get online in developing countries, while the internet of things, driverless cars, robots, video surveillance and artificial intelligence grows exponentially in rich countries. 

Sustainable web design in the corporate world

Thankfully the major tech giants are making positive changes to the way they run their operations. According to Tim Frick, CEO of Mightybytes and author of ‘Designing for Sustainability’:

The environmental community has successfully taken the lead in pressuring large tech companies like Google, Apple, and Facebook to power their data centers with renewable energy.

You can read all about Google’s commitment to the environment here – basically, as of 2017 Google is 100% powered by renewable energy and is the world’s largest corporate buyer of green energy.

But what about our slightly more humble operations?

We recycle, we turn lights off when we leave the room, we take public transport, but I bet we’ve been letting our favorite blog run rampant. I know I have.

According to Frick, we’ve stumbled blindly into the digital age and just haven’t been paying enough attention to how unwieldy the web has become:

At nearly 3.4 MB, the average web page is almost 400% larger than it was just seven years ago. With billions of pages online, we have created a web full of slow, bloated, inaccessible experiences that frustrate users and contribute significantly to annual global carbon emissions.

To paraphrase Tim Frick: Bad UX isn’t just frustrating users, it’s trashing the planet.

What can we do about wasting energy? How can we adopt sustainable web design?

How to save the planet with your website

Many of these sustainable design recommendations go hand-in-hand with good user experience – i.e. presenting the user with the easiest, hassle-free journey to the content they want, and also good technical SEO – i.e. improving the navigation and structure of your website, therefore improving the findability of your content.

These are the main areas that you should concentrate on when designing a website in an efficient, environmentally friendly (and user friendly) way.

Findability

This is all to do with how easy a page is to find on your website. Don’t make your visitors jump through hoops to access the content they’re looking for. The more pages someone has to navigate, the more server requests are made – and therefore the more energy your site needs to use.

• Make sure your menus are clearly labelled and easily navigable
• Make sure your categories and subcategories are thoroughly accounted for in menus, and have obvious and helpful titles
• Make sure your search function is easy to find, and perhaps think about installing a dynamic search box so that a user doesn’t have to visit multiple results pages

Performance 

If your site is performing efficiently, then it’s using less power. This is also where good technical SEO comes in – many of the factors that Google uses to rank your content are also energy savers – particularly page load speed and mobile friendliness.

To improve your page load speed (and improve SEO/UX/the environment):

• Ditch all those horrible auto-playing ads and videos that are dragging the load time down and ruining the user experience
• Reduce the number of redirects you have on your site (the more 301s you have, the more server requests)
• Avoid running too many plugins – these can slow down your whole site, so run regular audits to see which ones you really need.
• Enable browser caching, so the elements of your page are saved on repeat visitors’ browsers and don’t need to be re-downloaded every time
• If using video, consider embedding from Vimeo or YouTube instead of hosting it natively on your website
• Optimize your images for the web 
• Consider using Google AMP (accelerated mobile pages) – this provides stripped down, fast loading versions of your content to mobile visitors without much effort from yourself or your dev team.

Remember the fewer elements you have on a page, the faster it will load.

Minifiy

It’s a good idea to minify (remove unnecessary characters to reduce file size) the language you use to code your site. As Oliver Russell explains,

JavaScript and CSS sheets can be combined with similar files to minimize energy consumption by creating fewer server requests. With all of the frameworks, libraries, and plugins available, it’s very easy to add separate JavaScript and/or CSS files without putting much thought into it. This issue is especially problematic in WordPress sites where a new plugin is a click away and each plugin comes with a separate CSS and JavaScript file.

Green hosting

The server that’s keeping your website running is probably part of a giant server farm, running 24 hours a day, 7 days a week. But you can make an ethical choice and use a hosting company that’s powered with renewable energy.

There are many companies out there, and although we can’t vouch for their individual credentials  we can point you in the right direction to do your own research.

The following are recommended in this blog post:

• http://asmallorange.com/
• http://www.aiso.net/company
• https://www.fatcow.com/
• http://www.greengeeks.com/going-green/

Offset your carbon footprint

And if all of the above is impossible, or you just want to make up for the deficit, you can buy a ‘carbon offset’. There are plenty of carbon calculators and charity donation pages online, just remember this advice from A List Apart:

Offsetting doesn’t actually take the CO2 out of the atmosphere, and it is a poor substitute for reducing emissions. However, many programs have additional benefits, such as funding education in the developing world or protecting fragile habitats.