The sustainable web design revolution

Published: 15th October 2019

Tackling climate change is critical and although certain causes are well known, the internet is often overlooked. What many do not realise is that the internet consumes more electricity than the entire United Kingdom, which is significantly contributing to global carbon emissions. As of 2018, a typical website is estimated to produce 1.3 grams of carbon dioxide every time a web page is loaded.

You can estimate how much carbon dioxide (CO2) your website generates per page load using WebsiteCarbon’s innovative online tool.

Raising awareness of the environmental impact of websites is a crucial first step to help create a sustainable online eco-system. The good news is that there are ways to dramatically cut down the energy consumed by websites and to cut carbon emissions. In 2012, an average website was estimated to generate 6.8g of CO2 per page load. The reduction on average to 1.3g of CO2 per page load is a vast improvement but more needs to be done!

The benefits of making your website more energy efficient are huge! As well as helping the environment, your website will load much faster which will improve the performance of your website by pleasing impatient visitors. Google also uses page speed as an important ranking factor so your website can appear higher up in search engine results if it loads quickly. Here are two key things to consider in order to prevent your own website from contributing to this global issue…

1. Is my website sustainably hosted using renewable energy?

This one is the most obvious but makes a massive difference. Before you optimise your website, ensure that you choose a hosting provider whose data centres are completely powered by renewable energy. This way, you will know that any power your website consumes is coming from clean sources and is not being powered by fossil fuels. We host all of the websites we design using 100% green hosting provided by UK based hosting company, Krystal.

Many of the mainstream hosting providers do not mention the sources of the energy they use so it is very easy to miss this when choosing a provider. The Green Web Foundation provide a free tool to check whether your website is using green hosting.

2. How much data gets transferred when my web pages are opened?

The environmental impact of a website’s page size is less understood than switching to renewable hosting. When you load a website in a browser, electrical energy is needed to transfer data from a data centre to your device. The amount of energy your website consumes is determined by the combined size of all the files that are needed to load each page. This includes HTML, CSS, Javascript, images, videos and anything else included within your web pages.

Each web page should really be below 2MB in size and ideally closer to 1MB or below (for example, our own website’s entire home page has a total page size of just 0.27MB). You can use free tools such as Pingdom to find out the size of your web pages.

The truth about DIY website builders

DIY website builders have made it easier for anyone to be able to create a website with no coding knowledge via services such as Squarespace and Wix. These services provide tools that allow you to build a website quickly and easily using pre-set templates tailored for different types of businesses.

Unfortunately, just having the tools doesn’t mean you can get the job done well. Unless you happen to have a strong understanding of visual aesthetics, user experience design and online marketing, any business owner who relies on their online presence for generating revenue should seriously consider investing in professional help to create their website.

Are DIY website builders actually free?

Another common misconception with DIY website builders is that they are completely free. Technically they can be, but only if you’re happy to have your website hosted on an ugly website address, have very limited features available and have ads splattered across your website. In order to remove these negative features, the cost is more likely to be between £15-£40 a month.

Should I use multi-purpose WordPress themes instead?

For the more tech savvy users, multi-purpose WordPress themes such as Divi, Avada and X-Theme provide very powerful and versatile drag-and-drop functionality using sophisticated visual editors. Even some professional web designers use these and they are popular for a reason as they provide hundreds of built-in features and endless flexibility.

Multi-purpose WordPress themes tend to be complex, we have used Divi in the past and even for professional website developers, there is a steep learning curve involved due to the sheer number of features and customisation options available.

Whether using simple DIY website builders or more sophisticated multi-purpose WordPress themes, there are some major downsides…

1. Your website can be very slow!

Websites built using DIY builders and multi-purpose themes are often very slow and bloated, usually as a result of images not being compressed and correctly sized but also due to the vast amount of features that are loaded in the background regardless of whether they are used or not.

It is widely accepted that the ideal time a website should take to load is between 2 to 5 seconds. However, each second beyond 2 seconds results in greater numbers of visitors abandoning your website. One study suggests that 40% of polled internet users report abandoning a site if it takes longer than 3 seconds to load and 47% of users expect desktop sites to load in 2 seconds or less.

This is a tough target to hit but it is definitely achievable! Our homepage for instance, takes just 0.6 seconds to load on desktop and 2.6 seconds on mobile. You can find out how long your website takes to load as well as your overall page speed score by using free tools such as Google Page Speed Insights. website scored 100% using Google Page Speed Insights

2. The environmental impact

We have already discussed that the average amount of carbon produced by loading a web page is 1.3g, but this can be much higher. As of October 2019, the Squarespace homepage generates an estimated 3.92g of carbon every time it loads! To put this into context, this means that each year, based on 10,000 monthly website visits, their website would consume the same amount of energy needed to drive an electric car for 6,330km and would emit the amount of carbon 22 trees absorb in a year.

We are proud that the homepage of our own website comes in at just 0.08g, which is also typical for the websites we create for our clients.

We encourage you to check your own website’s carbon footprint here.

3. And finally, the often forgotten cost of DIY websites

The monthly or yearly costs of using various website builders is only one side of the coin. The often overlooked but very valuable cost of your time should also be factored in. DIY website services rely on you spending a significant number of hours building and regularly updating your website, sourcing images and writing content. This is time you could have otherwise spent running and growing your business.

How can I make my website more efficient?

Website speed optimisation is tricky when using content management systems such as WordPress and especially hard when using DIY website builders such as Wix where you have less control over the way the pages are built. However, their are many design considerations that can be made to streamline web pages…

1. Optimise your images and choose them wisely

Taking the time to properly size and optimise every image on your website will make a huge difference to the overall size of your web pages. It is also worth noting that the actual images you choose also have an impact. Images with lots of fine detail in them are harder to compress so choosing clean and minimal imagery with lots of negative space will not only give your website a sophisticated feel but can also help reduce image file size. Heavily blurred images can also be compressed to very small file sizes and work well for large backgrounds by adding depth to your content.

There are many free services that can be used to optimise your website images before you upload them. We use TinyPNG as an example.

2. Use less website pages with more content on each

Splitting your website into an unnecessary number of individual pages is detrimental for user experience and the environment. The more pages a visitor needs to load, the more data requests that are needed and the more energy that is consumed.

Plus, having to load lots of web pages can create a fragmented and frustrating customer journey. By strategically structuring your content, you can improve the customer experience by allowing the visitor to scroll through or jump between deeper content on a single page. You will tend to find that designing your website sustainably, with environmental impact in mind will naturally form a simpler, easier and more satisfying online experience for your customers.

3. If it’s not needed, don’t load it!

The problem with multi-purpose, feature rich page builders is the temptation to use everything on offer. Image sliders, video backgrounds, pop-ups, forms on every page, slide shows – everything is shiny and enticingly easy to implement.

This has unfortunately created a culture of website decadence packed with complex, energy hungry features that often just get in the way of the visitor’s experience. Don’t get us wrong, there is a time and a place for these cool features but the trick is to use them sparingly and strategically to boost website conversion while also maintaining fast and efficient load speeds.

4. If using WordPress, choose a lightweight theme

Our website was built in WordPress using the excellent GeneratePress Pro theme, an ultra lightweight foundation on which to build completely custom content. We mainly used the built-in WordPress Gutenberg editor which we further supplemented with the Kadence Blocks plugin (this plugin allows you to only activate the additional features you need). If you are a website designer currently using large multi-purpose themes such as Divi for clients, we highly recommend trying this approach to compare performance.

Summing up…

We believe that the internet is on the verge of a sustainable web design revolution. More and more people are becoming aware of the importance of sustainable web design and green hosting powered by renewable energy.

As well as putting pressure on big companies to drastically improve the energy efficiency of the online services they provide, we all have a duty to assess our own websites and make whatever alterations we can to reduce energy consumption and improve speed and performance.

If you are in the process of choosing a web design company, we recommend testing their own website using the tools mentioned throughout this article. This will give you an idea of how much they care about web sustainability and performance. You can safely assume that if their own website is performing poorly, then the websites they create for their clients are probably going to be similar.

As with anything, the first step is building mass awareness so please spread the word!