Web Performance Calendar

Video on the web can be a double-edged sword. Sites with autoplaying video report increasing engagement (who hasn’t stopped in their social media feeds to see what the video is about?), leading to longer website visits. However, if the video doesn’t playback quickly or smoothly, customers can become frustrated, and you risk alienating those same customers who should have been more deeply engaged.

There are a lot of different use cases for video delivery on the web. In this post, I want to address using background videos on the web, and how we can improve the delivery and playback of background videos.

Background videos are a great way to enhance the way your site delivers content – in addition to words and images, there is a motion in the background that can help your customers understand your services and why they should use them. But they can also go horribly wrong. The two biggest issues I have seen are:

1. Users scroll past the video before it starts. If they never see the video playing – the purpose of the video is lost.
2. BG video constantly starts and stops (stallis). Any time a video stalls, it initiates a context change, pulling the visitor out of the engagement you are trying to create.

So, what can you do to ensure that the video added to your website will play quickly and efficiently? Here are a few tips that can help speed your video delivery.

Alternate formats

Using the video tag and sources, you can supply different video formats. The webm format generally results in smaller files, so browsers that can support the webm format can deliver the video faster to the end user:

<video autoplay muted>
  <source src= video.webm>
  <source src= video.mp4>
  Your Browser does not support video.
</video>

Remove the audio track

As background videos and (looping “GIF” videos) generally do not play any sound, so stripping the audio track from the video can lighten 5-10% of the video tonnage.

For example, this is the ffprobe results from a background video:

It is an audio track, and it is playing at 192 KBPS that no one can hear. Removing this from the file would drastically reduce the file size and improve playback. (if you’d like to use ffprobe on a video, it is part of FFMPEG, and I have built an API at https://streamclarity.com/probe?url=<entervideourl>)

Tip: A silent audio track still takes up “space” in the video file. While it is true that empty data compresses really well, completely removing the audio track from the video file saves even more data. FFMPEG and other video editing tools can do this easily for you.

Poster tag: Remove the poster

In the video tag, you can supply a “poster” image that appears before the video plays. This file will be downloaded before (or concurrently with) the video, thus delaying video playback. It can also add a flash of the poster before the video starts, which can be disconcerting.

<video controls
  poster=image.jpg
  src=video.mp4>
</video>

In the example below there is a flash of a bunny on the poster image before the video starts.

Mobile downloads

If your background video is not going to appear on your mobile site, it is important to remember that the CSS property display:none does not also mean download:none. Your servers are still delivering several MB of video content to each of your mobile users. Solution: Use JavaScript to only show the video attribute for specific screen sizes. When I load this page with a smaller screen, no video plays, but I have 4.0 MB of video downloaded. When the width > 768px, a video begins playing in the background. Putting it another way: mobile users NEVER EXPERIENCE 41% of the content download on this page.

While you are at it – you could create a smaller version of the video for mobile, and use the same JavaScript to deliver the smaller video to mobile – improving the experience to your mobile users. It’s worth testing that the video still looks good in a portrait mode – you may consider a different crop of the video for mobile devices.

Watch the length

The length of the video does not actually affect playback start or the number of stalls. But it is important to remember that background videos are best suited for short “bite sized” consumption, and is probably not the right place for a 3-4 minute video of your products. (But, post that video in your page for those who are interested!)

Lower the bitrate

The bitrate of your video is measured in Megabytes per second – the amount of video that is used during every second of playback. To decrease bitrate – you can either decrease the dimensions of the video, or increase the compression (which has an effect on quality). Another important point to consider is that American cellular carriers throttle video playback to 1.5 MBPS on their networks (T-Mobile’s “BingeOn” and AT&T’s “StreamSaver” are examples). Having a video that can playback in under 1.3 MBPS (allowing room for other files) is essential to successfully stream on mobile in the US.

Test your Video playback

Finally, you should always test your Video playback. I have built StreamOrNot – a free tool that measures the startup time and stalling characteristics of any video online. You can use your favourite network throttling mechanism to see how quickly your video will start in different network conditions. If you find that your video takes too long to start playing, you can re-encode at a lower resolution, or increase the compression a bit – reducing the file size and allowing for a faster transfer of the video to the browser.

Video on the web does not have to be complicated, but there are some simple steps you can take to ensure that your videos can play back quickly to your users. By ensuring the bitrate of the video is low enough (by removing the audio track, lowering the dimensions and compressing the video), you can ensure that your background video will play back quickly and without stalls. Testing with tools like StreamOrNot can help you determine if the video will start up fast enough for your end users.