“In terms of greenhouse gas emissions, internet use accounts for 3.7% of global emissions, i.e. the equivalent of all air traffic in the world. And this figure is expected to double by 2025” - Energuide.be
Environmental sustainability is rapidly rising up the priority list in 2022 as individuals and corporations become increasingly aware of the impact they, and their businesses have on the environment. Many of us are already thinking about sustainable hosting options for our sites, whether that’s running on renewable energy sources or offsetting some, or all, of their carbon emissions. But as we know, this isn’t always possible. Clients often want to use specific hosting platforms because of security or budget restraints, or you might belong to an agency, where you have a dedicated infrastructure team that deals with hosting. So what can we do to make our websites environmentally sustainable and reduce the impact on our environment?
Throughout the journey of using a website, one of the major energy vampires that is often overlooked, is the power-hungry device the user is viewing your site on. Mike Berners-Lee’s 'How Bad Are Bananas? The carbon footprint of everything' calculated using your mobile phone for an hour a day could emit 63kg CO2e a year. (That's approximately the same amount absorbed by 3 mature trees in a year!) Unlike hosting, we have no influence over whether the end user is using a green energy supplier or running their device off a portable petrol generator next to a glacier...
All is not lost. There are considerations an eco-developer can make to combat a website's environmental impact. We can help reduce the amount of time someone spends on their device to view our website. Radical, I know, but stick with me, I am not going against our intention of keeping a user engaged. The goal is that users are engaged and find what they are looking for efficiently, NOT meaninglessly searching for content, wasting valuable time, because of poorly thought-out UX. “52% of users said that a bad mobile experience made them less likely to engage with a company.” - Impactplus.com
Front end / Designers / Content editors
Let’s start from the beginning: the design. An intuitive design, that empowers users to find the answers they came to your site for, will help reduce not only the amount of time they’re on the site but also the number of new pages they are requesting from the server. This will reduce the environmental impact by reducing the amount of time spent on the device waiting for pages to load, it also improves the user’s experience. An additional benefit is the reduced load on your server, speeding up the site for all users and helping decrease server emissions as an added benefit. “A 0.5 second delay in load time resulted in a 20% drop in traffic for Google’s search page.” - Marissa Mayer, ex-Google VP. However, this task is not solely down to the designer. Content editors will need to team up with their designers to create both an intuitive and easy-to-use experience that contains meaningful content for their users.
This is not all designers and front-enders can do to reduce the impact on the environment. Do you really need that HUGE hero banner on every single page? There are many great use cases for a big hero banner and it’s a great way to grab people’s attention, but do you need one on every page? What alternative eye-catching designs can be used that doesn't require such large server requests with each and every click? If it is not contributing to the content on the page in any way, or aiding the user and is purely for visual design, consider if it could be swapped out for something else. Could the same effect be achieved with a vector graphic or a CSS style instead?
Back end / Infrastructure
We can also tackle server request sizes from the back end. When was the last time you or your clients checked some of your analytics data? There is a great tool called Builtwith.com where you can enter a URL and see all of the tracking codes a site uses. Check on your own sites and client sites what tracking codes are used and challenge yourselves to see if they are really necessary. Tracking is an invaluable tool if it is being used, but if no one ever checks it, it can be bloating server requests with every single click.
However, if you do need tracking, there are still things you can do to reduce the size of the requests made. Some clients may need Google Tag Manager (GTM) so they can manage their own tags, but if they just use a regular Google Analytics (GA) tag that never changes, then loading this directly could reduce the size from 75kb with GA through GTM, to 17kb loading the GA tag directly. That is up to 58kb saved with every new page load! (This is according to data from Tom Greenwood: A sustainable web for everyone and based on universal analytics so size may differ as we move over to GA4.) You could also add a toggle into Umbraco so that clients can just turn on social media tracking when they are running campaigns if getting rid of it completely isn’t an option.
These are just a few of the myriad options available to reduce request size, but you could also consider:
- Minifying JS/CSS
- Serving images in next-gen format
- Automatically compress images
- Optimise image size to match the viewport
- Do not autoplay videos on load
- Avoid images that don’t improve your content
- Remove Third-Party integrations that are no longer needed
Conclusion
In summary, there are lots of things all of us can be doing to improve the sustainability of our websites. Not everything that I have written about here is possible for every site you build, nor should it be; the internet would be pretty boring if every site was static text on a page. But hopefully, you’ll have more things to consider next time you’re building a website and you might stop and think ‘what would Greta do?’ before inevitably adding a huge hero banner at the client's insistence. Merry Christmas!
P.S.
I’ve only really scratched the surface on a few simple but high-impact changes you can make to your sites. If you are interested in reading more about this there are tons of resources on how you can make every step of your users journey more sustainable that I will list below.
A great tool you can use to view data about how sustainable your site is compared to others, as well as the impact and how much CO2 emissions could be saved by moving to renewable hosting is Websitecarbon.com. This site provides some great data and insights that you could use to convince a client of improvements that could be made to their site that will benefit them and the environment!
Tools/Further reading
GreenIT-Analysis Chrome extension
