When it comes to environmental impact, the internet’s far from completely green. Every time anyone, anywhere, browses a website, they’re using energy, emitting carbon and taking a toll on the planet. The good news is, by building more energy-efficient websites, you can help your agency, your clients and their customers be a lot more eco-friendly…
Can green websites really reduce our carbon footprint?
Absolutely. And the world needs more of them, fast. According to the Website Carbon Calculator, the average webpage produces around 0.5g of CO2 for every page view. That might not sound like a lot, but if your site gets 10,000 monthly page visits, that’s 60kg of CO2 per year. What’s worse is that bigger, more complicated sites need even more energy to load, emitting more CO2, every single visit.
All of this means that if you’re an agency looking after a whole portfolio of sites for a whole range of clients, their combined carbon footprint is probably much heavier than you realise. Taking a few simple, practical steps towards making your websites more energy efficient is a powerful way to contribute to a more sustainable internet, and a better protected planet. Want to know how green your website is right now?
Try the Website Carbon Calculator. It’s a great way to run a baseline check on the CO2 your sites are already emitting, before you start using our energy-efficiency tips to reduce it.
According to the Website Carbon Calculator, the average webpage produces around 0.5g of CO2 for every page view.
Why are greener websites great for agencies?
First and foremost, green websites help you reduce your environmental impact. And that’s never been more important. But along with that comes a whole raft of other benefits. Taking a more eco-friendly approach as an agency can help boost your reputation, showing clients you’re a thoughtful, principled team. With so many organisations looking to reduce their own environmental impact, offering green websites can also help you attract new clients – because as well as reducing your own carbon footprint, you’ll be reducing theirs.
It’s a story you can tell in your marketing, present in your pitches and remind people of in your retainers, giving people a real reason to choose you – and stick with you, long term. One of the best things about making your websites more energy efficient is that you’ll be making them perform better too. As you’ll see in our tips below, greener websites are generally better optimised, with faster load times and stronger SEO.
That means they’ll convert better, and do better business for your clients. Offering that additional layer of optimisation and energy efficiency is something you can also factor into retainers as an added-value service. So, what’s the best way to make your websites more energy efficient?
Eco-friendly hosting your clients will love.Our clients have seen their sites’ carbon footprints drop by up to 92% after switching to us.
5 ways to make your websites cleaner and greener
1 Optimise your images
If there’s one thing that makes a webpage heavier and more energy-hungry, it’s images. The more you use – and the bigger they are – the more carbon you’ll be emitting, every time someone visits. So what can you do to lighten the load
First things first, be fussy about the images you use. If they’re not adding value or communicating something useful, think about leaving them out. Secondly, compress your images by using file formats like JPEG 2000 and WebP – next-gen formats that load your images onto your site faster, helping to reduce energy use and CO2, speed up your site and save on server space.
You can also make your website’s images more green with caching tools like WP Rocket. They’ll cache each image the first time a user visits your site, so it’s loaded faster and uses less energy for the next visit (and the one after that).
On top of that, try lazy loading tools like Smush to optimise your images without losing quality or resolution. If you’ve got several images on a page, Smush works by only loading those lower down when the user actually scrolls to them, saving load time, resources and energy.
Using both WP Rocket and lazy loading is an easy way to instantly improve your PageSpeed score, enhance your SEO and boost your Core Web Vitals. Win, win, win. Plus, here at Nimbus, our servers can automatically load your site’s images using these formats – just flick a toggle to turn that functionality on, and we’ll use it every time.
2 Choose fast-loading fonts
The fonts you choose for your websites can make a big difference to how they perform, and how green and energy efficient they are. Of course, fonts play a big part in brand identity, so it’s important to balance site performance and sustainability with legibility, UX and branding.
One simple rule of thumb is, the fewer different fonts, the better. Not only will you get a clearer, more consistently branded site, but you’ll find it loads faster, and uses less energy.
But which font to choose? Well, they might not be the most visually exciting, but system fonts like Arial, Times New Roman and Courier are as green as you’ll get. They’re likely to be already available on every user’s device, which means the users’ browsers won’t need to make as many requests, they’ll use less resources loading fonts, and their server energy consumption will be reduced.
If they’re not the right fit for your site, Google Fonts is another green option. When you use its content delivery network (CDN), the code generated on its servers will automatically send the smallest file to every user, based on the technologies their browser supports. If Google doesn’t have the font you’re looking for, another alternative is Adobe Fonts – its CDN isn’t as fast as Google’s but it does give you acceptable, energy efficient load times.
If neither of these libraries has the font you need, you could consider serving your preferred font locally on your website. Just make sure you’ve got a CDN like CloudFlare or Sucuri to support it though, otherwise you run the risk of slowing your site down.
Choosing modern font types and formats is another simple way to optimise your site and make it greener. We recommend using WOFF (web open font format) 2.0 because it offers 30% better compression than earlier WOFF formats, so it helps your site run more efficiently. If you’re loading the fonts locally onto your site, these formats will be incorporated automatically into your font file.
You could also decide to implement a fallback font, which automatically appears if your first-choice font can’t load fast enough, perhaps because a user’s internet connection is too slow or their browser is too old. It’s a great way to make sure the user can always load a font that sits comfortably with your site’s branding, while avoiding bottlenecks and unnecessary energy use in the delivery of the site.
Finally, you could make a real reduction in loadtime – and the energy it takes – by removing third-party or add-on typefaces. That might mean removing a plugin that calls in its own fonts, or removing some built-in WordPress functionality. On our own Nimbus website, we cut out dashicons, saving 920ms on loadtime.
3 Prioritise UX and SEO
Generally speaking, the more user-friendly you can make your site, the greener it will be. Websites with minimal, uncomplicated designs that users can navigate with fewer clicks will be more energy efficient – as will sites designed primarily for mobile use. That’s because if people can quickly, intuitively navigate to the information they need, they’ll spend less time browsing, use less energy and emit less CO2.
For the same reasons, keep your copy clear and concise, make sure it’s well optimised so your pages have strong SEO and visibility, and keep UX at the heart of everything your site does. Google will love you for it, and the planet will too.
4 Use cleaner code
Keeping your code clean and tidy is a great way to help your websites load faster and use less energy. It’s also a good principle to adopt generally, making it less likely you’ll run into problems caused by cluttered code hiding under your sites’ surface.
Hunt out and remove any duplicated code, and compress everything you’re keeping using Gzip, a file format that minifies your code when it’s being loaded. Any line breaks and gaps will be reduced, helping each page appear faster. Get rid of unused CSS and unnecessary WordPress plugins and – once again – you’ll be improving your SEO at the same time as making your website greener.
Finally, if you’re building or maintaining a site that’s often accessed on users’ phones, or via Google Chrome, implementing AMP (that’s accelerated mobile pages) is a must. It strips out unnecessary code to load content faster on mobile devices, improving visibility and delivering a more lightweight, energy-efficient version of your site.
5 Go for green website hosting
Last but not least, one of the fastest ways to make your sites greener is by switching to green website hosting. Websites are hosted at vast data centres which use huge amounts of energy to transmit data, keep servers running and keep systems cool.
By switching to a hosting partner whose data centre runs on renewable energy, you can significantly reduce the carbon footprint of your sites. And if you’re not sure whether your current provider uses renewables, the Website Carbon Calculator can tell you.
It’s also a good idea to make sure your hosting company’s data centres are in the same country as your site’s users. That’s because, every time a user visits a website, the data they’re seeing has to travel to their device from the data centre where the site’s based. So the closer your data centre is to a site’s users, the faster the site will load, and the less energy it’ll use. Not sure where your current provider keeps their servers? Just ask.
If you’re already working with a green website hosting provider, running on renewables right here in the UK, you’re already making some great green choices. But don’t be afraid to push for a hosting partner that goes the extra mile. Here are a few all-important questions to ask:
- Are they carbon neutral, or currently offsetting their carbon?
- What sustainability measures have they put in place in their own offices?
- Are they measuring the impact they make on the environment?
- Does their hosting platform have energy-saving features like Cloudflare, WebP or Varnish Cache
And there you have it. Five ways to boost your website’s energy efficiency, and plenty of practical tips you can work through on your way to becoming a greener, more eco-friendly agency.
Further reading: Green Data Centres and How They Work