What exactly is sustainable web design? How can you find out what the environmental impact of your site is? What can you do to make your site more sustainable and how will any improvements benefit your customers? Find answers to all these questions in this article and discover some useful tools for sustainable web design.
Some facts about the energy-guzzling internet
The energy costs of our digital world
According to Website Carbon Calculator the internet consumes 416.2 terawatt-hours (TWh) every year. That is about the same amount of energy consumed in Germany, Europe's most populous country. In fact, if the internet were a country, it would have sixth largest electricity consumption in the world.
But how is such high energy consumption even possible? Wasn't the point of going digital to protect the environment? The reality is that digital doesn't always mean green. Everything needs energy to function, from server farms to data centers to user devices.
An average website produces an estimated 1.76 grams of CO2. With 10,000 visitors a month, this amounts to 211 kg CO2 per year - for one single website!
Have you ever considered how much energy is needed for your website? It's certainly a lot more than you'd expect! Every request your website sends is received, processed, returned and, potentially, saved somewhere. That's a lot of processes that all require energy.
Our websites need to be greener - but how?
Many hosting providers have understood the internet's environmental impact and now rely on renewable energies. One thing is undeniable, web hosting devours energy and causes considerable CO2 emissions. Sustainability and climate protection aren't empty buzzwords at RAIDBOXES, they form an important part of our corporate culture.
Green Hosting for WordPress at RAIDBOXES
If you run a website or an online shop, you consume a lot of resources. RAIDBOXES is taking countermeasures with climate positive hosting for WordPress and WooCommerce.
You can easily find out how "green" your website is using this tool from The Green Web Foundation. If your site doesn't fare well in the test, it might be time to consider moving to a different website hosting provider. You can compare different offerings here .
The right design can prevent unnecessary energy consumption. For example, if your website doesn't load extraneous content in the first place. So how can you combine design and sustainability to save resources?
With a "mobile-first" approach you optimize your content for smartphones right from the start. Optimized sites, for example, don't load oversized media on mobile devices. They're programmed in such a way that desktop versions don't need to be overwritten and are instead directly optimized for smaller user devices.
We looked at the benefits of well-planned usability in a previous article. A good user experience helps you and your customers make your website more sustainable. By minimizing unwanted user detours, for example. Ideally, only the pages the user wants to visit should be loaded. If you reduce unwanted clicks, you send fewer data requests and therefore use less energy.
For increased sustainability, this is another area you can work on while planning your website. In general, the fewer pages that need to be loaded, the fewer data requests are sent. This not only makes your site easier to navigate, it also makes sense from an ecological point of view to summarize the content and reduce the number of pages.
We can also be more conscious in our use of media such as pictures, animations, and videos and apply them in a more targeted way. Do all the pictures, videos, icons, and animations you've planned for your site really bring added value? Or could you do without some of them?
Page speed has long been a staple of web design. But what does a good page speed have to do with protecting the environment? A fast page is the result of not having to load too much data!
Faster websites are better for the environment
It's important to properly optimize your website or your online shop. This is your personal contribution to protecting the environment. Find out more about this area in our e-book Page Speed & Performance.
There are a variety of different factors that can affect page speed. Many tools will both analyze your page speed and also recommend solutions to increase performance.
For this article, I've put my own site through its paces. As you'll see from my tests, the tools may give you entirely opposite results. That's why you should think about what factors are important to you first and what you want to achieve with the tests.
Ecograder was created specifically to test the sustainability of websites. For me, Ecograder is the most user-friendly tool available. The information the tool provides is concise and easy to understand and the tips for improving the page speed are helpful.
The system of Website Carbon Calculator also mainly tests for sustainability. The way the results are presented is visually appealing. The comparisons to less abstract units of measurement make it easier to understand the environmental impact of your site.
On the whole, I find the Website Carbon service informative but I miss the customized details I know from Google Tools and Ecograder. Moreover, I'm not satisfied with the comparison to other tested websites as a measure for professional projects and the arguments offered by Website Carbon.
For developers in particular, Webpagetest.org is an excellent tool as it goes into great detail. You can use different presets to test from "Simple Testing" all the way up to "Advanced Settings". These allow you to simultaneously exclude different components of your websites, add them via code snippet, and deliver a Google Lighthouse Report. You can also compare two websites at the same time - the possibilities with this tool are nearly endless. The results are broken down technically into the smallest detail. This tool is thus used for advanced testing while Google and others are more general in their analysis.
Images and other media
I mentioned before about how you can reconsider the content you're offering. Now it's all about integrating the pictures in an optimal way.
Tinypng is great for compressing images without any apparent loss of quality. You can achieve the same result with Photoshop and the "Export for web" setting. If you've already integrated your pictures into a CMS, e.g. WordPress, you can still optimize the resolution with a plugin like Smush.
You can use CSS sprites if you're working with a lot of images and icons. They work in a similar way to sprites in computer game development. Images are combined on a sprite sheet. CSS is then used to determine under which coordinates each image is located. Find out more about this topic here.
Sprite sheets are multiple images/icons that are merged into a single file. Designers often group their images by theme. Based on the corresponding x- and y-coordinates, the sheets are divided and integrated accordingly. In this way, one single document is loaded which displays different visual components.
Lazy loading is another way to optimally load images. With this function, images are only loaded when the user needs them. There are countless WordPress plugins available for lazy loading in both free and paid versions.
It's natural to question whether any company's environmental approach is authentic: is a sustainable internet achievable? How "green" can WordPress actually be? The article WordPress and sustainability offers an up-to-date discussion of the issues within the WordPress community.
What contribution can we make to sustainable and efficient web design? What are the most important levers in everyday design to save resources? The best tips: Have as few plugins as possible and use a lightweight theme.
Average WordPress websites come to about 600 KB. By choosing the right Themes and taking into account the previously explained approach, you can save 50 percent or more. A small selection of tested Themes can be found here. here.
If your website is already live and it's not possible to change your theme right now, you can still improve WordPress performance using these 10 levers.
Get your customer on board with sustainable web design
The following advantages should be enough to convince your customers to accept sustainable web design:
- Improved usability and user experience
- Clear and easy-to-understand designs
- Better SEO rankings
- Shorter loading times
- Mobile-optimized sites
If you still need more arguments, various foundations also offer so-called badges which you can integrate into your customer's site.
The following badge can be incorporated when you choose a website host that relies on certified green electricity:
- https://www.thegreenwebfoundation.org/ (via code)
- https://wordpress.org/plugins/the-green-web-widget/ (via plugin)
Even WebsiteCarbon offers a site badge to show your content is sustainable.
Conclusion and further sources
During my research for this topic, I stumbled across countless statistics. Sending an email, for example, has the same effect on our environment as using a plastic bag. Physical books are often more environmentally friendly than e-books. Buying music albums places less of a drain on our resources than streaming them. The list goes on and on. Above all, these statistics shake up our idea that digital somehow always equals "green".
As web designers and developers, we naturally play a major role in how the web will develop in the future. But we can also start with changing our own behavior right now and using the internet more consciously.
Find out which of apps you use are green and which need urgent attention: The tool ClickClean from Greenpeace gives you an interesting overview of your chosen applications and their ecological value.
Impulses for a greener future:
- Jack Lennox has built a WordPress theme that's only 7 kB
- In his blog, DeathToBullshit Brad Frost sends out a rallying cry for us all to rid the world of bullshit.
- Heydon Pickering gives coding tips on how to reduce the size of your site
With all this talk of the negative environmental impact, we shouldn't lose sight of the positive effects the internet has. Video conferences, for example, mean we have to travel less. Especially over the last few months, everyone has seen how we can use transport less and thus reduce our carbon footprint.
It's also been possible to reduce office spaces as more people have had to work from home. Furthermore, the internet allows us to join forces with others: we can use sharing platforms and book a homestay through portals like AirBnB, which are more environmentally friendly than hotels.
The internet also makes it much easier to disseminate information on sustainability and protecting the environment. We can find and purchase eco-friendly products to which we wouldn't otherwise have had access to. These are all beneficial effects of digitalization.
If you want to delve deeper into the topic, I suggest taking a look at the website sustainablewebdesign.org as a starting point. The most important points are explained in clear, well-structured paragraphs and technical solutions are recommended.