What is Sustainable Web Design and How to Achieve It

“I really want an electric car, but I simply can't afford it” a friend of mine said remorsefully a few months back. He and I were discussing climate change and the changes we both made in our habits.

I chuckled.

“You do know that they also consume energy, and if you don't charge your electric car through an outlet that uses renewable energy, you're still polluting quite a lot, right?"

He said he knew that, but he still felt that he and his 20-year-old VW  were a slap in the face of all his efforts to lead a more sustainable, eco-friendly life.



“How about this - I can tell you how to cut your carbon emissions through your digital world” I suggested. He gave me a baffled look.  I then told him that according to some stats, the average internet user generates about the same amount of CO2 as they would by travelling 1000km with a regular car and there are various activities that contribute.

He fought this idea for almost ten minutes until I pulled out the data on my phone. Honestly, I didn't blame him as I remember I had the same reaction the day I realised that each web page I visit comes with a hidden cost - that of the energy used to keep it up.

Internet's dirty secret, so to speak. 

According to Website Carbon Calculator, the average website produces approximately 0.5 grams of CO2 per page view, so for a website with 100 000 monthly views, that's 500kg per year. Bear in mind that's per website!

For reference, an average car emits 1200kg of CO2 per 1000km, so you can see how Internet has a very palpable effect on climate change and global warming due to its immense carbon footprint.

So the question stands: What can you do as a website owner to lessen the impact of your site on our environment?

Sustainable web design, of course.

At Kualo, we're so intrinsically intertwined with the concept of sustainability that we felt it would be only natural to explore this topic. In this article, we'll learn:

• What is sustainable web design?
• Why do we need sustainable web design?
• What are the benefits of sustainable web design?
• Sustainable web design best practices

 

We want to provide you with the exact blueprints that will help you minimise your website's carbon footprint, so without further ado, let's dive in!

What is sustainable web design?

“Sustainable web design is an approach to designing web services that put people and the planet first. It delivers digital products and services that respect the principles of the Sustainable Web Manifesto: clean, efficient, open, honest, regenerative, and resilient.”



This is what we can read on the Sustainable Web Design Manifesto, with the website explaining in brief what this credo would encompass. Let’s go quickly over the 6 points:

1. Clean: services used by your website should be powered by renewable energy sources, meaning your web hosting should be green-powered.
2. Efficient: the services you provide should be fully optimised to use the least possible amount of energy (and materials)
3. Open: the services you provide should be accessible to everybody and should allow users to have full control of their data
4. Honest: your website will not provide misleading content and/or try to misguide users through web design
5. Regenerative: your services will participate in an economy that is oriented to support communities and the environment
6. Resilient: Your services will be provided when and where they are most needed

If you consider all of the points made above, you may see that what this manifesto is calling for is not just sustainable web design but is indeed the foundation for sustainable business practices and sustainable economy. To have a better future, we need businesses that provide meaningful and useful services and products that have a minimal negative impact on the environment and the people.

In other words, if you’re going for sustainable web design, you should:

• Use the least possible amount of resources
• Develop and follow a well-thought content plan that makes sure each page you design has a purpose
• Utilise an optimised website build
• Avoid misleading your users in any way to perform actions they may not want to

Why is Sustainable Web Design Important?

So, the internet has numerous benefits for society, but it comes at a huge environmental cost. The average web user consumes online content for 5-6 hours per day on their computer or mobile device. As we continue to use technology more often than ever before, this will only increase in future years until billions of people are surfing websites from all around the world with 8 different types of devices!

Now, going back to what I said at the beginning of this article (and our infographic on the environmental impact of the Internet) , we know this is basically an ever-increasing energy blackhole. On the other hand, we also know that the Internet is critical for many people, and it’s not like they can swap it for its more energy-efficient version, as you would with a car or a laptop.

But you know what we can swap?

Our website design, of course.

If the main point is that the size of your website and how it's built directly impacts how much CO2 it will generate, then this is what we need to address as website owners.

Benefits of Sustainable Web Design

Now, generally speaking, if you're reading this, you already have a good reason to want a sustainable website, and that reason is connected to environmental protection. Basically, you want to be a hero for the planet, and I admire you for that.

But is there an additional benefit to changing our ways when it comes to web design?

I would absolutely say yes.



As a marketer, I'm used to considering all angles of my digital efforts and the way they impact my projects.I can tell you right away that even on a personal level, it's much better to deploy a website that follows an eco-friendly web design and here are some of the reasons why:

• You will spend less: from your designer expenses to your content production, each additional thing will cost you money. More complex designs will cost you money, more copywriting and content will cost you money and so on. Being minimalist and only having what you actually need is an excellent way to cut expenses
• Your customers will be more satisfied: while once upon a time when websites were a novelty, people enjoyed bells and whistles, now everybody is overwhelmed with them, as they spend all day surfing. This means that for the average user, the clearer your website is, the more likely they'll find what they want instead of hitting the X button and going to someone who isn't wasting their time.
• Your SEO efforts will be more effective: Speed has been a thing for a few years now when it comes to Google ranking, yet with each year passing, we see this becoming more and more critical when it comes to SEO. Google HATES slow websites, and they absolutely will prioritise lighter and faster sites. By the way, this is also true for customer experience, as we all know.

How to Make Your Website Sustainable

1. Start by planning your user journey

If you are unfamiliar with the concept, user journey simply refers to the sequence of actions a user will take when visiting your site to achieve a particular goal - a signup, a purchase, etc.

For obvious reasons, shorter user journeys are preferred by the users, as they don't waste their time. Aside from customer experience, though, they will also visit fewer pages to find what they need and thus reducing the carbon emissions from their visit.

 



(image credit: https://www.appcues.com/blog/user-journey-map)

It's a good idea to familiarise yourself better with the concept of user journeys and then, once you can freely design your user journey maps, to adapt your web design to them.

A good user experience (UX) that avoids friction points will inevitably result in both lower energy consumption and happier customers.

2. Choose a green-powered hosting provider

I know this sounds a bit self-serving since we are, in the end, a hosting company, but the reality is that who powers your website every single day will absolutely matter if you want to reduce your carbon footprint. Data centres consume, unfortunately, a big portion of the energy that goes to power the internet. It is essential that we transition rapidly to 100% renewable sources.



Choosing a provider that offers sustainable hosting powered by renewable energy is a must-do. It's also a good idea to look at their overall environmental policy and check if your hosting provider has taken additional steps to make up for their CO2 emissions and/or if they are involved in other sustainability practices.

3. Cache everything!

If you’re using a PHP driven application as many websites do (WordPress, Magento, Drupal etc.) then caching is a must-do for sustainability.

If a site has no caching, then you’re making the server work harder. Each time someone accesses a page on your website, the page content has to be constructed on the fly by processing the PHP code, making queries to the database and turning this into the HTML content that displays your website.

This uses more of the server's CPU, memory and disk, consuming energy in the process. The server would need to do this for every visitor and every page, so the more visitors and pages you have, the more energy you consume.



With caching in place, most of this intensive workload is only done the first time a visitor requests a page. The resulting HTML is then stored in a cache so that each subsequent page load doesn't need to do all that heavy lifting.

What's more, your pages load faster. This is not only a win for you and your visitors, but also means that your visitors spend less time idling waiting for the page to load - consuming less energy in the process.

There are a wealth of ways to cache websites, at Kualo, we prefer LiteSpeed Cache for page caching, and we also have Redis and Memcached to cache database queries. Super-fast websites and better sustainability - what's not to love?

4. If you're writing code, make sure it's clean code

The majority of users will use some sort of CMS, yet if you do write some code, make sure that it's easy to understand, easy to change, and it avoids unnecessary duplications and operations

5. Avoid useless plugins and addons

This is relevant to the rule above, but for people who indeed use a CMS like WordPress, Magento, Craft, Laravel and so on. Sometimes we may get too excited with all the possibilities the plugin market offers us and drown our website in unnecessary plugins

That's often the case with marketing–oriented plugins or duplicated ones that we've forgotten about. Assess what you have and then what you need and give the boot to anything else.

6. Avoid or use minimally custom fonts

This may come as a surprise, but custom fonts can absolutely increase the file size of your website].



(the custom font created for Duolingo by agency Johnson Banks)

Your typical custom font file may easily exceed  200kb while including a single weight. If you use various weights and typefaces, this will inevitably add up, thus impacting both speed and energy consumption.

It is therefore recommended that you use custom fonts only if you feel they are really important to your brand and practical purposes.

7. Use media files wisely (and optimise them)

It should go without saying that all imagery on your website should be optimised in size. We know that from the best practices related to website speed (and, subsequently, SEO). We sometimes see customers asking why their site is slow, only to find that the home page includes 4MB of images because they've uploaded super large originals! Those same images might be able to be served without any reduction in quality by optimising them.

https://youtu.be/eY-VyLd2t-Q

LiteSpeed Cache for WordPress includes automatic image optimisation, so you don't need to worry about doing this yourself. What's more, it can convert images to use modern file formats such as WebP, which are around 25% smaller in size compared to PNG or JPG images.

Beyond optimisation, what we also need to consider is whether their use is justifiable and purposeful.

For example, some product photos could be useless (e.g. very similar angles). In other cases, images used on the page, like random stock imagery, can be easily replaced with alternatives like SVG graphics or the same effect be achieved through CSS styles.

8. Lazy load below the fold content

Each of your web pages may contain a lot of content ‘below the fold’ - that is to say, content that isn't visible unless the visitor scrolls down your page.

If this includes lots of images or video in particular, which may be large in size, all of that data has to travel across the internet even though it might never be seen.



Lazy loading means that you request this content only as the user scrolls down your page. Those sections will appear just before that content comes into view, so from the visitors perspective, it’s as if it was always there - there is no perceivable difference.

Not only are you avoiding transmitting unnecessary data, but you’ll also improve your PageSpeed score by making your website less weighty.

Some applications come with lazy loading built-in, or it can be bolted in with a plugin. For WordPress, LiteSpeed Cache includes a lazy loading feature that is capable of lazy loading anything from images, videos, embedded content or even entire HTML blocks if your page is super long.

9. Limit the use of videos and animations

You don't need to make your website look like a Word page and avoid videos and animations like the plague, but like with imagery, use them frugally instead.

Animations typically have no tactical purpose, so use them as minimally as possible. With videos, it strongly goes to what purpose they will serve, so if you think they are useful to your users, use them indeed, just make sure they are also as optimised as possible.

10. Minify HTML, CSS & Javascript on your site

Again, you might be already doing this for speed purposes, but if you aren't, let’s quickly go over the reason behind this.

Often your HTML, CSS and Javascript code will contain additional data, such as spaces, line breaks or comments. These spaces or comments are useful only so that a developer can easily read and understand the code, but make no difference to how the browser interprets your code.

Minifying your code strips all of this unnecessary weight, reducing the size of the files that need to be transferred across the internet, and making your site load faster.

For WordPress LiteSpeed Cache handles this aspect for you, but most other applications will also have a similar feature available via a plugin.

11. Remove unnecessary CSS and Javascript

Whereas minification strips out unnecessary data, it isn't analysing whether any of that code is actually used by your site.

You may have used a theme or page builder which includes a ton of different layouts, styles or functionality that you never use anywhere on your site.

All of the code will remain in your CSS and JS files, increasing the amount of data that has to be transferred across the internet and making your site slower to load for no good reason.



It can be hard to work out exactly what code to strip out manually, but for WordPress, LiteSpeed Cache allows you to remove unused CSS automatically. This strips out unused CSS and generates a unique CSS file for each page. This may be worthwhile if you have only a few pages, but if your site has a lot of pages, it may remain more efficient to use a single CSS file.

Javascript can be more complex to strip out, though LiteSpeed can at least delay it from being loaded until user activity is detected. This may be appropriate, provided it’s not needed for above-the-fold content.

Ultimately the best advice is to avoid using page builders or bloated plugins wherever possible and use clean code that you know is actually required.

12.  Make sure your website works properly across different devices

Testing your site to numerous screen sizes, browsers, devices, and bandwidth speeds  can be rather time-consuming, yet it is tightly linked to sustainable web design. It has to do with point n.1, meaning that the incorrect display of content and design will lead to poor UX and a lot of confusion among users.

They will spend much more time trying to find whatever they are looking for, resulting in larger energy consumption.

To avoid this, make sure your design adapts well to as many of these variables in as possible to provide an optimal experience for users.

13. Use a CDN to serve your content

So what is a CDN? A content delivery network (CDN) is a network of servers in different geographic locations. The way they will help your content load faster is by serving from a location near your users. In other words, this is linked both to speed and user experience.

More importantly, though,  from a sustainability point of view, this helps reduce CO2 as transferring data to different parts of the world requires a lot of energy. And the further the data has to travel, the more energy it requires.

It's also good to mention that images served via CDN are typically reduced in size if you somehow skipped this step. Many CDNs will provide you with tools for image optimisation, including reducing the image's size, pixel density, format, and compression.



It's important to choose a CDN that uses renewable power, of course, such as Cloudflare.

14.  Audit your content to make sure it delivers on strategy

If you have a large website, periodically auditing its content is critical. Some pages will inevitably become obsolete or will no longer serve their purpose. This is especially true for knowledgebases, but it’s also true for product pages, blog posts and so on.

You can either scout them manually or use Google Analytics to assess what pages can be out-of-date or underperforming. You can then decide whether you can adapt them to have helpful, up-to-date content or determine that they are simply destined for the bin.

15. Reduce your CO2 emissions by offsetting your carbon footprint

Becoming a climate-positive business was probably one of the best decisions we ever made in terms of levelling up our sustainability. Up to this moment in time, we've planted more than 50 000 trees and have offset more than 2000t of CO2, with the intention of continuing this journey for the years to come.

Participating in projects that plant trees and offset carbon is an amazing way not only to improve the sustainability of your web design but of your business overall. Trees are absolute winners when it comes to reducing CO2 emissions, as they absorb them and transform them into oxygen.

We invite you to visit our partners at Ecologi (or really any other similar organisations) and start getting those tree planted!