5 terabytes for 30 seconds of homepage video
Why you shouldn't add a video at the top of your homepage
If you're interested in digital sustainability for websites, you might already know that videos can be problematic as they're so heavy compared to other page assets. Here's an example of how problematic exactly!
How we got here
Starting this month, we report on the digital emissions of the wagtail.org site. The total carbon footprint is on the order of 30 to 300 kg of greenhouse gas emissions per year. This is unsurprising for us as we already know how much care was put into making the site as accessible and fast as possible, and we're very proud of our ""perfect"" Lighthouse scores:
But if you dig below the surface, turns out things aren't so perfect after all! We had to go digging as part of our grid-aware websites project, to understand which additional optimizations are worth doing.
The homepage video
The wagtail.org homepage represents about 50% of the site's traffic. We have a video player above the fold on the page, of a 30s clip of Wagtail highlights. This is all pretty standard for this type of site, and the video isn't autoplay.
However, turns out this video still represents 94% of the site's bandwidth according to Cloudflare!
The numbers:
- It's a 84MB video.
- It uses 92GB of Cloudflare bandwidth over 7 days.
- That's 4.8 terabytes over one year 🤯
If we use the 1-byte model from Shift Project, this corresponds to 1.4 tons of greenhouse gas emissions per year. This model hasn't been revised in a while but it's a good indicator for video streaming in particular.
None of this is good, and we can clearly do better!
Immediate steps
Turns out the video file is much larger than it needs to be:
- It's 1080p despite only being displayed on the homepage at a height of 576 pixels at most.
- It's 60fps despite largely consisting of interactions with the Wagtail UI
- It's not encoded particularly efficiently.
Optimizing all of the above, we arrive at a 4MB video! That's a 95% reduction in file size, for very similar results for users.
Looking back at Cloudflare numbers after making those changes,
- The video is now 4MB.
- It uses 13.5GB of bandwidth over 7 days.
- That's still 700 GB per year 🥲
This still represents 200 kgCO2e per year, so there is room for further improvements!
Going further
We will take this even further with Rohit Sharma, our Google Summer of Code contributor looking into grid-aware websites concepts. There is a clear opportunity to enhance this with a "façade" pattern, displaying an image placeholder which would avoid any speculative preloading of the video until users interact with the element.
Or even remove the video from the page altogether, if we forecasted its loading would generate too much carbon emissions!
According to Rohit's current results, we foresee a possible 90% reduction in digital emissions for the most drastic optimizations we could put in place.