How your website impacts the environment and what you can do about it
This article was written by Nathan Hambling, Founder and Director at Papaya Studio.
Introduction
As we strive for a more sustainable future, organisations and businesses of all sizes are adapting their practices to reduce carbon emissions. Transportation and energy consumption for both homes and businesses are typically the first areas targeted in this endeavour – and rightly so!
So why should we now be considering the carbon output of our websites? And why should it be made a priority in our organisations?
In this guide, we will uncover the importance of website sustainability in 2023. Not only from a carbon reduction standpoint but also for improving the efficiency of almost every element of a website. And, if you’re keen to embark on your own low-carbon web journey, then we’ve covered 10 tips to get you started.
What is web sustainability?
Web sustainability is a rapidly growing movement among businesses and developers to reduce the environmental impact of websites, optimising them for both speed and efficiency. But, you may be wondering- don’t websites exist in the virtual world as intangible beings? Well, yes… but also no.
Every online asset, from your website to those hilarious talking dog videos on YouTube, is kept in the form of data files stored across servers interconnected within vast warehouses. To remain functioning for everyone’s entertainment and productivity needs, these servers draw energy from the national grid.
The majority of energy we use to power the internet is generated from fossil fuels, thus it’s no surprise that the net has a carbon footprint. But, to put the scale of the problem into context:
If the Internet was a country, it would be the 4th largest polluter* – contributing up to 3.8% of the world’s total carbon emissions* – putting it on par with the aviation industry.*www.sustainablewebmanifesto.com *www.sustainablewebdesign.org.
Couldn’t we just switch to renewable energy and be done with it? Mostly, yes! Google and other large data centres have already taken this step. But web sustainability goes deeper than that. It’s not only about reducing the amount of energy used to load websites, but also making them faster and more efficient – leading to great user experience while saving on resources simultaneously. It’s a real win win situation.
In order to gain all of these wins, here’s how to get started.
How can you make your website more sustainable?
Before we make our website more efficient, let’s take a moment to measure its current carbon output with each page load. Even though this may appear daunting, due to the growth of web sustainability movements, there are now plenty of user-friendly tools available for us to use.
Tools for measuring a website’s carbon footprint
At Papaya-Studio, we use two tools to analyse a website’s sustainability. In the simple terms, these instruments measure how much energy is needed to transmit data from your server to a device (phone, laptop etc). To assess this accurately they take into account some key components such as code volume and the origin of power for the server (plus plenty more but let’s not get too deep right now).
Enter your website URL on the pages below to get your sustainability score:
Website Carbon Calculator
This is a fantastic tool for quickly understanding how your website compares to others. There are useful controls to simulate how much carbon is output based on monthly visitors, with illustrations to visualise the energy consumption in relatable terms (cups of tea and miles travelled in a car).
EcoGrader
Ecograder takes things one step further, measuring the efficiency of your website across three distinct areas. As a result, it’s an incredibly valuable tool for understanding what precisely makes a sustainable site. They also offer an actionable checklist to conquer—although some elements may be too complex for non-coders.
For more information about how these tools work, checkout:
www.websitecarbon.com/how-does-it-work/
10 Ways to reduce your website’s carbon emissions (and improve the user experience)
Have you figured it out yet? Lowering your website’s carbon footprint is all about decreasing the code needed for its operation and streamlining customer experience. Both of these steps help make your site faster, simpler to use, and more energy-efficient.
It should be mentioned that our guide is not limited to experienced developers – anyone from marketing managers to web-admins of any skill level can benefit from our advice. Plus, they work with most platforms (even though we specialise in WordPress). So, let’s jump into it!
1. Switch to a green host
This is the simplest and most effective way to reduce your website carbon emissions. Simply moving your website from its out-dated fossil fuel guzzling hosting provider to a lean, green, renewable energy machine will instantly improve your sustainability scores.
We use and recommend a green-host such as WP-Engine, which runs on 100% renewable energy! WP-Engine also lets you choose where you base your website. So if most of your customers are in the UK, a UK-based server will use less energy to distribute your website.
Benefit: Faster user experience on all devices, better protection of user data, +10 points for the planet.
2. Use a CDN (For international businesses)
CDN stands for a content delivery network. Simplified, this means placing copies of your website in data centres closer to your users. As we mentioned in the last point, the further away a server is from the user, the more energy it takes to send them data. Moving the data physically closer to the user makes a website load faster and use less energy.
Benefit: Faster global performance and greater security – Especially important for international E-Commerce sites where speed is critical.
3. Streamline the user experience
Streamlining the user experience of your website can help customers find what they need quickly and easily. With clear navigation, concise copywriting, and simplified pathways between products and pages, visitors don’t have to struggle through multiple screens just to find what they’re looking for – saving time as well as energy. A UX review is a great way to identify usability issues and make sure that users are able to complete their journey with minimal effort!
Benefit: Good UX brings a lot of benefits, such as more inquiries and sales, fewer support requests from customers, increased engagement with the content leading to a better return on investment in marketing. Plus let’s not forget reducing carbon emissions! The advantages are endless.
4. Optimise website image
The images on a website are usually the single largest files that are loaded, making up the majority of our website page sizes. Because of this, they’re one of the best opportunities to lighten our pages.
Where possible, we suggest reducing the number of images on a page. Ask yourself, is every image necessary? Does it improve the website experience?
To ensure optimal performance, images should be compressed with a tool such as TinyPNG before they are uploaded. Additionally, remember to size the image correctly – don’t use an image that’s 2500px for something like a 500px thumbnail!
Benefit: Better user experience by only including content of genuine value, plus faster loading times!
5. Use LazyLoad on images
By incorporating LazyLoading, you can accelerate your website and reduce energy usage – all while providing a better user experience. Instead of loading all images on the page upfront, as is traditionally done, this technique only loads the pictures that are visible in the browser window. Especially beneficial for mobile devices, it prevents users from having to wait an annoying amount of time before they’re able to interact with your site.
If you’re on WordPress, there are lots of free plugins which help you utilise LazyLoading.
(Platforms such as Wix or SquareSpace enable it by default).
Benefit: Website speed is vastly increased, and website carbon / per visit is reduced. Website’s feel quicker, even if they are rich in content.
6. Use fewer videos
Videos are excellent for communicating your message quickly and effectively. However, it comes at the cost of large file sizes and intensive computer processing to watch. Of course, use video when it’s necessary, but question if it is adding genuine value to the website or just being thrown in.
Are you able to remove a video background or video thumbnails without compromising too much? Further to this, avoid auto-playing videos since it can be intrusive, and force the user’s device to stream data, even if they don’t wish to view it.
Benefit: Fewer external file requests from your website, equaling better performance (+ 10 points for the planet).
7. Consider your fonts
While consistent branding across websites is essential, did you know that every weight and style of a custom font requires its own file to be loaded?
If you’re using Regular, Semi-Bold, and Bold fonts with italics – six fonts in total – that can easily add up to over 1MB of data! All of which must be loaded each time someone visits your site.
Consider replacing one or two with system fonts instead, which are already built into most machines. This way, there won’t be any need for loading font files.
Benefit: By utilising a system font, your written content will appear at lightning speed as there’s no need to wait for a custom font file. Those on slow mobile connections will be grateful and stick around while the rest of your website loads.
8. Remove unnecessary plugins and scripts
As organisation objectives evolve and your website grows, you will likely be adding new features. This can mean extra plugins, scripts, and code which all increase data transfer with each visitor. To ensure your website stays light and fast while still adhering to current goals, carry out a software audit at least every six months.
As teams and marketing plans change, old software can remain, causing unnecessary bloat and baggage being carried around.
Benefit: More plugins mean a slower website, worse security, and a higher risk of website instability. Plus, more carbon emissions per page load from software that may not even be needed.
9. Utilise caching
You may have heard the term “Cache”, but like most tech-words it remains mysterious.
Caching is essentially a way of storing important website files on a user’s device so that the next time they visit your website, those same files don’t have to be re-downloaded. So, when someone visits your site for the first time, caching will store things like logos and other static images on their browser; which means that if they come back to your site later on—they won’t need to redownload any of these elements.
Configuring your website caching is a developer level task, however many managed WordPress hosts, such as WP-Engine, include extensive file caching by default on.
Benefit: Aside from speeding up our experience dramatically, it reduces unnecessary data transfer and lowers server energy consumption. (You’re probably caching the theme of this article by now…)
10. Compress the rest!
We’ve given our website a thorough decluttering, but we can now take it one step further by compressing the remaining files. Just like compressing an email attachment size to make sending easier, zipping up our website’s elements will speed things up between server and browser. Moreover, you can explore Minifying and Combining files as another great way of cutting down on their overall size – blank spaces in code are removed while some may be bundled together for improved delivery time!
Tools like W3-Total Cache and WP-Rocket make these once complicated jobs manageable, however we’d still recommend getting developer support for this.
Benefit: Not only does this lead to faster website performance and lower user drop-off rates, it reduces energy consumption. Feature rich websites especially benefit from this process.
Wrapping things up:
Despite our best efforts, it can feel like the work we put into building sustainable websites doesn’t even make a dent in global carbon emissions. However, let’s put small changes at scale into perspective:
“Shaving off a single kilobyte (1KB) in a file that is being loaded on 2 million websites, reduces CO2 emissions by an estimated 2950 kg per month.”
This is the roughly the same as:
- Driving a Toyota Yaris for 18,670 kilometers. (158 g CO2 per km)
- 5 flights from Amsterdam to New York. (679 kg CO2 per flight)
- Eating 118 kg of beef (25 kg CO2 per kg of beef)
Source: https://www.dannyvankooten.com/blog/2020/website-carbon-emissions/
(The Developer of the Mailchimp for WordPress plugin with over 2 million active installations).
Although not all of us are getting 2 million website views, it is still important to consider the efficiency of our websites to stop needless carbon emissions. As business owners, developers, agencies and change makers, we should all invest in ways to optimise our sites – not just for the benefit of conversion rates, but in the interest of reducing the resources we consume along the way.
We have the ability to take action now, so why wait?
