Designing sustainable websites

Here's what you need to consider in order to minimise your impact on environment.

1. Hosting

Host your website on green energy. Green hosting providers run their datacenters using renewable sources of energy.

2. Search engine optimisation (SEO)

SEO is economically sustainable because it helps businesses grow: long-term and in a cost-efficient way. It is socially sustainable because it is about helping people find what they are looking for. And it is environmentally sustainable because it reduces the users need to visit (multiple) other, potentially less eco-friendly websites.

3. Images

Images needs to be optimized or else they contribute significantly to the overall website size and a a result cost significant power to host and download. Its responsible for a notable share of website GHG emissions.

i) Use less images

Before you take the effort of optimizing your images, double-check if you could remove a few images instead. For example, there could be decorative images your sustainable website doesn't really need, or redundant images that add no value to your website.

ii) Lower image resolution and quality

Give online compression tools a try. For example, tinypng.com is a free online service for WebP, PNG and JPEG compression. Alternatively, if you own Photoshop, you can choose the option “Export for web” when saving images.

From a socially sustainable point of view, it is recommended to input alt texts. Alt texts are image descriptions that appear when the user can't see the image. For example, a visually impaired user may have a screen reader that reads out the alt text. Or the browser will display the alt text if the internet connection does not suffice to load the image.

4. Video

Host your website on green energy. Green hosting providers run their datacenters using renewable sources of energy.

5. Fonts

Web fonts do enhance the visual appeal of websites but also adds a significant weight to the websites on which they are used. To help reduce the impact on custom web fonts, designers should consider the following options:

i) Use system fonts where possible

They are not always as pretty, but fonts such as Arial and Times New Roman can be used without loading any font files at all as they are already on the users device.

ii) Use less font variations

You may feel the need to use custom web fonts, but try to be frugal in the number of typefaces you choose and in the number of different weights that you use for each typeface.

iii) Optimize fonts

Stick to modern web font file formats like WOFF and WOFF2, which use higher compression methods compared to TTF, OFT and SVG file formats.

6. Write clean code

Developers have a lot of influence over the energy efficiency of the websites that they create and maintain. As a developer always try your best to keep the code clean and simple, avoid duplication and write efficient queries.

7. Less Javascript

JS has impact on the efficiency of your website. It adds file weight to the webpage and further increases the amount of processing required by the users device.

Functionality driven by JS is processed on the users computer or phone and increases CPU usage, which in turn increases the energy consumption of the device. Hear those cooling fans on your laptop whirring? That's energy being wasted.

Try to look for ways to achieve front end interactions, functionality and animations using more efficient technologies like CSS, or at least use JS efficiently.

8. Caching

Progressive Web App technology enables websites to cache files on the users device, meaning that content and assets do not need to be reloaded on repeat visits. This can significantly reduce the amount of data loaded by repeat visitors, especially on mobile devices for which data transfer is more energy intensive than wired connections.

Like most things, it can also help improve load times and user experience with no real downsides.

9. CDN (Content Delivery Network)

CDNs exist to narrow the geographical distance between server and client. This can speed up the loading time of your website and save power as the user reaches their destination more quickly.

Content Credits

  • Wholegrain digital

  • Svaerm