Multimedia: video

For the average website, 25% of bandwidth comes from video. Optimizing video has the potential for very large bandwidth savings that translate into better website performance.

The sections below describe the following optimization techniques:

• compress all video
• optimize <source> order
• set autoplay
• remove audio from muted video
• optimize video preload
• consider streaming

Most video compression work compares adjacent frames within a video, with the intent of removing detail that is identical in both frames. Compress the video and export to multiple video formats, including WebM, MPEG-4/H.264, and Ogg/Theora.

Your video editing software probably has a feature to reduce file size. If not, there are online tools, such as FFmpeg (discussed in section below), that encode, decode, convert, and perform other optimization functions.

Order video source from smallest to largest. For example, given video compressions in three different formats at 10MB, 12MB, and 13MB, declare the smallest first and the largest last:

<video width="400" height="300" controls="controls">
  <!-- WebM: 10 MB -->
  <source src="video.webm" type="video/webm" />
  <!-- MPEG-4/H.264: 12 MB -->
  <source src="video.mp4" type="video/mp4" />
  <!-- Ogg/Theora: 13 MB -->
  <source src="video.ogv" type="video/ogv" />
</video>

The browser downloads the first format it understands. The goal is to offer smaller versions ahead of larger versions. With the smallest version, make sure that the most compressed video still looks good. There are some compression algorithms that can make video look (bad) like an animated GIF. While a 128 Kb video may seem like it could provide a better user experience than a 10 MB download, a grainy GIF-like video may reflect poorly on the brand or project.

See CanIUse.com for current browser support of video and other media types.

To ensure that a looping background video autoplays, you must add several attributes to the video tag: autoplay, muted, and playsinline.

<video
  autoplay=""
  loop=""
  muted="true"
  playsinline=""
  src="backgroundvideo.mp4"></video>

While the loop and autoplay make sense for a looping and autoplaying video, the muted attribute is required for autoplay in mobile browsers.

Playsinline is required for mobile Safari, allowing videos to play without forcing fullscreen mode.

For hero-video or other video without audio, removing audio is smart.

<video autoplay="" loop="" muted="true" playsinline="" id="hero-video">
  <source src="banner_video.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="web_banner.mp4" type="video/mp4" />
</video>

This hero-video code (above) is common to conference websites and corporate home pages. It includes a video that is autoplaying, looping, and muted. There are no controls, so there is no way to hear audio. The audio is often empty, but still present, and still using bandwidth. There is no reason to serve audio with video that is always muted. Removing audio can save 20% of the bandwidth.

Depending on your choice of software, you might be able to remove audio during export and compression. If not, a free utility called FFmpeg can do it for you. This is the FFmpeg command string to remove audio:

ffmpeg -i original.mp4 -an -c:v copy audioFreeVersion.mp4

The preload attribute has three available options: auto|metadata|none. The default setting is metadata. These settings control how much of a video file downloads with page load. You can save data by deferring download for less popular videos.

Setting preload="none" results in none of the video being downloaded until playback. It delays startup, but offers significant data savings for videos with a low probability of playback.

Offering more modest bandwidth savings, setting preload="metadata" may download up to 3% of the video on page load. This is a useful option for some small or moderately sized files.

Changing the setting to auto tells the browser to automatically download the entire video. Do this only when playback is very likely. Otherwise, it wastes a lot of bandwidth.

Video streaming allows the proper video size and bandwidth (based on network speed) to be delivered to the end user. Similar to responsive images, the correct size video is delivered to the browser, ensuring fast video startup, low buffering, and optimized playback.

Optimizing video has the potential to significantly improve website performance. Video files are relatively large compared to other website files, and always worthy of attention. This article explains how to optimize website video through reducing file size, with (HTML) download settings, and with streaming.

• Previous
• Overview: Performance
• Next