Eco Web Design: The What, The Why & The How
Eco Web Design is a practice whereby web designers and developers create an eco-friendly online presence. We do this by creating fast-loading web pages that are easy and quick to find in search results pages.
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 lead to better user satisfaction and contribute to more revenue.
As Google put it…”speed equals revenue.”
However, even a blazing fast website emits some carbon through its use of energy, which makes our choice of host important too.
Green Web Hosting
Eco-friendly websites are hosted on servers powered by renewable energy and/or by a company that offsets their carbon footprint in some way. This is often done 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.
And while it might seem tempting to put the responsibility solely on the shoulders of these giants, we all have a role to play.
We as website owners, designers, and developers have a collective responsibility to make the web greener and cleaner.
Plus, Eco Web Design renders our websites faster which makes them easier to use and navigate. Overall, green websites are better for SEO and for business.
Going green is a no brainer really 🙂
Benefits of Eco Web Design
Slow websites leak revenue. They also cost your users in data. Turbo charge your website for an improved bottom line.
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.
I ran both URLs and got the following results:
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 tool.
I will go into more detail on the pros and cons 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:
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 ‘eco-web-design’ 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.
I’ll cover the how later in the article. For now, let’s look at some more performance tests.
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.
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:
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 poor scores then it won’t be possible to get 90+, even if you optimise until the cows come home.
If your website foundation is weak then you’re fighting a losing battle.
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.
Some of the steps outlined here might temporarily affect the look and functionality of your website. You might want to choose a quiet time to do this (if you have some web traffic) or set up a staging environment.
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.
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 later) our first real optimisation clue, then, is to explore our theme and plugins.
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.
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 utilises Gutenberg blocks and has surprised me with just how easy it is to use.
In many ways, I’ve enjoyed using the Kadence theme far more than DIVI without much of a learning curve.
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 for additional plugins for functionality.
What’s more is that it’s coded cleanly so it’s fast out of the box – really fast.
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.
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.
Note: Even if you’re using a fast theme like Kadence, you might still need some plugins for extra functionality. If a plugin is essential to your business you might need to sacrifice a little performance. This can only be decided on a case-by-case basis. That being said, there are usually better options out there so chose your theme and plugins wisely, a minimalist approach is best.
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 get what you pay for.
Let’s see our results after installing Breeze and Tweaking some settings.
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.
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.
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.
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 dimensions. 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.
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.
For the 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.
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).
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.