According to HTTPArchive, sites went from an average of 2,135Kb to 3,034 KB in the two years from July 1, 2015, to July 1, 2017. Videos are a major part of that. The average web sites video weight grew from 204 Kb to 729 Kb over the same two year period. The “Low hanging fruit” of performance used to be optimizing images. Now it’s both images and video.
My optimizing video rules:
If possible, omit videos
The best way to optimize is to remove unneeded content and un-needed requests.
Do you really need a hero video? Do you really need it on the mobile version of your site?
You can use media queries to avoid downloading the #hero-video on narrow screens.
@media screen and (max-width: 650px) {
#hero-video {
display: none;
}
}
Compress all videos
Most video compression efforts involve comparing adjacent frames within a video and removing details that are the same in the original and subsequent frame. You want to both compress the video and export it to multiple video formats, including WebM, MPEG-4/H.264 and Ogg/Theora.
The software you used to create your video likely includes the ability to optimize the file size down. If not, there are several online tools, like FFmpeg, discussed below, that can help encode, decode, convert and perform other forms of magic.
Optimize <source> order
Order from smallest to largest. For example, given three video compressions at 10MB, 12MB, and 13MB, but 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>
In terms of the order, the browser will download the first video source it understands, so let it hit a smaller one first. In terms of “smallest”, do make sure that your most compressed video still looks good. There are some compression algorithms that can make your video look like an animated gif. While a 128 Kb video may seem like better user experience than having your users download a 10 MB video, putting a grainy gif-like video behind your content may also negatively impact your brand.
See CanIUse.com for current browser support of video and the various media types.
Remove audio from muted heroes
Lastly, if you do have a hero video or other video without audio, remove the audio from your video file. Remove audio that is muted
<video autoplay="" loop="" muted="true" 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, common to many conference websites and corporate home pages, includes a video that is auto-playing, looping, and muted. It contains no controls, so there is no way to hear the audio. The audio is often empty, but it is still present. It is still using up bandwidth. There is no reason to serve the audio along with a video that is always muted. Removing the audio can save 20% of the bandwidth, which is 2 MB if your video is 10 MB.
Depending on your video making software, you may be able to remove the audio during export and compression. If not, there is a free tool called FFmpeg that can do it for you with the following command:
ffmpeg -i original.mp4 -an -c:v copy audioFreeVersion.mp4
FFmpeg bills itself as the “complete, cross-platform solution to record, convert and stream audio and video,” which it pretty much is..
