It’s worth noting before reading that this post relates to our website hosting, and not our app hosting. We’ll be writing about that soon.
Recently, we launched a new website. That’s the one you’re on right now. I was aware, of course, that websites (and the internet) contribute to climate change, but it was only recently that I really took the time to understand what goes into making a website good (or bad) for the planet – and how an environmentally friendly web presence could be achieved.
You may have noticed that the footer on every page on our website displays the amount of CO2 each specific page has generated, and the context of that against other websites. This feature is powered by websitecarbon.com – and I’m a huge advocate of the transparency it promotes. I recommend you pop your site into their tool and run a carbon check today (don’t worry, that doesn’t make it public like ours). Like me, you might just be shocked enough into doing something about it (thanks Ross).
There are plenty of great articles out there that really dig deep into the nuance of sustainable UX/UI, servers / hosting, coding and similar – I’ll link to them at the end. The problem is that most of them are expert level, so I wanted to share my thoughts and findings with the everyday web creator who – like me – perhaps just wants to better understand websites and their impact on the planet, and how we can make slightly better informed choices of our own.
So, what’s the issue?
Nutshell; it’s all about energy usage.
Like turning on a light switch, the brighter the lightbulb, the more electricity it takes to light it. It’s f**kin logic. The same goes for websites; the brightness in this case, is the size of the web page. The more files a server has to send you to display a page, the more energy it takes to send it. Add to that, the size of the individual files (photos, videos, php, java etc.) themselves, and… you get my drift. More electricity means more energy from the grid, and due to the way the world is set up, that means more coal, oil and gas being drawn to power our obsession.
There’s the problem.
So, websites are hosted on servers. It’s a thing. Servers are essentially millions of hard drives connected to the internet at all times – aka ‘The Cloud’. You’ll know that when you use a laptop, it gets hot. Imagine how hot hundreds, thousands or millions of hard drives can get, especially as they are all connected to the internet 24/7, constantly accessed by billions of people around the world. Keeping them cool enough to keep up with our browsing routines is a real thing too.
So, the two key drivers are:
- The electricity it takes to power the hard drives and;
- The electricity it takes to power the coolers that keep the servers from overheating.
Obviously, there is the consideration of the electricity being used to power the device you’re viewing the website on, along with the mining of minerals and materials (not to mention the energy it took to run the machinery) that made that device in the first place… then there’s the depths of the supply chain for every object in that factory, but we don’t need to go there today.
What makes some websites better, or worse, than others?
A few things. It comes down to the amount of information that is being transferred between the server and you to show the web page you have clicked on. If the total file size of a web page is large, it takes more energy to send it. The lighter the load, the easier it is to carry. Just like your shopping – I’d rather walk home with a bottle of (oat)milk than my entire weekly shop.
Most websites you visit will be sending you 100% of the files or plugins (code) linked to a page, even if it doesn’t need to. And if it doesn’t need to, it’s fine, any unused code will just sit there quietly doing nothing. The problem is, it has still used energy to send those files… to do nothing.
The two biggest elements that affect total file size of a web page includes images and codebase. There is such a thing as good (clean) code and bad code, but we’re not all developers, and we’re not all in control of the code that powers our website. Very few of us, in fact. Most of us use WordPress, Squarespace, or Wix and we just drag and drop things, so how are we to know what’s happening behind the scenes?! Well, there are some things us mere mortals can do.
Drop it like it’s hot
In today’s DIY web age the things we drag and drop include third-party plugins, theme styles, user friendly builders and so much more. They’re all products sold to us to make our web-building life easier. The easiest way is to spend some time choose the right elements at the start – the right theme and plugins, and most of the work will be done for you. The thing is, most product developers don’t yet create these things with the environment in mind, and often package the one simple feature you need with a million that you don’t, just in case you do. It helps build a great site, but it doesn’t do well for the planet.
Tip
For your initial research, search for ‘Fastest Themes for (your platform here)’ because the good news is that a well optimised website, also means a fast one. You’ll probably turn up better results compared to searching for ‘environmentally friendly themes’ as this will be far less written about or independently reviewed to date, compared to speed reviews… maybe search for both.
When using third party tools, it’s really tricky to make a website as lean as possible without coding it from scratch because you carry a lot of unused weight rather than just sticking to the exact code you need for your particular website to work. Currently, about 40% of websites are built using WordPress alone (WTF) with 500+ being added each day (WTAF), compared to 50-80 on Shopify or Squarespace – so you can see the size of the problem here. That’s not to mention the WordPress 55,000 third party plugins currently available to you.
It’s not just people like us though – BBC, Netflix, Disney, and even Facebook Newsroom all use WordPress – and almost 15% of the world’s top 500 sites are built on WordPress today.
Tidy up the digital house
You don’t need to be able to code to do this bit, you just need to be willing to invest, a little… in the planet.
A cost effective way to optimise your website’s code delivery is to hire a developer to go behind the scenes of your site and edit the site directly. Spend a few quid on Fiver or Freelancer, and post a job seeking a backend developer to optimise your website for speed and efficiency. You could easily achieve this for £20 – £50.
Secondly, if you’re using WordPress, there are a few amazing plugins out there that do all of this for you. WP-Rocket is the industry standard. It costs $50 or so, but it absolutely goes to town on your website, strips out all the unnecessary code, smartens up the cache, and optimises your images in real time (more on that next).
Next Up, Image Sizes
You know the drill… right click, save image. Upload to website, publish. Cuppa tea. The problem here is that the image is probably way bigger than it needs to be, and we now know what that means.
For those of you who use Photoshop or Canva to resize your images before uploading, that’s great, but it’s still not quite good enough these days.
WEBP is your new best friend.
Sack off JPG and PNG – even the most optimised image is still larger than the latest format, WEBP; a new, superior, lossless image format from Google that reduces file size dramatically (25 – 34%) and makes the web faster. Win-win. Rude not to.
This reduced file size is also favoured by Google for page speed test results, which positively affects your organic SEO rating. It’s not just good for the planet, it’s good for your customers, and good for your Google ranking.
Annoyingly, there’s no simple ‘export as webp’ using photoshop or Canva in the same way you do JPG and PNG. So you’ll need to do one of a few things instead.
- Find an online converter, and run your JPGs and PNGs through that before uploading
Or, my preference
- Install a plugin on your website that optimises and converts the old-school (JPG and PNG) files you upload in real-time. WP-Rocket is a great one for this, or they have a more affordable standalone plugin called: Imagify. Then, go about business as usual and your site will do the work.
Renewable hosting; surely that fixes everything?!
Logic says that if we opt to use a renewable energy powered hosting provider, it doesn’t matter how much energy it takes to transfer huge web files, because it’s all clean anyway. I get it. I go there sometimes too myself, but it just doesn’t sit right. Let’s do all we can.
I did a lot of digging into green hosting when choosing the perfect hosting provider to help us achieve the least environmental impact from our website. The downside is that standard hosting is dirt cheap. Really. Like anything ‘good’ for the planet, it costs more – simply because it’s not mass market (yet), so the more of us that do it, the more affordable it will become for all of us over time. When we switched, we went from paying £3/month on global hosting giant Namecheap to paying 4x that amount for the same service using renewable energy. The trade in value though, is entirely worth it.
Our hosting solution
I am proud to say that we now use Kualo and I have had the pleasure of speaking directly with their founder and CEO in order to gain clarity on their renewable offering and what it really means. Their commitments are also independently audited and verified annually by Green-E.
Quick aside: before committing to Kualo, I explored some time with another couple of ‘green’ hosting providers, drawn in by the bright lights of tags such as ‘300% renewable energy’. It turns out that in most cases, this claim isn’t as true as the headline leads you to believe (or wish it was). Some companies simply purchase carbon certificates that are unaudited, unverified and after some digging, don’t stack up very well against the energy they’re actually using – both at datacenter level, and at the company’s operational level.
So… Kualo’s UK datacentre is powered by 100% renewable energy. Yup, truth. They buy it from Native Energy, a certified B-Corp. In addition to this, they choose to invest in carbon offsets and tree planting initiatives to further reduce their impact. It’s not one or the other, it’s both. More than just being carbon-neutral, they are carbon negative and their mission is to repay any and all of the company’s carbon usage right back to the day they were founded. That ethos, I’ll buy into every day. And trust me, having spoken to them, it comes from a genuine care for the planet, not an on-trend strategy to stay relevant for SEO purposes.
Quick note here, this isn’t an #ad – we’re just super proud to be hosted with Kualo and wanted to shout about the benefits so other who want to, can follow suit.
Host providers like Kualo work great for most websites. Once you hit high levels of significant traffic, specific infrastructure (such as app development) or expect unpredictable surges, you’ve probably outgrown the highstreet hosting provider and will find your way to one of the big’uns, who offer an entirely different service altogether; the ones built for global scale.
For example, with our core product HERO, the app, the local datacentres aren’t designed to support our needs in the same way; our website though, its perfectly suitable.
I’ve read a handful of articles on AWS vs Google vs Microsoft. That’s a great analysis at scale, but most people simply don’t warrant that much power or flexibility for their website anyway. It’s just easier for agencies to manage, and again, the environment takes a backseat to ease of client management.
Doing the right thing by the planet for your website might mean a little more hassle and a little more cost, but if it’s positive impact you’re looking for, spending a little time, and a little money to get it right from the outset is actually pretty easy.
Useful links
