Eco Web Design

Creating a more eco-friendly web, one website at a time.

We are a very data-hungry society, we’re using more and more and more data and all of that is using more and more energy.

Nicola jones, nature

Eco Web Design: The What, Why & How

Eco Web Design is the practice of web designers and developers to create an eco-friendly online presence. We do this by creating fast-loading web pages that are easy to find in search. This ensures that as little data and energy as possible are used to satisfy the end-user.

Fast pages are not only better for the planet, but they also increase revenue.

As Google put it…”speed equals revenue.”

And, of course, even with a blazing fast website the carbon emissions are not zero. Each page still requires energy to load making our choice of host important.

How do we make eco-friendly websites?

We host these websites on servers powered by renewable energy and/or by a company that offsets their carbon footprint through reforestation schemes or by purchasing renewable energy credits.

While digital information benefits the environment by reducing paper usage it still requires energy to run. If the internet were a country, it would rank 6th in the world as the most energy-hungry.

In fact, our browsing habits and the systems that support them have been estimated to account for roughly 3.7% of global greenhouse gas emissions.

A figure which is on par with the global aviation industry.

The good news is that the ICT Industry is leading the charge and may even help to reduce global emissions in the long run. As of 2017, around twenty tech giants including Apple, Facebook, and Google had committed to using 100% renewable energy.

Microsoft has committed to being carbon negative by 2030 and Google purchases more renewable energy than any corporate on earth.

It might seem tempting to put the responsibility solely on the shoulders of these giants. But, we have a collective responsibility as website owners, designers, and developers to reduce our impact and make the web greener and cleaner.

Plus, Eco Web Design renders our websites faster which make them easier to use and navigate which is better for SEO and business. It’s a no brainer πŸ™‚

Benefits of Eco Web Design

People benefitting from eco web design.
01.

UX (User Experience)

About 40% of users will leave if a page takes longer than 3 seconds to load. Don’t make yours wait.

02.

SEO

Speed is now a Google ranking factor. Give your presence in a search a boost with eco web design.

03.

COST

Slow websites leak revenue. They also cost your users in data. Turbo charge your website for an improved bottom line.

04.

CLIMATE

Eco-friendly websites use green energy and require less to run. This reduces their carbon footprint and increases sustainability.

How Eco-Friendly Is Your Website?

Now that we know the importance and benefits of incorporating eco web design principles into your own projects, I want to show you how to test the ‘greenness’ of your own website.

For this example, I’m going to compare the international homepages of two big NGOs; WWF and Greenpeace. First, to test hosting, let’s head over to the Green Web Foundation and input our URLs.

The Green web foundation's homepage
The Green Web Foundation’s free green hosting tool.

I ran both URLs and got the following results:

WWF's green web hosting score

Greenpeace's green web hosting score

So far so good.

Both websites use Cloudflare, a well-known CDN (content delivery network). While Cloudflare itself is not a hosting provider, website owners can successfully use Cloudflare’s proxy servers to improve the security, performance, and reliability of their websites.

This result is a little grey as it doesn’t tell us who the actual hosting provider is, but as Cloudflare is committed to sustainability and websites on their network benefit from performance improvements, they are listed as the host in this test.

I will go into more detail on the benefits of CDNs in another article but for now, let’s look at WWF and Greenpeace’s website carbon emissions using the Website Carbon calculator.

Here are the results:

WWF website's carbon score
WWF website carbon score
Greenpeace's website carbon score
Greenpeace website carbon score

By this measurement, Greenpeace is doing a fairly good job on its website and WWF needs some improvement. To add some perspective we can equate the carbon emission to the amount that an average tree can absorb.

WWF receives approximately 1.9 million visits per month and emits quantities of carbon equal to what 1 520 trees absorb per year. Greenpeace, with its 1 million monthly visitors emits the same amount of carbon absorbed by about 500 trees in a year.

The is meant as an example and not to criticise. Both organisations do more than their fair share mitigating for and fighting against climate change. However, I hope we see Big NGOs like these lead the charge in the future.

If you measure your own website and also get a red result, as WWF has, then you’ll need to take action and make improvements. For the planet, SEO, and conversions.

How to measure page speed

While there are a number of tools available for this, we are going to use a tool straight from the horse’s mouth – Google’s Pagespeed Insights. With this, you can test your website’s performance in both mobile and desktop searches.

Google's pagespeed insights home page

The tool defaults to mobile results which are typically much lower than desktop scores. The tool simulates a 3G mobile connection to depict how users might experience a website on a mobile device with a slow connection.

This is very important as the majority of people now access Google search from a mobile device. Google predominantly uses the mobile version of a website for indexing and ranking and has done so for all new websites since July 2019.

You can switch between mobile and desktop views by using the tab on the top left of the results page.

Let’s have a look at the results for WWF and Greenpeace:

WWF's mobile pagespeed insights score
WWF’s mobile speed score
WWF's desktop pagespeed insights score
WWF’s desktop speed score
Greenpeace's mobile pagespeed insights score
Greenpeace’s mobile speed score
Greenpeace's desktop pagespeed insights score
Greenpeace’s desktop speed score

At first glance, the only real difference here is WWF’s mobile score. This is significantly less and could be contributing more to the data transfer metric used by the carbon calculator.

Interestingly, if we look at the actual user (field) data, WWF passes the Core Web Vitals desktop assessment while Greenpeace doesn’t. Therefore, for the last 28 days, people have had a better desktop experience with WWF than with Greenpeace.

(Read about the difference between lab and field data here.)

And while the opposite is true of mobile, users of both are having an under-par experience.

Neither Greenpeace nor WWF have effectively used eco web design principles to optimise their websites. However, they are using a green CDN which does reduce the impact.

Eco Web Design Solutions You Can Implement Today

Now that you know how to review the performance and greenness of your website let’s tackle the next obvious step, how to improve it.

Before we dive in I want to mention a few things:

  • This applies to WordPress websites (apologies if you’re using another CMS)
  • We’re not going to obsess over 100% scores. In most cases, this isn’t possible. Get a green (90+) score and you’re doing brilliantly.
  • Many small fixes often lead to good cumulative results, it can be hard to pinpoint exactly what action led to a specific result.
  • Every website is unique as are the fixes, these tips aim to have the biggest impact but may not work in every situation.

Ready? Let’s get started.

1. Website Foundation

If a completely blank page gets bad scores then it won’t be possible to get 90+, even if you optimise until the cows come home. If your foundation is weak you’re fighting a losing battle.

Unfortunately, many of the popular page builders (like DIVI and Elementor) inadvertently sacrifice performance for functionality by adding CSS and Javascript which sometimes load even when they’re not being used.

For this example, I’ll be using DIVI on the Metalynx home page as this is what I used for all my own and client sites in the past.

First, create a blank page. Call it something like “blank page test” and then title it “Blank 1.” I’ll explain why it’s important to number it in a second.

Next, publish the page and run the URL through Google Pagespeed Insights.

Metalynx home page speed test
Metalynx page speed opportunities

Here we can see that the resources blocking page rendering are most likely caused by our page builder (DIVI) in the form of unused CSS and Javascript.

Under ‘reduce initial server response time’ it states the following; “Themes, plugins, and server specifications all contribute to server response time. Consider finding a more optimized theme, carefully selecting an optimization plugin, and/or upgrading your server.”

As our hosting server is excellent (more on that here) our first real optimisation clue, then, is to explore our theme and plugins.

2. Theme

Besides code cluttering caused by page builders, plugins are often the biggest culprit of poor WordPress website performance.

So before we change our theme, let’s check our RAW page speed score by disabling all of our plugins and running the blank page test again. This time we will change the title to ‘Blank 2’ to make sure we’re getting an updated result.

If you don’t see the title change reflected (bottom right of the image), try purging your cache before a retest.

Metalynx blank page score

While deactivating all of the plugins did improve our score, it’s still far from ideal. Clearly, we have a theme problem.

If you’re getting a 90+ blank page score now then you can move on. If not, it’s time to give some serious thought to changing your theme.

The best theme that I’ve found for speed and ease of use is the Kadence Theme. It ustilises Gutenberg blocks and has suprised me in just how easy it is to use. Way easier than DIVI or Elementor in my opinion!

Gutenberg blocks are the blocks used in the WordPress editor to create our layouts. Each block, be it a paragraph, heading, image or any other feature you need is draggable and fully customisable.

The default Gutenberg blocks are excellent but somewhat limited. Publishers may need multiple plugins to get the functionality they need. But as we know plugins can slow your site down, so we need a minimalistic approach here.

In step the Kadence theme, a soon to be powerhouse in the WordPress space. The Kadence theme has virtually everything you need to build a fully functioning website without the need of additional plugins for functionality.

What’s more is that it’s coded cleanly so it’s fast out of the box – really fast.

Metalynx speed score using the Kadence theme

Great.

Now that we have a solid foundation it’s time to test a page with multiple elements and optimise it where needed.

For this, we will test the Metalynx homepage now running the lightning-fast Kadence theme.

Homepage score using Kadence
Homepage score opportunities

3. Plugins & Caching

Very often plugins are the cause of a slow website.

If, for example, you know your theme is not the issue (or you don’t want to change), then the first thing to troubleshoot is your plugins.

The best thing to do deactivate your plugins one-by-one and rerun your tests. This, again, is best done in a staging environment or during low traffic periods.

I’ll cover this in more detail in another post, but the basic process is:

  • Deactivate plugin (settings will remain, no need to worry).
  • Rerun URL through Google Pagespeed Insights.
  • Analyse results.
  • If no change, reactivate the plugin.
  • Move onto the next plugin.
  • Repeat.

You can also use this approach to test new plugins for your website. In this case, I want to test which caching plugin is best for us to achieve our goal of a fast-loading eco-friendly website.

5. CSS & Caching Plugins

Caching allows information to be accessed more quickly by storing temporary copies of files in a cache. There are some free and some paid options out there but, as always, you tend to get what you pay for.

Most of these plugins also perform the important tasks of minifying CSS and Javascript files. It’s these files that often trigger the “eliminate render blocking resources” warning in Pagespeed Insights.

First let’s try Breeze, a free plugin developed by Cloudways. I’d only recommend using Breeze if you’re being hosted on Cloudways. If not, try Autoptimize.

Let’s see our results after installing Breeze and Tweaking some settings.

Home page speed score after installing Breeze from Cloudways
Mobile Score
Home page speed score after installing Breeze from Cloudways
Desktop Score

Awesome improvement, I’m sure you’ll agree.

Our goal was 90+ which for your users and thus SEO is perfect. But as my goal is to make websites that are as energy efficient as possible I want to try one more thing.

That is to use the highly-acclaimed WP Rocket plugin. It’s not free but quality never is. After disabling Breeze (so there are no conflicts) and enabling WP Rocket here are the results.

Home page speed score after installing WP Rocket

Boom.

Considering we started with mobile speed scores in the mid-20s this is phenomenal and something that just isn’t possible with page builders like DIVI and Elementor unfortunately (as much as I’ve enjoyed using both, it’s over now after this.)

4. Images

Images are one of the most important cogs in the website optimisation wheel. You can run the best WordPress theme with the best caching plugin (like I am) but still get poor results if you haven’t optimised your images.

Fortunately, there are some excellent plugins that can significantly reduce image size while retaining visual quality.

The two that I recommend are Shortpixel & Imagify.

Both plugins have free plans to get you started and should be more than enough for a small website.

Try to get each image under 100kb and avoid using heavy images above the fold (portion of the website visible without scrolling) unless it benefits the user and makes sense to do so.

Also make sure to resize your images to use the correct dimesnsions. No use trying to squeeze a 3000 x 2000 pixel image into a 300 x 200 pixel thumbnail. This will just end up in a larger file, use more data and slow your page down.

However, make sure you upload the desktop size that you need. WordPress will automatically serve responsive images to smaller devices by making multiple copies in various sizes from full size down to thumbnail.

For best results:

  • Resize and compress your images before uploading them with software like Photoshop or use the free online editor, Pixlr.
  • Compress the images using a plugin.
  • Lazy load (defer) your images (won’t load until user scrolls).
  • Specify width & height using HTML or a plugin if you receive a ” missing width-height attributes” error.

There are many ways to achieve the last two bullet points. But to keep our sites as lean as possible and to reduce the number of steps needed this is most easily achieved with WP Rocket.

My images have the correct attributes so I’ve left the box unchecked.

Lazy load check box with WP Rocket
LazyLoad (top) and Image Dimensions (bottom).

6. Hosting

The final piece of the page speed puzzle is the quality of your hosting. If after implementing all the fixes above you still get a “reduce server response time” error then your hosting provider might be the issue.

Let’s test our server speed.

For this, we’ll use Bitcatcha. We’re interested in the server response time on the bottom left which should be below 180ms.

Bitcatcha server response time
Cloudways offers excellent server speed for affordable prices.

For eco web design we want to ensure that our websites are fast and that the hosting companies are either using clean energy or offsetting their carbon footprint in some way.

This is tricky to navigate as the only tool available isn’t quite accurate. For example, the company that I use, Cloudways, is more of a middleman that gives us access to the cloud servers of five different companies; Digital Ocean, Vultr, Linode, Amazon, and Google.

Cloudways comes up as grey, yet Google is one of the greenest tech companies out there as mentioned here.

Similarly, Vultr, the company whose servers I currently use, comes up Green.

Vultr green web hosting score

Cloudways has also partnered with One Tree Planted and states that they are committed to improving their long-term approach to sustainable growth.

In this case, it seems that the tool doesn’t have all variables factored in but it can still act as a guideline.

Why is Cloudways so Great?

Cloudways takes care of all the technical backend allowing us to deploy scalable cloud servers quickly and easily.

They offer managed VPS (Virtual Private Server) hosting which allows resources such as RAM and CPU to be dedicated to your account. This means you’re not sharing resources with other websites as with shared (cheap) hosting.

After poor experiences with many different hosts including Bluehost and Siteground, we finally switched to Cloudways for all of our client sites and have never looked back.

Shared hosting might seem attractive by the price point, but don’t be fooled as you will no doubt run into headaches before long. Read about some nightmare scenarios that you might want to avoid here.

Why I use Cloudways

  • Excellent server speed and TTFB (google recommends/ my results)
  • Fast load times make websites faster to work on (huge time saver)
  • Scalable pricing with unlimited applications per server
  • Free migration (yes freeeee)
  • Choice of 5 clouds hosts
  • Staging environment
  • Daily Backups
  • I’ve received excellent support (also see Trustpilot)
  • The only major con is that there’s no email. However, you can easily set up Rackspace for $1 per month (which I did).
Load WordPress Sites in as fast as 37ms!

Affiliate Note: If you sign up using this link, thank you! I receive a small commission for the sale but only use and promote products and services that I believe in. Cloudways literally changed the game for me and I’m confident you’ll feel the same way.

If you’re serious about performance, security, and reliability then here’s a friendly push for you to switch or jump straight to VPS hosting now πŸ™‚

Alternatively, you can contact us to manage the speed, security, and care of your WordPress website so that you can focus on your business.

Let’s make the web greener, together, with eco web design.

Free Website Review

Discover how eco-friendly your website is and get our recommendations on how to make it greener.