Sustainable web design. What is it? How does it work? How does it affect your website, and what are the benefits?
This guide covers all of the key ingredients, as well as clear, concise information to help reduce the amount of carbon your website produces.
FAQ
Sustainable web design uses a set of best practices to reduce the amount of electricity and, therefore, carbon produced each time someone visits one of your web pages.
This starts with using a web host that’s powered by green, renewable energy. Additionally, optimising page sizes and loading times will reduce energy requirements per page load.
A Guide to Sustainable Web Design
To get an approximate idea of how much carbon your site currently produces, enter your domain into one (or all) of the following:
In addition to the above tests, you can check if your site is currently running on renewable energy over at the Green Web Foundation. Here, you can also find a list of verified green web hosts in your country.
Good to know: Most tools (including the Website Carbon Calculator) that determine whether your site runs on green web hosting use the directory from the Green Web Foundation.
The internet is the world’s largest coal-powered machine.
How Websites Produce Carbon
Because of the vast number of people using the internet, the energy required to power our data centres has massively increased.
While this has a minimal effect when one person loads one page on your website, it’s detrimental when it becomes near-constant use for pretty much everyone across the globe.
Thankfully, a set of best practices will minimise our impact. Let’s take a look.
Low-Carbon Websites – Key Ingredients
Work through as many of these steps as you’re comfortable with. Your journey towards a low-carbon website will be ongoing. Therefore, taking one section at a time is advisable.
Wherever possible, set some allocated time to work on your scores each month. If you come across any barriers, my emails are always open.
Hire a Hindle
Green Web Hosting
Firstly, the most important area to tick off is your web hosting provider. If you’re using a self-hosted option such as WordPress, you can freely choose your own web host.
However, if you’re using an all-in-one website-building platform, you usually need to use their own hosting, which isn’t always powered by renewable energy.
Generally speaking, most folks in the world of sustainable web design aren’t working with an all-in-one website builder. Even when they’re using green web hosting, it’s going to be much more difficult to achieve a high score from the Website Carbon Calculator.
Self-hosted options are currently the most popular. This way, you can choose a suitable green web host based on your location. Here at Clearcut Derby, I use and recommend 20i.
Choosing a Website Builder & Theme
Secondly, we’ll need to consider how we build a low-carbon website. WordPress and Statamic are currently two of the most popular options.
Statamic is much more advanced in terms of installing and building your site. You’ll need extensive PHP and Laravel knowledge. With that said, you can then achieve an impressive Carbon Calculator score right out of the box.
WordPress is my personal preference. With the right setup, we can easily obtain an A, or even A+ carbon rating.
When it comes to choosing the tools you use inside WordPress, less is more. Page builders are notoriously bloated and slow. Thankfully, we can now build a full website with the tools already built into WordPress.
Working with the block editor is the most streamlined and efficient option. Additionally, choosing a lightweight, performant theme is critical in keeping your site nippy and sustainable.
Block themes such as (the default) Twenty Twenty-Five or Ollie are recommended for those working with full site editing. Alternatively, Kadence is one of the fastest and most accessible hybrid themes I’ve worked with so far.
Efficient Caching
Next up, caching. Let’s not get too technical here. This paragraph from Cloudflare is more my level of understanding.
To understand how caches work, consider real-world caches of food and other supplies. When explorer Roald Amundsen made his return journey from his trip to the South Pole in 1912, he and his men subsisted on the caches of food they had stored along the way. This was much more efficient than waiting for supplies to be delivered from their base camp as they traveled. Caches on the Internet serve a similar purpose; they temporarily store the ‘supplies’, or content, needed for users to make their journey across the web.
Basically, caching speeds up your website and makes everything a whole lot more efficient.
My recommendation here is to find a decent web host that has caching included. Otherwise, there are also plenty of WordPress plugins that you can use.
Some of the most popular include W3 Total Cache, WP Fastest Cache and WP Super Cache.
Optimised Images
Did you know that images and video are usually the biggest contributors to a slow and bloated page?
With video, I’d suggest not using it at all unless it’s a specific requirement; however, images will usually be required on most websites.
Opt for a format such as WebP wherever possible. This will keep your file size down, but always experiment with different options. For example, simple vector graphics can sometimes work out a smaller file size as a PNG.
Image editing software is preferable at this stage. Affinity Photo, Designer and Publisher all come highly recommended.
Try and export your file at the correct size needed for your website, and fire your images through tinypng.com before uploading to WordPress.
WOFF2 Font Files
Converting your font files to a WOFF2 format will usually shave off two thirds of the file size. A quick easy and simple way to reduce your overall page size.
When you download from Google Fonts, you’ll have a set of .TTF files. Choose the only weights you need (usually Regular & Bold), then a handy converter from CloudConvert will do all of the hard work for you.
Once you’ve got your WOFF2 files, simply upload them directly to WordPress. This can be done via the Styles settings if using full site editing. Alternatively most classic or hybrid themes have an option to upload your own fonts.
Optimised Code
Sustainable web design practices favour clean, optimised and minified code.
Minification is the process of removing all unnecessary characters from the source code of interpreted programming languages or markup languages without changing its functionality. These unnecessary characters usually include whitespace characters, new line characters, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute.
For your average user, this can all get pretty complicated. Thankfully, there’s an easy solution.
Either a) use a web host that includes performance settings that automatically optimise and minify your code. Or b) use a performance plugin such as WP Rocket.
The latter is a paid option and, while extremely popular, is not necessary if your web host has most of the same features.
Reduced Page Sizes & Plugins
Overall, one of the primary goals of a low-carbon website is to keep your page size as small as possible.
Most of what I’ve covered so far will contribute towards this; however, let’s take it even further.
Throughout the planning, designing and building stage, question every element of every page. Why is there? What purpose does it serve?
More often than not, there will be elements that can be stripped out without negatively affecting the user experience or conversions.
When it comes to WordPress plugins, less is definitely more. Use only the bare minimum, and avoid adding them just for the sake of it. Referring back to the core tools available within WordPress, these have now eliminated the need for quite so many plugins. Hooraaa!
Faster Loading Times
Again, most of what’s been discussed so far will contribute to a faster-loading website. You can check your loading times with tools such as Google Page Speed Insights and GTmetrix.
The goal here is fast, lightweight pages that use as little energy as possible to load. Decent web hosting is your first point of call. As mentioned above, 20i is my recommendation. This service comes with built-in performance settings to drastically improve your loading times.
Secondly, if you’re using Kadence, as this website currently does, that also comes with some built-in performance settings that should all be turned on.
Lastly, in this section, reign in your animations. Lots of websites like to go a little mad with bits and bobs flying all over the shop. This doesn’t make for a good user experience, nor does it help keep your page size down.
Keep an eye on your website speed. As you add more and more content to a website, it can start to slow you down.
Accessibility Focussed
Accessibility plays an important role in sustainable web design. A website that’s accessible to all, or at least, as many people as possible, means pages aren’t being loaded and then abandoned.
W3C guidelines contain all of the official requirements. Start with the basics, such as colour contrast and make sure your pages will work on a screen reader.
The World Wide Web Consortium (W3C) develops standards and guidelines to help everyone build a web based on the principles of accessibility, internationalisation, privacy and security.
I’m not an expert on web accessibility, but I always address any issues flagged by Page Speed Insights, which provides handy pointers on areas that need fixing.
You can, of course, delve much deeper than this, which is recommended for bigger or busier websites and businesses.
User-Friendly & Easy to Navigate
Finally, tying in with accessibility, sustainable web design makes it easy for users to find their way around a website in as few clicks as possible.
The fewer pages that need loading, the less energy is required. Low-carbon websites are clear and easy to navigate. They don’t go mad with the animations, and pop-ups or distractions are a definite no.
A visitor to your website should ideally be able to instantly see what’s on offer, then move to the next step with just one click.
An unclear path will result in unnecessary pages being loaded, as well as a somewhat frustrated visitor.
Sustainable Web Design – Conclusion
Sustainable web design benefits your visitors, your business and the environment. Tripple win!
A faster, greener and cleaner website will reduce your carbon emissions while improving user experience and conversions. What’s not to love?
The ten areas I’ve covered in this article are an ideal starting point on your journey towards a low-carbon website:
- Green Web Hosting
- Choosing a Website Builder & Theme
- Efficient Caching
- Optimised Images
- WOFF2 Font Files
- Optimised Code
- Reduced Page Sizes & Plugins
- Faster Loading Times
- Accessibility Focussed
- User-Friendly & Easy to Navigate
Set goals and make your improvements an ongoing practice. Tackle a step at a time and keep an eye on your carbon rating with a tool like the Website Carbon Calculator.
Thanks for stopping by…
My name’s Mike Hindle. I’m a WordPress and local SEO specialist. I’m the founder of Clearcut Derby and a print and distribution business called Leaflet Lion. Outside of work, I love hiking, exploring and photography.