10 ways to make your website more environmentally friendly in 2021

Sustainability is a big topic in 2021, and one of the reasons for this is, that we are seeing scary climate changes. The internet is one of the polluters and the way that we can make this problem smaller is by making the internet sustainable. To make the internet sustainable, everyone needs to pitch in and change the way they create websites.

In this article, you will find 10 ways you can make your website more sustainable. These 10 ways will make a big impact on your sustainability score and help to lower the carbon dioxide impact the internet has.

1# Use a green web hosting company

One of the most important ways you can make your website more sustainable is by hosting it with a hosting company running on 100% renewable energy. There are lots of hosting providers out there, but sadly many of them are running on gray energy coming from sources such as coal and fossil fuels.

If you want to know more about sustainable web hosting and where you can find one, please click this link to read more.

2# Optimize images on your website and use WebP

One of the great sinners on the internet today is images. One standard-sized image takes up around the same size as 150.000 words would. As you can imagine, that's a lot and especially when you have 5 or more images on a single page.

Luckily there is a way you can fix this problem and it is called WebP. WebP is an image format that has been around for quite a while and it is starting to gain more support in the major browsers. An image saved as WebP will generally save 23-28% file size without any compression and if you compress you can save even more without losing any visible quality.

Optimizing your images is easy and fast, and if you would like to know how you can fix this quickly, please click this link to read our tutorial.

3# Remove unnecessary animations from your website

We know it, animations are cool and it is a trend to use all of these cool animations on your website, but the fact is that they pollute more than you know. A general rule is to never use any unnecessary animations on your website, and we recommend going through all of them and be critical about which ones serve a purpose and which are just fillers.

Animations are very powerful and used the right way they can improve a user experience drastically. But if you are overdoing it you can potentially damage the user experience and cause people to dislike your website.

4# Use dark-mode/black-mode as standard on your website

As of 2018, there were more than 1 billion smartphones around the world using OLED displays. OLED displays are specifically great at showing dark/black scenes because they turn off LEDs that aren't needed. Therefore when you use a dark/black mode most of the screen will be turned off and the visitors will save significant battery life.

If you are interested in implementing an automatically switching dark and light mode, we urge you to read our article about the CSS prefers-color-scheme media query.

5# Use a lightweight HTTP server or reverse proxy for your website

It is not only in the front end you can make your website more sustainable, but also the backend has an impact. We recommend that you use a lightweight HTTP server to serve your website or a lightweight reverse proxy.

There are lots of HTTP servers and reverse proxies out there, but many of them are bloated and comes with tons of features that you will never use. Instead of choosing one of these HTTP servers or reverse proxies we recommend using a lightweight one that only comes with the skeleton. If you start by using a skeleton you can always add features when they are needed.

If you would like to know which HTTP servers and reverse proxies you can use, please take a look at our article specifically giving you 5 of the most lightweight on the market.

6# Convert fonts on your website to WOFF or WOFF2

On every website, you will find tons of words and everyone wants to use some of the cool-looking fonts, but without checking the font extension it can become very expensive on your sustainability score.

Formats such as OTF and TTF usually have a file size between 250 and 400KB and that is considered a lot. If you convert these fonts to WOFF or WOFF2 you will have a file size of approximately 30-40KB instead and instantly save 8-10 times the file size.

Converting your fonts is both easy and quick. In this tutorial, we are explaining how you can quickly convert your fonts and become more sustainable.

7# Write custom CSS styling for your website

There is a lot of help out there when it comes to writing CSS quickly, but using these solutions comes with a price. When adding Bootstrap, Material UI, and Semantic UI to your website you get to write your elements quickly, but you import lots of unused stuff which is also called bloat that you will never use.

When you have lots of unused CSS you force the visitor to download data that is not necessary to display your website. All of this unnecessary data is polluting because both the server serving the website, the routers in between and the device visiting the website are forced to download and process data that is not needed.

The best way to use CSS on your website is to go the long way and write 100% custom styling for all of your elements. This will ensure that you don't have unused code and you will also realize that customizing your elements is easier when you know them in and out.

8# Convert videos on your website to AV1/AVIF

Videos are very popular, and it is the preferred source of entertainment for most people, but hosting your videos in the wrong format can cost lots of points on your sustainability scale. Videos are very large files by nature, and today it is not uncommon to use resolutions in 4K or higher. But hosting videos in a 4K resolution can be costly for both you and your visitors.

To make your website a bit more sustainable even though you host videos, you can convert them into the AV1 or also called AVIF format. This format allows great compression without losing any quality so that your visitors can watch crispy clean videos without destroying the environment or your wallet.

You can read more about the AV1/AVIF format in this article, where we talk about the benefits of converting your videos.

9# Remove unnecessary 3rd party scripts from your website

Lots of websites on the internet have tons of 3rd party scripts that are either unnecessary or not even used. Sometimes we see multiple analytics software and other times its several icon libraries, but what they all have in common is that most of them are unnecessary.

Every time you request a 3rd party script you cause another webserver to work. A working web server is a polluting web server and therefore if you unnecessarily ask for data you don't need you are causing pollution unnecessarily. Therefore we recommend going through your website to remove unnecessary scripts that either aren't needed or are unused.

10# Host files on your website instead of a CDN

This one is a bit more tricky because it requires you to know where your customers/visitors are located. But if you are aware of this and your visitor's location is relatively near the location of your server, then you can ditch the CDN's and host certain files on your website instead.

Knowing when to use a CDN and when to host files yourself is a powerful tool and when used correctly it can make your website more sustainable. A CDN (Content Delivery Network) is very useful if you have to serve content to visitors from all over the world, but it is unnecessary if your customers are based around the location of your server.

Wrapping up

In this article, we have given you 10 powerful ways that will instantly make your website more sustainable. If you just follow a few of these you will be making a difference and if you follow them all you are an inspiration to other website owners out there!

We hope that we gave you some ideas on how you can make your website more sustainable, and we hope that we inspired you to make a difference. The internet will never be 100% sustainable, but together we can make it less polluting.

Author

Michael Andersen

I am a self-taught and highly passionate web developer currently living in Sweden, where I use my skills to make the internet a better place through ethical and sustainable web design.