When I went to buy a ticket to the upcoming SaaStr 2016 conference, I noticed a design element that I have seen more and more of recently: silent, looping background videos. Why use a big glossy hero image when you can use a video!
Sure enough, SaaStr is using HTML5 video to play a minute long video. I looked at the source of the It’s an MP4 video (luckily optimized for streaming), and the HTML from the SaaStr site to embed it as a background video looks like this:
<video style="width: 100%; height: auto; position: absolute; z-index: -1;" autoplay="autoplay" loop="loop" muted="" width="300" height="150"> <source src="//3yq63w3tvb6c1innxc1hzsya.wpengine.netdna-cdn.com/wp-content/uploads/2015/06/saastr_event_bg_2016.mp4" type="video/mp4" /> <source src="//3yq63w3tvb6c1innxc1hzsya.wpengine.netdna-cdn.com/wp-content/uploads/2015/06/saastr_event_bg_2016.ogv" type="application/ogg" /> <source src="//3yq63w3tvb6c1innxc1hzsya.wpengine.netdna-cdn.com/wp-content/uploads/2015/06/saastr_event_bg_2016.webm" type="application/webm" /> <img src="https://www.saastr.com/wp-content/uploads/2015/04/annual_2016_bg.jpg" /> </video>
You can see the site is using the
style attribute so the video fills the entire background area, which makes sense. The
loop attributes also make sense, so the video will play continously without interaction.
But take note of the
muted attribute. This attribute tells the browser to just play the video and not play an audio. I guess this makes sense. This video is just used for background decoration. Sounds would be annoying. But here is what was strange: this video isn’t actually used anywhere else on the site. There is no other context on the site where this video would be played and it would need to have sound. So why would we ever need a
muted attribute? There is no reason for this video to have any audio tracks at all.
Audio Gets a Not-Free Ride
I downloaded the MP4 video file, and opened it in the VLC media player. Yep, when I played it, there was audio. A quick check of the “Codec Details” window showed me there was an AAC audio track included inside the MP4 video container.
Ick. So, this video file has an audio track, even though the audio is never used. This is, quite frankly, pretty silly. This is taking up space inside the MP4 file and wasting bytes. The contents of the MP4 video looks like the diagram on the left, when really it should just have a video track and look like the diagram on the right:
But how much space are we wasting? Well, the source MP4 video is 10.3 MB, which is a pretty good size. We know from previous posts that video content can be huge. So how much of the 10.3MB is the audio data? 1%? 3%? Let’s find out.
We can use the always awesome command line video tool FFmpeg to remove the audio for an existing video file. Unlikely the initial encoding of the video which is very time consuming and CPU intensive, removing an audio track is simply copying data or selectively not copying data to a new video file. This is an easier operation and faster task than the initial encoding of the video and will not alter the quality of the original video in any way. This will tell us exactly how much space the audio is taking up. Below is an example of using ffmpeg to optimize a video named input.mp4 by removing any audio tracks. The resulting video is named output.mp4
ffmpeg -i input.mp4 -an -c:v copy output.mp4
Turns out, the SaaStr MP4 hero video would be 20% smaller if you removed the audio track! 20% translated to over 2 MB smaller! And did you noticed the name of the host that is serving the video file? Its netdna-cdn.com, which is part of MaxCDN’s Content Distribution Network. This is the only resource served from MaxCDN, which immediately means that their CDN bill will be reduce by 20% if they properly optimize their video! At this point, leaving in an audio track on a video that never plays its audio has moved from being pretty silly to being pretty costly for everyone involved: SaaStr is paying for bandwidth and infrastructure it doesn’t need. Visitors like me are wasting time and data cap allowances by download an extra 2 MB that are totally unused.
I was so surprised by this, that I checked several other sites that used video hero images. Surprisingly, 80% of them had muted video’s which had an audio track! Stripping out the unused audio reduced these videos on average by 23%! Based on those findings, for our Splunk Customers, we have added a new check to Zoompf, our performance analysis product, which will detected when a site is using muted HTML5 videos which contain an audio track. Zoompf will also show you the optimization savings, and even let you download a copy of the optimized, audio-free video file so you can quickly resolve the issue. If you just want a quick check, you can use our Free Performance Report.
It’s easy to point and laugh when someone does something silly. However, I can understand how this performance mistake happened. The SaaStr folks made a cool video at some point. Then someone said, wow, this would be cool as a background. But no one thought to check to see what assumptions had changed about the video. It was made as a promo, so it had audio. But then they repurposed it as a background design element without checking what they needed to do to prepare it for that role.
In many ways, played muted video files that have an audio track reminds me of another performance issue: Resizing images in HTML. In that instance, a site will reference an image in HTML like this:
<img src="product-300x300.jpg" width="150" height="150" />
This image will be rendered as 150 x 150 pixels. But the actual source image is say, 300 x 300 pixels. The browser downloads a bunch of extra data, but isn’t going to display it. All because someone took one media resource, repurposed or reused it, but didn’t stop to check if it was appropriately produced or optimized for how they wanted to use it.
There are really 2 take aways from this post. Number 1: if you are using HTML5 video that is muted or used in the background, make sure it to properly prepare it and remove any unneeded audio tracks. However the second, more important lesson, is you always consider how each piece of content is actually used on your site, and optimize it for the best possible experience. Wait, does this video even need an audio track? Wait, why are we using 1080p video for this little thumbnail animation that never plays full screen? Is this JPEG a super high quality when it should instead “Export for Web”?
Once you start thinking about this approach, you’ll see opportunities for optimizations everywhere.