It can be easy to ignore the environmental impact of technology – the devices which take up so much of our lives just “exist” now – and they just “work” but a lot of people don’t really think (or care) about how. That’s fine – there’s a lot of things I don’t know (or care) about that other people research deeply and have a fine grained understanding of. I was thinking today though about losing out on a tender opportunity and how maybe I could have improved my chances of winning – and one thing that sprung to mind when looking at the winning bidders website was the prevalence of green on their site.
That gave me the idea to get writing about Green infrastructure and hopefully disseminate some knowledge that people will find useful, informative and (with any luck) make me look like I know what I’m talking about when it comes to environmentally responsible website design and development.
Website Hosting
This is going to be the biggie – so we should probably start here. Every website exists as a collection of files which are brought together to make something which people can browse. This collection of files needs to live on a “server” – which is just a computer that stays on all of the time. When people talk about cloud hosting, they are really talking about computers that exist in a data center which, sort of like a cloud, relies on large quantities of water. Very much unlike a cloud though a data center needs massive amounts of electricity as well as the water to keep the whole thing cool and running. This electricity has to come from somewhere so whether that’s coal power stations or solar panels your data center will be sucking juice from a grid.
Here’s two stats pulled from a bit of research around energy usage and data centers:
• The internet currently accounts for nearly 4% of global greenhouse gas emissions, a figure that rivals the entire aviation industry.
A data center can consume up to 5 million gallons of drinking water each day
• Data centers are projected to consume more electricity than Japan by 2030.
Which when you see the cold hard stats does really seem like a problem which needs addressing – both as a box to tick on a tender document but also as a good piece of corporate responsibility to genuinely help out the planet.
So how are we addressing this? All of our websites are hosted on either Amazon Web Services or Digital Ocean. Now I know what you’re thinking here – AMAZON?!? Well yes, as much as they aren’t perfect in many ways – they do have a comprehensive approach to sustainability as detailed here. Digital Ocean also has previously stated that their London data center is powered by 100% renewable energy, but the page which details this seems to now have been removed from their site. So by considering the hosting source we’re making a good start – but what else can be considered?
Website Complexity
Not all websites are created equal – some are absolute energy fiends while others are relatively passive in how they work. Without going into too much detail on how websites work there are two main parts to the majority of sites – the files and the database. With the vast majority of websites the files which are actually built by a developer are quite small – you’ll have a few base templates and then depending on where you are on the website it will load the files and essentially mail merge it with some placeholders to populate the content on the page. This allows content editors to make as many tweaks, changes and amends to the content as they like – and it means developers don’t have to build thousands of pages for a small website.
However – the process of running this merge of content from the database with the template files is quite energy intensive. Databases use a lot of energy so to query it every time you want to show a page is a real drain on resources – it’s far more energy efficient to just show a web page with all of the content already in it. So what’s the solution? Well it’s a cache of course…
Caching is the process of taking a page and creating a copy of it which will get saved somewhere else on the server. Now whenever anyone visits this page on the website instead of going through the whole process of looking up the content in the database the website knows to show the cached version of a plain file. As well as being more energy efficient it’s also much faster for the site visitor – which gives you a bit of a speed boost and will help with UX / SEO.
Page Weight – Images
Of course websites don’t have a weight in the sense of a physical weight, but in the same way I would describe a pint of Guinness as heavy compared to a lager, we can describe some web pages as being heavier than others. So what is weighing these pages down? Well it’s mostly images – if you take a picture on your phone or on a camera it will save the image at probably upwards of 4000px wide. This is great if you want to print it out – but for the vast majority of screens their maximum size is much closer to 2000px, and unless the image needs to go edge-to-edge on the screen it will likely be contained down to 1400px. So if you are uploading an image 4000px in size and it’s being scaled down to 1400px or smaller to show to the user that a massive waste in file size – and the larger the file which is being transferred the more energy it will use.
Another consideration for images is their meta data, for example
Technical Data (EXIF): Camera model, lens, exposure settings (ISO, shutter speed, aperture), date/time, and GPS location.
Descriptive Data (IPTC): Keywords, captions, copyright, and creator information.
Administrative Data: File name, file size, format, and resolution.
Edit Data (XMP): Non-destructive editing history (e.g., Lightroom adjustments).
All of this data can easily make your file far larger than it needs to be – so by simply stripping the meta data from an image before you upload it to the site can make a huge difference.
The final consideration to make with images on a page is whether the images need to be loaded. If you’ve got a logo file in your website footer and the page is loading that every single time a person visits your site but most people will only scroll down as far as half way then it’s needless to load the image on every page load. There used to be add-ons and bits of extra code that could be added into a website to make it so that only images that were on the screen were loaded – but this is now baked into the browser (as long as your web page is built properly).
Page Distance – CDNs
We’ve talked about caching files on your server – but what if we could take that a step further and cache them closer to the people who are actually viewing your website? That’s where Content Delivery Networks (CDNs) come in. Think of it like this – if your server is in London and someone in Australia wants to view your website, that’s a lot of distance for data to travel. Obviously data doesn’t rely on petrol, but there is an energy implication to move data from one location to another – and the further it travels the more energy intensive this can be.
A CDN takes copies of your website’s files and stores them on servers dotted around the globe, so when our Australian visitor loads your site they’re getting the files from a server much closer to them – maybe in Sydney or Singapore. This means less energy used in transmission, faster loading times for the visitor, and less strain on your main server because it’s not having to serve every single request from around the world.
One of the main CDN providers is Cloudflare (yes that Cloudflare of bringing the internet down fame) and they have stated that their infrastructure is 100% renewable which is good to know that by using them you’re not just offsetting the problem into someone else’s house.
Wrapping It Up
Here are just some of the things you can do to help bring your website emissions under control – there are more of course, but I don’t think anyone is particularly interested in the pros and cons of dark mode websites (unless you are, then please feel free to get in touch!) The main one is going to be to switch to energy friendly hosting, keep your image sizes down and make sure you’ve got efficient caching in place. Once that’s been done then it’s a case of looking at incremental gains to tweak things to an even better place than they are now.
If you’d like to get in touch to chat websites, energy efficiency or anything else really – drop me an email to [email protected] and I’d be happy to have a natter.