Skip to content
Home » Blog » 5 Ways to kick start your sustainable web design journey

5 Ways to kick start your sustainable web design journey

I’ll share with you five things you can do right now to make your WordPress website more sustainable. I also do these steps to improve my site’s sustainability and get great results – measure your site’s carbon footprint, move to a greener hosting company, install the right plugins, keep your brand identity simple, and create content intentionally.

1. Measure your site’s carbon footprint and page weight

This first step helps you know where you’re at on this journey. Without knowing how sustainable or unsustainable your website is, you won’t know where to improve it. 

I recommend you use a couple of tools to measure the carbon footprint: Ecograder and Website Carbon Calculator. They will do the magic of calculating things like an energy source, data transfer, web traffic, and then rate your website. Then they point out the areas where you can make changes. 

Along with the carbon measuring tools, use a developer tool to inspect your webpage weight. The developer tool will show you the raw data of how much your page weighs and the kinds and numbers of resources that get transferred each time a user loads your site. 

According to HTTP Archive, the average page weight of a WordPress website for desktop view this year (March 2022) is roughly 2408 KB (2.35 MB), while in the last five years, it was around 1928 KB (1.88 MB). That’s a 24.9% increase! 

Videos are the resources that weigh the most, following up with images, JavaScript files, font files, CSS files, and HTML files.

Whenever we load each page, all resources on that page will be loaded. The more resources it has, the more energy and time used to fetch them. So, the key is to keep each page as lean as possible by being mindful of the type and the number of resources we put on the page. 

2. Move to a greener web hosting company

Web hosting company plays a huge role in your web sustainability status. The reason is it’s the energy source for your website. It contains your site’s database and serves your users by responding to their requests, giving them the page they want. 

The problem is most websites worldwide are hosted by companies that power their data centers with fossil fuel, which is non-renewable. So, now you can imagine how insanely this traditional electricity source is polluting our world every second when we use a website.

Hosts that use renewable energy (e.g., wind, solar, hydropower, etc.), on the other hand, have a much lower impact on the environment. That’s because the energy is renewable, and it doesn’t exploit the earth too much to be collected and processed into electricity. 

Therefore, a top priority is moving your website to be hosted by a company that uses greener energy to run its data centers. See the list of green web hosts right here. When you do decide to move, contact your current web host and make sure they know the reason why you move. Take this opportunity to spread the word about your sustainability decision. 

3. Install plugins that help with content optimization and web performance 

To make your site more lightweight, focus on optimizing images because they’re the heaviest resources (besides videos), improve load time by caching files on the user’s browser, and improve your site’s findability by exercising SEO practices. These three plugins will help you do just that: 

  1. Smush – This plugin compresses images by reducing file sizes with barely any noticeable change in image quality. It has an option for lazy loading, which will load images only when they appear on the user’s screen.
  2. W3 Total Cache – This tool will memorize web resources in the first visit on your user’s browser. Then when the user visits your site the next time, their web browser will fetch the previously loaded resources and show the page without loading all the resources again. As a result, the site loads faster.
  3. Yoast SEO – Search Engine Optimization can take time to master, but it increases the visibility of your website content through keyword searches. Your targeted audience will find your site more easily with less time spent and, thus, less energy used by the search engine. 

4. Keep your brand identity simple and consistent

Logo, brand colors, theme, and fonts make users recognize your brand. The key is to keep it simple, lightweight, and consistent. 

  1. Logo – choosing a vector format such as an SVG file is ideal. This type of file is scalable without adding more weight to the page or losing its original image quality. 
  2. Brand colors – darker mode will save energy only through OLED screens. If your users’ screens are LCD, it won’t help. If it’s too hard to figure out what type of screen your users use the most, focus on accessibility instead. I suggest you use Color Contrast Checker to help you pick user-friendly colors.
  3. Web theme – select a light theme for your website to keep your site structure lean, which helps speed up the load time. This is what I love about using WordPress. There are plenty of great free themes, and you can also have much freedom in customizing them.
  4. Fonts – stick with system fonts rather than other font types. System fonts are pre-installed on most devices, so they don’t need to be loaded through the network when users view the site. 

5. Create content with intention and strategies

We have to be aware that everything we put on our website has its own carbon footprint. So, before adding anything new, consider: 

  1. Editing, rewriting or updating your old content. 
  2. Repurposing content.
  3. Decluttering redundant content or one that no longer aligns with your goals.
  4. Organizing or re-organizing content for a better user experience.

Every content created should have a clear goal, be straight to the point, concise, and valuable to your audience.   

Summary

Now that you learned the five ways to lower your site’s carbon footprint. Here’s a quick recap – start by measuring your site’s emission to see your site status, move to a green web host if you haven’t done that already, use plugins to help with content optimization and improve site speed, keep your brand simple and consistent, and be intentional when creating content. You can see that most of these sustainable web design practices are similar to web design best practices. And that’s true! The two intersect with each other. We just shine a light on the sustainability side of it more because it’s less talked about even though it contributes greatly to climate change. There are so many more ways to improve your site’s sustainability. Let’s apply what you learn now and stay tuned for more.

Leave a Reply

Your email address will not be published.