Sustainable Web Design - How To Reduce Your Website’s Carbon Footprint?

Website Design and Development

Written by
Robbie Mould

Most businesses are conscious about their carbon footprint and environmental impact these days and try to consider the impact of a journey, event or meeting will have on their overall footprint. But what is less known is how much energy our devices consume viewing, transferring and sharing data. According to Mike Hazas, a researcher at Lancaster University, about 3.7% of global greenhouse emissions are produced by the internet, devices and all the infrastructure that supports them. What is even more shocking, is that this figure is roughly equivalent to the amount produced by the airline industry globally, and emissions are forecast to double by 2025.

At RJM Digital, we understand that websites play a considerable role in contributing to overall global carbon emissions - and that’s why we are helping small businesses to calculate and reduce their website carbon footprint.

How Does My Website Add To A Organisation's Carbon Footprint?

There are a several factors that contribute to your website adding to your CO2 emissions (CO2e). Essentially, a website’s carbon footprint depends on how much energy it consumes when performing certain tasks, such as playing videos, displaying text, images or forms, and even when no one is visiting the site and it is being hosted 24/7 on a server in a data centre.

What Does Sustainable Web Design Mean?

The idea behind sustainable web design is to reduce the website’s carbon footprint. The best way to do it is by reducing the amount of data travelling between the user and the server. As a result, fewer server resources and energy will be required to process the data, reducing carbon emissions.

Unfortunately, web developers and website owners can often overuse website elements (such as media, text, links, forms, etc.) leading to a higher consumption of server resources.

Our focus should be on using only the elements essential to a good user experience. Check out our tips below to see how you can promote sustainable web design:

Green Web Hosting

Did you know that some servers and data centres use an incredible amount of energy to keep websites running 24 hours a day, 7 days a week, as well as the energy consumed cooling serves to prevent overheating, which could result in a fire and subsequent data loss. Most hosting providers are run by burning fossil fuels but there a few select green web hosts that solely powered by renewable energy or calculate their carbon footprint to ensure they offset any carbon emissions caused by their data center. You can find a list of green hosting companies on the Green Web Foundation website.

Reduce Webpages File Sizes

For a website to be sustainable, webpage size matters a lot. Larger webpage files contribute to the consumption of more server resources, leading to slower sites and an increase in CO2 emissions from web servers.

From an SEO perspective, it also impacts website traffic as well. According to a study conducted by Pingdom, the average bounce rate for pages with load time within 2 seconds is 9%, whereas it is 24% for the pages with 4 seconds load time. High bounce rates can impact your ability to rank higher on the SERPs.

Faster Page Speed

The efficiency of your website depends on the overall loading speed. Slower loading speeds means the usage of more processing power, resulting in a higher carbon footprint.

Loading speeds depend not on the web page file size but also on resources (stylesheets, scripts, media, etc.) loaded to construct the pages.

How Can You Test Your Website's Carbon Footprint?

With the use of free tools like WebsiteCarbon.com and TheGreenWebFoundation.org, you can get an estimate of your website's carbon footprint. While WebsiteCarbon.com gives a detailed view of the carbon footprint, TheGreenWebFoundation.org lets you know if a website is a green hosting provider or not.

How to Build a Website Using Sustainable Web Design?

A sustainable website not only requires fewer resources and power but it will also help you deliver a great user experience and an improved website performance.

Here are a few of the ways that will help you build a website using sustainable design.

Use Web Caching

Web caching refers to downloading shared page elements, such as CSS, JavaScript and images and then storing them in a location that is closer to the user. Data is cached so that the next time the user visits the page they can then retrieve the cached data from the cache location instead of querying the web server again. Caching will improve the performance of your website and reduce data transfers, again lowering your carbon footprint.

Avoid Using High-Resolution Images

These days images make up 60% of the size of an average webpage. Using high-resolution images makes your website look fantastic, but they also contribute to slower load times and more server power consumption. As a result, the website's performance is impacted, causing more harm to the environment.

To avoid this, try to use images on an as and when needed basis and optimise this images before publishing them on your website. Reduce their resolution and image quality as much as possible and compress these images for the web using image optimisation tools such as TinyPNG or ShortPixel.

Build for Mobile Devices

Building responsive web design with a mobile-first strategy in mind means you are optimise the website content to work on both on desktops and laptops as well as smartphones and tablets. As a result, the site will need less processing power, and the overall user experience will also be enhanced.

Make Your Website Easy To Navigate

Not only will a large and difficult-to-navigate website frustrate users and create a poor user experience, but a lot of time and energy will be wasted looking for the right information or page. Websites that are easy to navigate save the user time, and ultimately, enhance their experience.

Use Lazy Loading Of Media And Images

Lazy loading means that images are only loaded when requested by the user. Basically, when you set up lazy loading, everything below the fold on your website will only load if the user scrolls down to the bottom of the page, so no excessive processing power is used.

Delete Any Content, Images Or Videos You Don’t Need

One of the best ways to achieve fast loading speeds and rank highly for SEO is to remove any unnecessary media. You will also reduce your carbon emissions and improve the website’s user experience.

Avoid using CMS platforms like Wordpress, Wix, Weebly

Whilst Content Management Systems (CMS) or website builders are convenient tools, they are not suitable for building sustainable websites, as they usually include lots of unused and wasted code to build websites. This means websites will have to load a considerable amount of unused code when someone visits it, forcing your website to use an unnecessary amount of server resources.

How Do We Build Websites to be Sustainable?

Here at RJM Digital, we build sustainable websites using Gatsby, a web framework for building blazing-fast websites and apps and use Firebase as our green hosting provider.

For websites requiring blogs, we use database-free CMS systems to add and update the content as frequently as you need. These tools enable us to build excellent websites that adhere to a sustainable web design philosophy.