Rainbow eye on screen

This is a series of diary entries about our journey to a cleaner site. You can check out our full Green For Good pledge here.

In this diary entry we are looking at pillar 4 of our pledge, “We’ll be smarter with images and video”. Data transfer is a massive contributor to a website’s carbon impact, so we’ve started looking at ways to reduce and eliminate unnecessary video and images on our website. We’ll also be investigating cleaner ways to manage and present content, including modern image formats and more.

Our hero video

13/12/2021- Laurent Bricknell- Technical Director

Video is a seriously carbon intensive format. Video files are essentially just images strung together, typically 24 or 30 images are shown per second. Although there are video formats that use clever techniques to compress the file size (often by updating only areas that change frame to frame) video files are always going to be larger and more energy intensive to host and serve up than still images that are compressed. 

Video also uses more compute power on the end user’s device, and so by replacing our hero video with an image we also save energy downstream. 

By simply removing our hero video and replacing with a still image instead we instantly make a dramatic impact to the size of our homepage, cutting the total page byte size by 75%! So, this has makes a huge reduction in the amount of data transmitted when someone visits our homepage, and therefore reduces our carbon impact. This one action causes a reduction of  1.86g per page visit. That’s a reduction of more than the average carbon produced on a webpage in total, which is a big saving. 

You can view the outcome reports below, we have included GT Metrix results as well if you want to dig a little deeper.

Pre Change: https://gtmetrix.com/reports/theorganicagency.com/6l5eAzG7/

Post Change https://gtmetrix.com/reports/theorganicagency.com/4Li52Cu9/

No more video autoplay

21/12/2021- Laurent Bricknell- Technical Director

In addition to removing this hero video we’ve also disabled autoplay on video across the site. While we could try and do away with video entirely the fact is that video is a useful content medium for us to use for case studies or to show off creative work. It works well for us from a marketing perspective, so we can’t ditch it entirely, but we can be smarter about how we use it. 

Autoplay is widely regarded as a UX sin, so stopping it improves accessibility and usability on our site, but it also hogs unnecessary bandwidth and causes a cumulative carbon impact, even if the user stops it after a few seconds or skims on by. 

When videos autoplay data streaming begins, which has a negative impact on your page size, performance, and SEO (because it negatively affects core web vitals) as well as using data. There is also research that shows users get frustrated with video that stalls or doesn’t load quickly, so autoplaying video causes all kinds of issues for users and your site.

Not autoplaying videos can reduce page size by more than 75% in most cases, as video has a much higher data density than image and text. Non-autoplay videos can still be enticing by displaying a compressed still frame of an interesting part of the video, thereby avoiding loading any further data until a user clicks and shows interest.

This approach is all part of the balancing act brands need to take when it comes to cleaning up their websites. Some brands will need lots of quality imagery and video to tell their story effectively, however they can be smarter about how they use them. 

We’ll be back soon with another update looking at another area we’ve tackled to improve our site. In the meantime you might be interested in this article on the carbon footprint of the Internet which contains some interesting facts.

Reducing & resizing images

4/05/2022 – Jessica Church – Marketing Manager

Our image optimisation game plan involved reviewing 275 images on our website and reducing their size. As part of that, we removed the hero video from our homepage and replaced it with a still image, condensing the page size from 3.85MB to 753KB. Next, we analysed the hero images elsewhere on our site, resizing them to reduce unnecessary data transfer.

According to GTmetrix, “for a good user experience, aim for a total blocking time (TBT) of 150 milliseconds or less”. TBT refers to how much time is blocked by scripts during your page loading process. We were already well within the optimal range, and following our changes, TBT has improved by 4 milliseconds (ms) – from 118ms to 114ms. 

Moreover, the structure score of our site – how it’s designed and the user experience it offers – has gone from 88% to 99%. Performance has risen from 74% to 81%, and LCP (how long it takes for the largest content element to become visible within your visitors’ viewport) has fallen from 2.0 seconds to 1.8 seconds.

Meanwhile, the time it takes to fully load content has dropped from 5.2 seconds to 2.7 seconds, and our overall GTmetrix Grade (an assessment of page performance) has gone from C to B.

Pre changes
Post changes

This approach is part of a balancing act: reducing our carbon impact while meeting marketing and sales targets. These aren’t mutually exclusive, and you can actually improve your ROI by cleaning up your website.
We’ll be back soon with another update, as we continue to work through our pledge. Other focus areas include condensing, compressing and eradicating pages where possible, and making our code more efficient where we can. In the meantime, here’s how we’ve been greening our website to the foundations.