How to make your website better for the environment: coding and hosting
It may not be something that crosses your mind when you’re scrolling through Twitter, binge-watching Netflix, or browsing a theatre’s What’s On page, but the internet takes a lot of energy to run. Some studies predict it could use as much as 20% of the world’s electricity by 2025.
The three main areas where your website uses energy are:
- server-side – storing your website and all its data;
- bandwidth – transferring that data from the server to an individual computer;
- in-browser – the processing power used by a computer to access and display a website.
In a nutshell, to be as sustainable as possible, we’re looking to create a website that uses as little energy (preferably renewable) as possible, while still doing its job – for organisations and for your audiences.
1. Framework ― your Content Management System
The framework forms the foundation of your website, and will likely be one of a handful of Content Management Systems (CMSs) – e.g. Drupal, WordPress, Craft. How sustainable an agency’s CMS of choice is may even be something you consider in the very early stages, before commissioning them. Some questions to ask:
How lightweight is your framework?
A big, bloated CMS wastes energy powering unnecessary processes. A lightweight CMS, which has only what’s actually needed added to it, however, is more sustainable. Both now, as it uses less energy to work, and into the future, as – put very basically – there are fewer things to go wrong.
Does your CMS handle images efficiently?
This is about how the CMS handles images for you. Size matters, so it’s important that images are scaled depending on the device they’re being viewed on. Are file sizes optimised automatically? Does the CMS resize large images to ones more appropriate to the web? Does it convert more energy-intensive traditional file formats to the most up-to-date variations, on the fly (assuming browser support)?
Is it secure?
The more vulnerable a system is (and often the more ubiquitous), the more likely it is to be attacked. Among a host of other negatives, this wastes lots of energy!
How often does it need updating?
Keeping everything updated to latest versions is good – it makes sure you’re using the best of the tech available. But, if your framework needs frequent ad-hoc updates, that’s more energy used. (Craft’s great as it gets updated in a considered, well-planned way.)
Is the control panel intuitive for website administrators?
Put simply – is it easy for you to use, and add content to? The quicker and more efficient administration tasks are on the website, the less energy will be used. (And all that saved time can be spent on fun stuff – like creating great, sustainable, content.)
All of the above are included in the many reasons why we, and our clients, love Craft CMS. (It’s also one of the most accessible content management systems in the world!)
I absolutely love the assets section! It’s so much easier and faster than our old system … I’ve literally bulk uploaded all images for one section of the website in two minutes – this would have taken me about two hours on our old website!
Craig Russell – Marketing and Sales Officer, Oxford Playhouse
(on their move to Craft CMS)
2. Custom code ― the extra functionality added to your CMS
The basic framework of a CMS is unlikely to offer you all of the functionality you need. And certainly not the visual design to match your brand. So, the developers at your digital agency will need to add additional, custom code to create your website. Some questions you might like to ask them in terms of sustainability …
Do you write reusable code?
Carbon emissions come not just from a website itself but from the team who created it. So, for functionality that’s common across many websites, reusing some or all of the code for that functionality – across many websites – is not only more energy efficient (as it’s only written once) but also easier to maintain, and more cost-effective as it saves time.
Do you use an agile development process?
Agile processes rely on quickly reviewing and responding to changes, which is (usually) a more efficient approach than extremely detailed up-front planning of every element within a project. But an agile process must be properly managed, in order to avoid ‘technical debt’ (i.e. things that will need to be fixed at a later date), leading to more work i.e. more code i.e. more energy expended in the long run.
Will the website follow web standards?
This means the website uses tried-and-tested principles that create high performing websites, which work well across different devices and platforms. Following standards can also help your project adhere to the KISS principle – avoiding the temptation to over-engineer. (Rather than trying to please everyone, interrogate your data and concentrate on making a website that works brilliantly for the majority of users, rather than trying to do everything for everyone and ending up with something mediocre.)
Do you use Progressive Web App technology?
This allows certain content to be cached on a user’s device, meaning it hasn’t got to load again when they next visit the same page. Reduced data load also means your website will be faster, leading to a better user experience.
How familiar are you with third party integrations?
If your website needs to integrate with, say, a ticketing / CRM system – such as Tessitura, Spektrix, Ticketsolve – web developers with previous experience working with those systems are likely to be more efficient. This goes for other integrations too, whether it’s a third party fundraising platform, or an event hire tool such as Yesplan.
Quality is key. When a website is built properly – no corners cut, or hacky fixes applied – the more sustainable it’s likely to be. (As well as being more accessible, quicker-loading, more user-friendly, more SEO-friendly – all the wins.)
Wow. The website, availability viewer and enquiry ‘tool’ all look amazing & very user friendly! Nice job done!
Wouter Vermeylen – Managing Director, YesPlan
(on Supercool’s lightweight integration with MAC’s website)
3. Services ― All the other technical things
You’ll be needing to use other services and tools to make your website as useful and usable as possible. Each of them will add to your website’s carbon footprint, so need consideration.
Hosting
- Use a hosting provider with a low Power Usage Effectiveness (PUE) score. PUE is the measure of how energy efficient a data centre is. The ‘perfect’ score is 1, with a typical score being more like 1.67 – but the lower, the better.
- Find a hosting provider powered by renewable energy sources. 100% green UK hosting providers include the likes of Kualo and Krystal. There is a balance to be struck, however, between how green your hosting provider is, and making sure it provides a secure, robust infrastructure that’s suitable for your needs. Whether we use a green hosting provider or not, something we can all do is lobby the biggest hosting providers to switch to renewable energy; helping to make it the industry norm.
- Store your data close to your users. The further data has to travel, the more energy is used. For international web traffic this may not be possible so …
- Use a Content Delivery Network (CDN). You may have heard of services such as CloudFlare and Fastly. They have data centres linked-up all over the world, so are able to serve data as locally as possible to the person visiting your website. That speeds-up delivery. Catastophic issues with CDNs aren’t unheard of, but are thankfully rare.
- Block bad bots! Any traffic to the website uses energy; that includes bots that’re up to no good. Blocking them both reduces energy consumption, and improves security.
- Cache the most visited pages of your website. Using a service such as Varnish to pre-build static versions of your pages reduces the amount of processing energy required to load them. Be sure to do this in a considered way, however, as you need to balance speed and energy efficiency with making sure users get the most up-to-date content.
Something we can all do is lobby the biggest hosting providers to switch to renewable energy; helping to make it the industry norm
Fonts
The fewer the better! As mentioned in Sustainable web design tips, font files are surprisingly large. It takes a lot of code to make the characters you’re reading now look like this. So, be sparing with the number of different fonts, and font weights, used on your website.
Make sure your developer is using modern web font file formats. WOFF and WOFF2 add more compression than formats like OFT and TTF. Smaller file sizes use less energy.
Tracking
Avoid tracking user behaviour unnecessarily. Tracking and advertising scripts don’t tend to be written to be nice and efficient. Tracking user behaviour involves a fair bit of energy; plus it can negatively impact user experience. So, be mindful to only track what you need to, and are collecting data in the least invasive, most efficient way possible.
Search Engine Optimisation (SEO)
Good SEO is good for people, and the planet. The easier and quicker it is for users to find what they’re after, the less energy is being used. Good website information architecture helps users as well as search engines, and a good modern CMS like Craft includes features that help you improve SEO. There are also things you can do SEO-wise related to your content …
This resource was first published on the Supercool blog.
Browse related resources by smart tags:
Digital engagement Environment Sustainability Sustainable Website Website accessibility
Except where noted and excluding company and organisation logos this work is shared under a Creative Commons Attribution 4.0 (CC BY 4.0) Licence
Please attribute as: "How to make your website better for the environment: coding and hosting (2022) by Katie Parry supported by The National Lottery Heritage Fund, licensed under CC BY 4.0
