SustainableWWW Logo
Blog post image

5 design principles that instantly make your website more sustainable.

If the internet was a country it would be the 7th most polluting in the world, but we can change that. With just a few changes you can make your website more sustainable and thereby help to fight the still rising pollution. This article will tell you exactly what you can do to make your website more sustainable.

1# Resize images and make use of the WebP format.

One of the big sinners when it comes to websites are images and videos. An image that hasn’t been optimized for the internet can easily be 1 to 5MB in file size, but if resized correctly and saved in a file format like WebP, then those same images can be as little as 30 to 40KB.

As you see, this is a big difference and it will not only improve the amount of data being downloaded every time you have a visitor, it will also improve the overall loading time since the amount of data needed is smaller. With the internet speed, we have today, it doesn’t make a big difference if an image is 40KB or 500KB, but in the eyes of pollution, the difference is big.

2# Simplify your design.

As the internet becomes more and more popular so do the designs that we are using. This means our websites require more and more to run and this has an impact on the overall CO2 emission caused by the internet.

You have probably tried visiting a website and shortly after entering the page, you hear your fans start running (At least if you are using a Macbook). This means the website itself requires so much to run that your device is running hot just from showing it. Examples like these could be which is built on three.js.

By simplifying your design you can help lowering the CO2 emission since the devices viewing your website doesn’t require as much as if you were going all in and using all the power-hungry elements and packages you could find. If built correctly a simple design can make just as big an impact as one like the above-mentioned example.

3# Custom CSS styling.

CSS styling is nearly impossible to get around unless you are planning to host a raw HTML page, but there are many ways we can use CSS without it becoming a file size burden to the visitor. One of the ways we can minimize this is by customizing all styling instead of using Bootstrap and Semantic UI. By customizing you can write reusable styling, minimize it with a compiler and only write the styling that is necessary for your website. Writing custom styling is also making your website unique compared to others which often is an advantage.

4# Use Vanilla JavaScript.

It has been popular for a long time and is still used today, but maybe it is time to put JQuery and others on the shelf and start using plain Vanilla JavaScript instead. When we import such libraries we are downloading more data than is necessary and on top of that our browser has to read and understand more code than what is necessary for the website to show.

Writing JavaScript can take time and that is one of the reasons we started using JQuery for example. We were able to write more code in an easier way and in a shorter time, but it costs and the one paying is the overall CO2 emission both from the servers running the website and the visitors viewing it.

5# Implement a dark theme.

Light and dark theme is getting very popular and more websites are implementing it so that visitors can choose for themselves how they want the page to look like. Using a dark theme has a positive impact both on the user and on the CO2 emission since there are over a billion mobile devices worldwide using OLED displays (2018 statistics). OLED displays only use power on the LEDs that require light or color, therefore if you have a black screen with white text, then most of the screen will be turned off.

If you want to further make a difference, you can choose the dark theme as the main theme and instead let the user choose the light theme. Many visitors won't care and therefore won't change the theme, so by choosing a dark theme first you can bring down your website's CO2 emission.