Sustainability for life, not just for Christmas

As part of our realisation that the internet actually plays a big part in the climate and ecological emergency, we have been looking for opportunities to learn more about how we can reduce the impact of websites that we build. There is no single answer, but a number of things to consider when building sustainable websites, with most of them having other very positive impacts on UX, page speed, bandwidth usage, hosting costs and data consumption.  

Our Christmas campaign, I Ain’t Buyin’ it presented a perfect opportunity for us to experiment with – and we hope the methods we’ve used can help you do the same on your sites. 

The first, and most important step to take when you want to reduce or increase anything; is to measure it. We used the Website carbon tool to benchmark some of our other sites. We then set ourselves a target to reduce our page weight, and this is how we did it:

• It’s a static webpage
• It’s built and deployed with Hugo which allows us to compile all of the assets into one single Gzipped file that is requested, and minimised images are referenced with one line of code, without losing maintainability as a developer. Because of the small size of the site we preferred this route to using Progressive Web App (PWA) tech; we’ve got the file down to 300KB so the bandwidth used is very small (especially once a browser has cached it).
• The only JavaScript is the Google Analytics code
• The video (coming soon!) lazy loads, rather than autoplays
• The Google hosted fonts are the last thing to load; to eliminate render blocking resources. Which means unnecessary resources like fonts are postponed to increase what we see the moment we load the page.
• Compressed PNGs with tinypng instead of using vectors
• We used Lighthouse too on the local code to get suggestions to further improve performance and optimisation
• The website is hosted on WP Engine which uses sustainable energy
• We’ve peer reviewed the code to further optimise it

What does that mean?

All of the above means that (based on testing) 0.35g of carbon will be produced when someone visits a page on the site. The worst that has been tested on Website Carbon is 190g, which is about the same as the amount of carbon emitted when making four cups of white tea (with cows milk). But we’re still looking at ways to reduce that even further!

This makes our site less polluting than 84% of the websites tested; which is pretty awesome. For reference, to date, about 60,000 sites have been tested.

And we’re not stopping there

We’re designing and building a widget to display on the page to show the statistics from the Website Carbon API. We’re going to commit that code to the GitLab project so others can use it too. This isn’t so we can show off how great we are, it’s so it starts a conversation about how polluting the internet currently is, and how that damage could be lessened if we all stuck to some fairly easy to follow principles. 

Please have a look at our code and see what else you think we can do!