What exactly does "sustainable web design" mean? How do you know how ecological your website is? How can you make your website more sustainable and what are the benefits for your customers? I have compiled the answers to these questions and some important tools in this article.

Facts about the power-hungry Internet

But how can that actually be? Didn't we go digital specifically to protect our environment? The reality here is somewhat different: Unfortunately, digital doesn't automatically mean "green". From server farms to data centers to the actual end device - everything consumes energy in order to function.

According to estimates, an average website produces 1.76 grams of CO₂. With 10,000 visitors per month, that's 211 kg of CO₂ per year - for a single page! 

Have you ever thought about how many resources are needed for your website? Definitely more than you think! Every request that your website sends is received, processed, sent back and, if necessary, saved at any point. This adds up to a lot.

Our websites need to become greener

1. WordPress Hosting and Sustainable Web Design

Many WordPress hosting providers are now joining in and focusing on renewable energies. Because one thing is clear: WordPress hosting consumes energy and causes considerable CO₂ emissions. At Raidboxes, sustainability and climate protection are not just empty phrases, but an integral part of our corporate culture.

You can easily determine whether your website is "green" with the help of this tool from The Green Web Foundation. If the result is negative, it is advisable to change your WordPress hosting provider. You can see a comparison here. 

2. design and sustainable web design

The right design can prevent unnecessary energy consumption, for example if your website does not load unnecessary and unwanted content in the first place. How can you combine design and sustainability and conserve resources?

Mobile First

With Mobile First, you optimize your content for use on smartphones right from the start. Optimized pages do not have to load oversized media on mobile devices. They are programmed in such a way that desktop styles do not have to be overwritten, but are designed directly for the smallest device.

User Experience

I have already told you about the benefits of well-planned usability. A well-functioning user experience helps you and your customers to make your website more sustainable. You minimize unwanted detours for your users. Ideally, only the pages that the user actually wants to visit are loaded. If you reduce unwanted clicks, you send fewer data requests and therefore use less energy.

Page count

Here, too, you can work on your sustainability when planning the website. As a general rule, the fewer pages that need to be loaded, the fewer data requests are sent. Apart from making your site easier to navigate, it also makes ecological sense to summarize the content and reduce the number of pages.

We should use media such as images, any animations and videos more consciously and in a more targeted way. Do all the images, videos, icons and animations you have planned for your site really add value? Or can you do without some of them?

3. development and sustainable web design

Pagespeed

Pagespeed has long been a part of the little 1×1 of web design. Why is it also good for environmental protection to pay attention to good performance? A page that loads faster is the result of less data that needs to be loaded!

There can be various reasons why your pagespeed is slow. In addition to the analysis, many tools also provide you with solutions for better performance.

For this article, I put my own site through its paces. As you will see from my self-test, an analysis can even turn out completely the opposite - depending on which application is used for testing. You should therefore consider what goals you are pursuing with the tests.

Here is a comparison of the Chrome Developer Tool Google Lighthouse and Google PageSpeed Insights. Both tools are useful reference points for on-page optimization.

Ecograder was created specifically to test the sustainability of websites. I personally find Ecograder to be the most user-friendly. The information is concise and easy to understand, and the tips for improving pagespeed are helpful.

The Carbon Calculator website also mainly tests for sustainability. I find the visual presentation of the results positive. The comparisons with less abstract units of measurement make it easier to become a little more aware of the extent of one's work.

Although I find the Website Carbon service to be generally informative, I miss the individually tailored details that I am familiar with from Google Tools and Ecograder. In addition, I find the comparison with other tested websites inadequate as a measure for professional projects and arguments.

Webpagetest is an excellent tool for developers in particular, as it goes into great detail. You can test from various presets here. From "Simple Testing" to "Advanced Settings", which allow you to exclude various components of your website, or more precisely to add them via a code snippet, and at the same time deliver a Google Lighthouse report, through to comparative testing of two websites, "everything" is possible here. The results are also broken down technically down to the smallest detail. This website is therefore used for advanced testing, while Google and co. carry out their analysis in a more general way.

Images and other media

I have already mentioned rethinking the content on offer. Now it's a matter of integrating the images in the best possible way. 

Tinypng works wonderfully for compressing images - and usually without any noticeable loss of quality. You can achieve the same result with Photoshop and the "Export for web" setting. If you have already integrated your images into a CMS, such as WordPress, you can subsequently optimize the resolution with a plugin such as Smush.

If you have a lot of images or icons, you can use CSS sprites. They work in a similar way to sprites in computer game development. Here, images are integrated once using a sprite sheet. CSS is then used to determine the coordinates under which each image is located. You can find out more about this topic here.

Sprite sheets are several images/icons that are combined in a single file. Designers often group their images thematically. Based on the corresponding x and y coordinates, the sheets are divided and integrated accordingly. In this way, a single document is loaded that displays various visual components.

Lazy Load is another variant for the optimal loading of images. Here, images are loaded when the visitor needs them. There are now countless (free and paid) plugins for WordPress.

WordPress

Of course, we also ask ourselves when companies' ecological approaches are authentic: Does a sustainable internet even exist? How "green" can WordPress really be? In the article WordPress and sustainability, you will find the current status of the discussion in the German-speaking WP community.

What contribution can we make to sustainable, efficient web design? What are the most important levers in everyday design to save resources? A few plugins and a lightweight theme are the top tips here.

The average WordPress website is around 600 KB. By choosing the right theme and following the approach explained above, you can save 50 percent or more. You can find a small selection of tested themes here.

If your website is already up and running and changing a theme is out of the question for the time being, you can improve your WordPress performance with the help of these 10 tweaks.

How to convince others to join in

 The following keywords should actually be enough to convince your customers of sustainable web design: 

• Improved usability and user experience,
• clear and easy-to-understand designs, 
• better SEO rankings, 
• shorter loading time and 
• Mobile-optimized pages. 

If you still need more arguments, various foundations also offer so-called badges that you can integrate on your customers' pages.

When choosing a WordPress hosting provider that uses sustainable, certified green electricity, this badge may be included:

• https://www.thegreenwebfoundation.org/ (per code)
• https://wordpress.org/plugins/the-green-web-widget/ (via plugin)

For example, WebsiteCarbon also offers a badge that you can integrate on your pages to show that your content is sustainable and ecological.

Conclusion on Sustainable Web Design

During my research on this topic, I stumbled across countless statistics. Sending an email has the same impact on our environment as using a plastic bag. Books are often more environmentally friendly than e-books. Buying music albums is better for our resources than streaming them. The list is endless. Above all, these statistics shake up our previous general understanding that digital also means "green".

Apart from the fact that we as web designers and developers naturally play a major role in how the web develops in the future, we can also start with ourselves and use the Internet a little more consciously.

Find out which of your apps are green and which urgently need to be cleaned: With the ClickClean tool from Greenpeace, you can get an interesting overview of your (favorite) apps and find out how ecologically valuable they are.

Contributions that create more awareness for a greener future: 

• Jack Lenox has built a WordPress theme that weighs just 7 KB. 
• Brad Frost encourages us on his blog DeathToBullshit with a humorous twist to do without it. 
• Heydon Pickering gives coding tips on how to make your site leaner.

We should also not forget the positive effects that the internet has on our environment. For example, using video conferencing saves us having to travel. Over the last few months in particular, everyone should have become aware of how we can use the Internet to avoid using transportation and thus reduce CO2 emissions. 

We also have office space that can be downsized thanks to working from home. The internet also offers us the opportunity to join forces with others: For example, we can use car-sharing platforms and book "homestays" such as AirBnB, which are more environmentally friendly than hotels.

The internet also makes it much easier to disseminate information about sustainability and environmental protection. Offering and purchasing eco-friendly products (to which we might otherwise have less access) are of course also among the positive effects of the digital industry - to name just a few.

If you would like to delve deeper into the topic, I recommend the website sustainablewebdesign.org as a starting point. The most important points are explained here in clear paragraphs and possible technical solutions for implementing them are offered.