Guideline
Tips to make a sustainable website, Part 2: Tracking tech
On a mission to make digital cleaner, we’ve written this series of posts to act as a guide for designers, developers, and creators, and help them to reduce the carbon footprint of their work. The guide includes minor changes such as resizing images, to full workflow reworks for static site generation. In this post, we’ll touch topics such as choosing and managing your analytics services, storing data, and going for a Jamstack approach .
Use only crucial third-party tools
To keep track of your user and their behaviour when visiting your site you are likely using services such as Google Analytics, Matomoto, Hubspot, Hotjar, Facebook pixel, or a combination of them. While the services are offered by a range of different companies, they all have something in common: they all require additional external code to be loaded and parsed on a website1. As you may have gathered from our first article external assets can take a toll on the overall energy usage of your website. In this case, the tracking technologies also require significant amounts of data to be sent back and forth between your site and their service in order to function. As a result, it is important to consider just how valuable these data points are for you, and also what greener alternatives, such as Plausible, you could use instead. For example, Plausible’s analytics script weighs less than 1 KB, which is 45 times smaller than the Google Analytics Global Site Tag!
Store data locally on devices
If you have holiday home, it’s always nice to be able to leave some of your stuff at each place, rather than having to constantly drag it everything backwards and forwards from home to holiday and back again. Things like your furniture and books, board games and clothes, and so on. The same can be said for websites. When possible, it’s nice to leave some extra load on a users device rather than having to load all of your data each and every time. With new web technologies such as Service Workers you can store most of your HTML, CSS, JS and other static files on the user’s device. This is a great way to minimise data transfers after the first visit, and thus reduce your carbon footprint. You can learn more about Progressive Web Apps (PWAs) here, as well as other optimisation techniques.
Compute as little as possible
Most of the websites have content that isn’t changing that much, so there’s no need to actually compute the whole website on every request. As we will talk about in an upcoming blog post, a lot of dynamic websites are processing sizeable amounts of data on every request. However, this can be avoided by simply saving that information statically. Jamstack is an architecture designed to make the web faster, more secure, and easier to scale. The core principle of this technique is pre-rendering, where the entire front-end is prebuilt into highly optimised static pages and assets during a build process. By pre-rendering, websites can be served directly from a CDN1. You can find more about the Jamstack approach here.
We hope that you’ve find this article useful in helping you to reduce the carbon footprint of your website. If you’d like more tips, have a look at our other posts of this series: Size Matters and Managing and Monitoring Power Consumption. If you’ve been following our journey, you’ll know by now that we’re just at the beginning of our Sustainable Digital Design journey. Keep checking back regularly as we share more of our discoveries and creative solutions for sustainable digital design and development techniques.
Written by Maarten Vleugels and Gwen Bogaert
24 January 2022