6 best practices for sustainable web design

For the web to run smoothly, it needs to be collected, processed, and stored in data centres worldwide. These data centres are supercomputers that require a lot of cooling energy and mostly don't run on renewable energy. If the internet were a machine, it would be the most giant coal-driven machine in the world, producing 3.8% of global carbon emissions. Collectively the web accounts for 416.2TWh use of electricity per year. This usage is more than the United Kingdom uses, for example.

The climate impact of each website is the sum of the energy needed for the data traffic from and to your server plus the costs for the hardware to make this data traffic possible.

Every time someone visits a page, an average of 1,76g CO2 is emitted. With the expected growth of our online presence and the number of internet users globally, we can only expect a dramatic increase in the climate impact of the internet.

So, what solutions do we have?

Creating a sustainable internet

There are several areas where developers and web designers can mitigate the impact of websites. With some easy alterations, we can make significant improvements.

Below you'll find a list of best practices for sustainable web design;

1 Green Servers

The data is transferred from your server. When that server is green, you're eliminating a lot of coal CO2 emissions that can be accounted to your website. Whether you have a green server makes up for about 10% of your website's emissions. An easy winner! Check out the research done by the Green Web Foundation.

2 Reduce your image sizes

Images can cause up to a whopping 75% of the website's weight. In addition, large images use a lot of data and slow down your website. Therefore, improving the images on your website will positively impact the climate and the customers on your website.

Compression tools make your images smaller without losing the needed quality for your website.

Another good option is using vectors (SVG) instead of images whenever possible. SVGs are much smaller in size than, for example, PNGs. Therefore they are less likely to slow down your website. In addition, because an SVG uses mathematical algorithms, you can scale to any size.

3 Do you really need that video?

Video is a great and popular way to engage people with your content. The downfall is that these awesome videos and animations also use up a lot of energy. Video is an information-heavy operation; thousands of pixels that change several times per second must pass through the servers to reach your device. Currently (2022), more than 80% of global consumer traffic is spent on internet video traffic.

Another argument for a good consideration of the necessity of videos: you also don't want to burn down the data plan of a mobile visitor.

Start with asking yourself, do I really need that video? Keep your video as short as possible and turn off autoplay, for example.

4 Simplify the user interface (UI)

Consumers seek engaging and user-friendly websites. A good user interface makes sure a website is user-friendly. Let's take this example of you visiting a new supermarket. How much time do you spend circling, finding everything you need, cause all the things you are looking for are at a different place than usually? This wondering around is what happens when a website visitor does not know immediately where to find the correct information. You also lose valuable leads and revenue with the irritation that belongs to that searching.

For a deeper dive into the UI of websites, please check this article by Careerfoundry for more tips and some good examples of great UI.

5 Measure the CO2 emissions of your website

Knowledge is power. And knowing how much the implemented improvements yielded is vital. Unfortunately, until now, it has been almost impossible to measure the CO2 of your website. It is hard to assign valuable time to this subject without knowing what your actual emissions are and what possible improvements mean. Luckily Zifera made your life a lot easier with a clever tool (there's also a free version!) that measures the real-time CO2 emissions of all your website pages. Want to know more about how that exact CO2 is calculated? Check out this earlier blog about the CO2 calculations of websites.

6 Compensate the CO2 emissions

As a final step, you can compensate for the CO2 emissions your website emitted. There are many companies with whom you can partner up. One tip; make sure you compensate via a program that supports your values. Our partner for CO2 compensation is Fair Climate Fund. With their golden standard CO2 compensation, we know our compensation fees end up in the hands that need it the most.

Get started!

With the growth of our online presence, the need for sustainable web design is growing significantly. Hopefully, this list serves as an inspiration to get started. All best practices listed will better your website. Just get started with one topic at a time.

If you are not in the position to incorporate sustainable web design in your organization? We also know a thing or two about website development and can help your organization with a climate-friendly website.