Blub, hiss, pfff! The internet is like a big pot that a mad scientist brews magic potion in. The ingredients: a cup of human knowledge, a pinch of cat videos and an ocean of electricity consumption. With sustainable web design, we can change the recipe – and reduce the required electricity!
Okay. So what’s ungreen about the internet?
Every year, the internet consumes more energy than ever before. Unfortunately, that’s below our radar. What happens behind the internet socket in the wall is as interesting to most people as a slice of toast.
One thing can’t be denied. Every click on the net consumes electricity – at the end device, telecom network, and data center. If the internet were a country, its annual emissions would equal Germany’s. And they just keep rising.
For digital professionals, this is a wake-up call to take responsibility for the environmental impact of our services. It is a wake-up call to design a web that is good for people and the planet. We call this approach sustainable web design, resulting in low-carbon websites.
Sustainable web design: 7 Ingredients
How much energy a website consumes is mainly determined by the size of the site. That is exactly why sustainable websites are one thing above all: small. Where less data is transmitted, less electricity is needed.
So, what adjustments can we make to reduce the page size and/or improve sustainability? Here are a few approaches
- Use green electricity
The carbon intensity tells us how sustainably our electricity is sourced. It indicates how much CO2 is produced when the energy is generated. Wind and solar energy do well, fossil fuels don’t. If you host your website with green hosters like greensta or Biohost, you are already well on the way to the green side of the internet. - Make it easy for users
A well-thought-out user journey helps users find the information they are looking for quickly and easily. It’s important to streamline the information architecture and avoid unnecessary baggage. Even a reduction from 2 to 3 visited pages per visit has a positive environmental effect. - Compress images, avoid videos
Images and videos are the energy guzzlers. Avoid video whenever it’s possible. Use images if they truly add value and are compressed to the maximum. Â
Example. Let’s assume an uncompressed JPG file is 960 KB in size. With low compression and no visible quality loss, it weighs in at 881 KB. As a WebP file, it’s only 200 KB. That’s a reduction of 79%! If we tolerate some minor quality loss, we can probably compress the WebP to below 50 KB. - Optimize typography
Many font families contain styles ranging from thin to bold. In addition, there are often letters that aren’t needed for your projects – such as Cyrillic or Greek. If you subset the fonts (= delete foreign letters) and compress them as WOFF2, you can save up to 90% of the original file size. - Page budgeting
With page budgeting, we set a maximum size for a particular page. Concept and design take this size as a maximum value that must not be exceeded. The result should be at least as good (= small) as the most efficient page in our industry sector. Ideally even smaller. - Long live vectors!
Vector-based graphics are wonderful ways to compress big ideas into small files. Most vector files on the web are SVGs – and these consist of nothing more than textual information about nodes and coordinates. Vectors go with sustainable web design like fries go with ketchup. - Dark Mode against power hunger
Dark colors consume less energy on OLED displays than bright ones. At low screen brightness (50%) the difference is small (about 5%). At maximum screen brightness, however, dark mode saves up to 50% (!) battery. Sustainable web design also considers the energy consumed by end devices.Â
Sustainable pages perform better
Sustainable websites improve the user experience! How? By drastically reducing load times through small page weights. They can be opened and used smoothly even on slow internet connections. Even a few seconds less load time will drastically improve the conversion rates.
Fast pages also rank better on Google. Pages that are well-thought-out and neatly structured score better on the page rank. In other words: sustainable pages are the Usain Bolts of websites.
What now?
The first step is to analyze your own website. This can be done with free tools like www.websitecarbon.com. Just enter your URL and check the results.
We have developed a framework for improving the sustainability of websites that use WordPress. If you’re looking to reduce your website’s emissions or develop a sustainable website from scratch, feel free to reach out to info@jut-so.de <3
