Why you should integrate sustainability into your website lifecycle.

Chapter 3 – Five sustainable web design best practices to implement on your website.

It’s time to raise awareness about website pollution. Discover our first series on sustainable web design. Our team will be taking you from the importance to act now to key best practices to implement on your website!

Looking to get started with sustainable web design? We have listed below five best practices that you could implement on your website.

Those five best practices have been identified as the ones that can have the biggest impact in terms of resources, infrastructures and energy consumption while remaining easy to implement

Before you get started.

To make sure the following best practices fit your website environment, you may want to start by asking yourself a few questions:

  • What is my type of website (ecommerce vs non-ecommerce)?
  • What is my infrastructure (Content Management System vs custom built)?
  • Who is my web hosting provider and/or CDN provider?
  • What are the functionalities on my website?

Let's get to it.

Now that you know your environment better, you start integrating the following five best practices.

Asset compression and resizing is one of the main quick wins that you could implement on your website in order to reduce the page weight and then the carbon emissions of the page. Images, videos, documents… it does not require any specific skills to resize and compress your assets. 

As an example, some websites have images that weigh several tens of megaBytes. Images in the right format and size could (and should) weigh only several dozens or hundreds of kiloBytes.

A lot of websites allow you to resize and compress your assets. iLoveIMG.com or Squoosh.app are some of them (free). It is also recommended to resize images outside of the browser and CMS. It avoids sending images in their original size, wasting bandwidth and CPU power.

Integrating lazy loading is also one of the top priority actions to implement on your website. 

We know that, from SEO and UX studies, only 50% of users go further than the fold line of a web page. It means that only 50% of your users will see the content below the fold line. As a result, loading those assets in the browser is not needed.

Preventing those elements, and especially heavy images, from loading will then save a lot of resources. In some cases, you can easily reduce your page weight by 30% to 40%.

Some files like JavaScript libraries, styling CSS sheets and images are network resource-intensive because they are usually numerous and small in size.

To solve this issue, a CDN, Content Delivery Network, can be used to reduce the distance between the servers where your website is hosting and the end users’ device/browser. This reduces the distance traveled by the data, brings significant gains in bandwidth and reduces the consumption in electricity across the whole network

CDNs can have a significant impact especially if your servers are located in Australia and your end users are in Canada. In such a situation, using a CDN such as Cloudflare or Fastly could help you. reduce the distance thanks to their servers in Canada or in the US.

Choosing a green web hosting provider is a key component of website eco-conception as it will allow you to power your website with renewable energy. Find out how to find one that is (really) green in our previous article.

Caching data is a process that stores multiple copies of data or files in a temporary storage location – or cache – so that they can be accessed faster. 

This means users do not need to download information every time they access a website. We estimated that returning users account for about 30% of website traffic. As a result, it reduces the resources consumed (cycles CPU, memory) and offers good performance to approximately 30% of the users.

Want to go further?

If you have already implemented those five best practices and you want to go further to reduce your website consumption, there are another 140 technical points that you could audit and improve

Reach out to our experts at solutions@footsprint.agency.

Eddy Meunier.

Product Director at footsprint.

Throughout his more than 10 years of experience in environmental sciences and global warming, Juan has worked in both private and public sectors, and more specifically for the Toronto Atmospheric Fund as carbon and co-benefits analyst. He joined footsprint in order to help the industry accelerate the transition towards digital sobriety. His expertise in carbon measurement and GHG protocols will contribute to develop and strengthen industry frameworks.

Spread the word

you might also be interested in:

Learn more about climate emergency & digital pollution as our environmental expert Juan Sotés answers 8 common questions on the topic.

Explore the 2nd chapter of our series on Sustainable Web Design to uncover the core guidelines that shape the concept of website eco-conception.

How is a click converted into CO2 emissions? Our experts tell what happens when we surf and why we need to fix it.