From Zero to Hero: How we improved our Website Carbon Rating from a D to an A

At HdK, we’re committed to sustainability and reducing our environmental footprint. Our servers run on renewable energy and we’re passionate about minimising the digital carbon footprint for both ourselves and our clients. Recently, we embraced the challenge of improving our website’s carbon rating, aiming to elevate it from a D to an A, as measured by the well-established website carbon rating system.

Here’s a closer look at the steps we took and the improvements we saw across the site.

How We Did It

1. Lazy Loading our assets

Lazy loading is a common web development practise that only loads the items currently on your screen, meaning new images and content blocks only load when you scroll down to them. This approach allows us to cut down on initial load time and data transfer, making everything faster and more efficient. It also benefits users with slower internet connections by improving page performance.

2. Lazy Load Plugin for Video Embeds

Videos require a lot of data to be loaded into the user’s browser, but if users haven’t clicked play, there’s no need to load them right away. We use YouTube to display our Webinar recordings and sought a simple way to only load these when users choose to play them. Thanks to the Lazy Load Plugin from Beleaf, our videos only load when necessary, conserving bandwidth and reducing data transfer for all our visitors.

3. Minimising and Combining JavaScript Assets

Javascript is a programming language that’s used on almost every modern website, making web pages interactive and dynamic. The more interactivity you have, the more code you have to write and load. Traditionally, jQuery has been a popular framework for handling common JavaScript functions, like opening and closing menus. However, developers are increasingly turning to ‘vanilla’ JavaScript for these tasks. This shift is because jQuery requires loading the entire framework, rather than just the specific functions needed. In our efforts to minimise our Javascript usage, we reduced our site’s reliance on jQuery and began combining all our custom scripts. This resulted in having to load less code to each user, meaning a faster loading website. While we have seen an improvement in site speed, we also believe that over time, this will improve our Google rankings as pagespeed is a core SEO metric.

4. Converting All Images to WebP

We switched all our images to WebP format. Why? Because WebP images are between 25% to 34% smaller than their equivalent JPEG format – and still look great! By reducing the amount of data needed to load each image (and we use a lot of images) we significantly improved our load times while still maintaining our existing website design.

5. Removing Unused Trackers

We did some spring cleaning and removed our inactive trackers. While generally considered small files, these cookies were unnecessary in our marketing efforts. This not only improved user privacy but also reduced needless browser requests to these tracking platforms.

7. Replacing GIFs with WebP Images

We swapped out our GIFs for new WebP images. We felt the animations, though nice, weren’t adding to the user experience of our website, especially once we found that these GIFs were significantly increasing page load times. We hope to reimplement animation in the future, but through newer and more efficient technologies like Lottie animations.