It's safe to say that since the internet appeared in our homes around 25 years ago, it has changed the world. Surfing the web has become an indispensable part of our everyday lives. As of 2021, there are over 4.5 billion internet users globally. While many of us spend several hours a day connected to each other online, we seem to be overlooking one important question: What's powering all these websites?
Every time we visit a website, we consume energy at various points – the data centers that host the websites, the networks we're connected to, and the devices we’re using all need energy. In fact, it consumes 416.2TWh per year – this equates to over 75% of the energy consumed in Germany annually.
In this article, I’ll walk you through ways to cut the CO2 used by your website.
1. Host your site on a sustainable server
There are countless hosting solutions out there that make it easy for someone with little to no technical knowledge to get a website up and running. However, people's primary concern when choosing a host is cost; we rarely consider the environmental impact.
Most of the servers that power the internet live in "server farms" – vast warehouses that physically house thousands of servers. Much like your computer at home, these servers generate a lot of heat, so air conditioning is used to prevent them from overheating, significantly adding to the carbon footprint.
So how can we host sustainably?
First, being more mindful of how efficiently we host our sites can help. If you need to host multiple sites, try to do so on as few servers as possible. It’s common practice to set up a new server whenever you need it, but the more servers you use, the more "real estate" is taken up in the server farm.
Having a server that is only as powerful as you need can also save on energy consumption. How much you need is a complicated calculation, but if you know what you expect your site the traffic to be, your hosting provider and/or a developer can help you make this decision. You can usually scale up or down if you need to.
Finally, choosing an eco-friendly hosting provider is a must when hosting a website. Eco-friendly hosting services will do one or more of the following:
– Purchase "Renewable Energy Certificates," which fund green energy.
– Use renewable energy to power their servers.
– Enact green practices at a company level; e.g., efficient hardware/software, home office for employees, and so on.
– Support green initiatives.
– Examples of such providers would be GreenGeeks, iPage, and GreenHost.
2. Only load what you need
The transfer of data is an essential part of the internet – it’s how we get videos, images, and any other data into our browsers. Unfortunately, in most cases, much more data is being transferred than is necessary. On traditional websites, all assets are loaded onto the page at once – images, scripts, videos – even if they aren’t visible to the user. In addition, these assets are not compressed or sized appropriately, resulting in bigger files being sent over the wire.
Fortunately, there are well-known ways to tackle these issues. The first would be to only load the assets when the user needs them; i.e., when an image is in the viewport or loading a script dynamically when a user clicks a button. Browsers have begun adopting this technique, known as "lazy loading," natively, making implementation much easier for developers.
As far as keeping file sizes down, it’s common practice to have a "build" step to compile a website. It’s at this point we should optimize our images and scripts to make them as small as possible while still maintaining decent quality.
Videos obviously require a significant amount of data – these are best avoided entirely if you wish to have a low-impact website.
3. Design for climate friendliness
If you've ever viewed a website on your phone and noticed it draining your battery, it's likely doing a lot of intensive work in the background. This could be CPU-intensive animations, complicated app logic, or simply inefficient code. Most browsers have excellent profiling tools for developers to help identify these issues, so investing in a developer with knowledge of this to optimize your site is beneficial.
Design also plays a part in power consumption. The colors on a computer screen are created by mixing varying intensities of red, green, and blue. When you see pure white on a screen, it’s actually all three colours at the maximum intensity – the higher the intensity, the higher the power consumption. That's not to say you should have no white in your designs, but consider using off-white as a replacement background color instead.. Many eco-friendly websites now have a "dark mode" option, which will use an alternative "dark" theme.
The internet would be a very boring place without animations, but think carefully about how and when they’re used. On most ecommerce/brochure sites, simple animations are more than adequate and won't require too much processor power to run.
4. Choose the right framework
The most efficient way to host a website would be a plain HTML document on a basic server, but if you need anything dynamic – a content management system (CMS) or ecommerce functionality, for example –- then you need a server running a programming language like PHP or Ruby.
The challenge of this solution is that the server needs to process every request before responding with the dynamic content – at the cost of computing power. There are ways to offset this with caches, but this introduces another server into the mix.
Luckily, in recent years a technique called "static site generation" has risen in popularity. Instead of generating HTML on request, as PHP and Ruby do, static site generators SSG make all the computations at build time and bundle the site into static HTML, which can be hosted on the most basic server and still perform great when exposed to high traffic.
At Battalion, we use a framework called Gatsby to accomplish this. The beauty of Gatsby is it provides a lot of the optimizations we need out-of-the-box: It resizes and compresses the images, it implements the lazy loading, and it minimizes script and styles. For the CMS, we still use WordPress – Gatsby pulls the content at build time – but we can run it on a low-powered server because it’s only being used to manage the content, not the front end. We can also host multiple clients’ WordPress instances on a single server, further reducing the carbon footprint.
Aside from the environmental benefits of low-impact sites, there’s another huge positive side effect: performance. Using the techniques mentioned in this article means the front end of the site will be blazing fast, which in turn boosts search rankings and conversions.
5. Get inspired
There are a growing number of sites out there that are cognizant of their environmental impact. Last year, Organic Basics launched a low-impact version of their website, complete with a "low-impact manifesto," which is well worth a visit.
If you’re wondering what the impact of your website is, you can visit www.websitecarbon.com. Enter your URL, and it will give you a detailed breakdown of the impact of your site, as well as some useful tips on how to improve it.
Examples of low-impact sites out there include Low Tech Magazine, Red Inc, and Eco Table. Consider joining them for your next project and contribute to a more sustainable and ethical future.
6. Offset your impact
Once you’ve implemented all CO2-reducing measures, you can also decide to offset the remaining climate impact of your website.
When choosing a program, make sure the project you decide to support adheres to the Gold Standard.
We hope you feel inspired by the opportunities to cut your web presence’s CO2 impact. At Battalion, we are currently restructuring our architecture to be more ethical and sustainable, and offering our clients “low-impact” solutions as part of our service offering. Get in touch with natasha@wearebattalion.com to find out more.
