Want to reduce the impact of your website on the planet?

If you're interested in implementing sustainable website practices, then this tool can help.

REDUCE NOW!

What are sustainable websites?

Data. We use it more and more to spread it through the planet. It improves our life in a certain way, but all this data has a darkside. It takes energy and emits carbon. The data also gets saved in physical devices which are not sustainable. If this goes on, the communication tech will emit more carbon by 2025 than any country (except China, India, and the U.S.)

Sustainable websites emit less carbon by lowering the data usage. This websites are having the right ecological balance between the least possible damage to the earth and the usability for future generations.

10 steps to make your website more sustainable

1

Use less JavaScript

JavaScript impacts the website sustainability in two ways: by adding file weight to the web page and by increasing the amount of processing required by the users device. In this way, energy can be wasted.

2

Reduce the file sizes of images

Images can take a lot of data. You can reduce the file size by lowering the resolution or by using file types like JPEG 2000, JPEG XR, and WebP.

3

Don't load invisible elements

Elements which aren't visible shouldn't be loaded. Think about loading or rendering elements when the user interacts with it. Another example is image lazy loading.

4

Delete unused CSS

Control your CSS and delete unused CSS. It's the same principe as using too much JavaScript.

5

Choose your fonts carefully

Fonts can enhance the visual appeal of websites, but they can add file weight to the websites on which they are used. A single font file could be as much as 250kb, and that might only be for the standard weight.

6

Minify your code

Minification, is the process of removing all unnecessary characters from JavaScript or CSS code without altering its functionality. In this way you use less data.

7

Use low energy colors

As you might expect, darker colors require less energy to illuminate, with black being the lowest energy color and white being the most energy intensive. Blue pixels use approximately 25% more energy than red and green pixels.

8

Cache files on the users device

With a service worker, you can cache files on the users device. In that case, the files will be saved so that content and assets don't need to be reloaded on repeat visits.

9

Host your website with Green Hosting

A lot of energy is used by websites in the data centre and in the transmission of data. Green hosting is a sustainable way to host websites. By using green hosting, you can reduce the emitted carbon with 9% (!).

10

Test with the Website Carbon Calculator

Test the sustainability of your website with the Website Carbon Calculator. This will show the amount of carbon that's emitted per page. This number should be as low as possible.

UX sustainable practices

Icon efficiency

Make sure that users can achieve their goal as efficiently as possible. For example, you can make paths shorter.

Icon calm

Technology should require the smallest possible amount of attention. It should inform in a calm way. Less is more.

Icon planet

Make the users aware of the sustainable website in a positive way.

Sources

Made by Jennifer Slagt - 2021