In my Optimizing HTML5 Video presentation, sharp eyed readers may have noticed I mentioned some performance optimizations in passing about video sizing, quality, and bitrates, which we haven’t discussed on the Splunk blog before. A brief note on a slide doesn’t fully convey the full reasoning or benefit of these optimizations. So today, I will talk about 3 additional ways you can optimize your site’s HTML5 video performance with proper sizing, quality, and markup.

As we will see, you can detect these additional performance issues manually fairly easily. However, for our Splunk customers, we have added three new checks into our performance analysis product Zoompf, so you can automatically detect if your site has these performance issues.

Avoiding Reflow by Specifying Video Size

A well known optimization is specifying the width and height attributes of an image. This speeds up page loading in 2 ways. First, the browser can render the page faster since it knows the size of an image ahead of time and can leave space of it, avoiding additional repaint and reflow events. The second reason is a psychological effect: The page “feels” faster because sections of the page don’t keep moving and shifting around as content downloads and the browser must reflow and relayout the page. The diagram below shows how the browser must reflow and re-render a page if the width and height attributes are not specified. The scenario on the left side of the diagram is slower than on the right, where the browser leaves space for the image:

reflow

The same optimization applies to <video> tags as well. Here is a real world example, where there are 3 separate <video> tag towards the bottom of the document which don’t specify the width or height. If you reload the page and scroll to the bottom, you will see the browser has to reflow and re-render the page 3 different times, as the browser downloads each of the 3 videos, determines their dimensions, and redraws the page to make room. By specifying the dimensions ahead of time in the HTML or CSS, the browser can leave room for the videos, allowing it to render the page faster and tricking your brain into think the page is even faster.

Optimization: Always specify the width and height of a <video> tag, either with width or height attributes or with CSS.

Avoiding Oversized Videos

There is another HTML video optimization related to size and dimensions: don’t use oversized videos. Consider this real world site, HTML5Media.info. It is playing an HTML5 video, and the abbreviated HTML it is using is shown below:

 <video class="video" poster="//media.html5media.info/poster.jpg" preload="" controls="controls" width="618" height="347"> <source src="//media.html5media.info/video.mp4" /> <source src="//media.html5media.info/video.ogv" /> </video>

Notice the <video> is using the width and height to tell the browser to render the video at 618 by 347. This is a good thing, they are following the performance optimization we talked about above. However, if you actually download the MP4 video and look at it, you will see the dimensions of the video are actually 864 by 482. The diagram below shows what is going on: The video file is larger than the dimensions the browser is using to display it.

video-oversized

This is a performance issue for 2 reasons. First, the browser has to do more work since it must scale each 864 x 482 video frame down to a 618 x 347 frame, in real time. Second, the browser is downloading all the data of a higher resolution video, only to not really need that data since the browser is scaling the video down to a smaller size.

How bad is this? Well, A 864 x 482 video frame has 94% more pixels than a 618 x 347 video frame. This means a 864 x 482 video has nearly double the amount of data as the 618 x 347 version. In fact, when we see how much larger the video is by using FFmpeg to resize the video to 618 x 347. The original 864 x 482 MP4 file was 4.3 MB, while the properly sized 618 x 347 MP4 video is only 2.7 MB, which is a savings of 40%!. If the site really wants to show the video at the smaller size, they should resize the video to match the dimensions of the video tag.

Optimization: Always make sure that the dimensions of the <video> tag match the dimensions of the video file. This can be especially tricky on responsive sites.


Splunk Observability Cloud is an all-in-one monitoring and optimization solution that delivers actionable insights on 40+ metrics. Sign-up for a 14-day free trial. 


Matching Video Quality Across Formats

In a previous blog post, I talked about how sites often include multiple different video formats like MP4 or WebM for browser compatiability reasons. Browsers look at each <source> tag in order, and select the first video format they support. In that post I talked about how you can leverage this into a performance optimization by making sure that the smallest video file is listed first.

When using multiple video formats, whether for browser compatibility or performance, you should ensure that all the videos were exported at roughly the same level of quality. Lets look at a real world example, ironically enough, from a web performance company’s website.

Headspin.io is using a muted HTML5 video as a pretty impressive hero image. We’ve seen this design pattern before, and luckily Headspin has optimized the video by removing the any audio tracks. Looking at the HTML source, we see they are using both WebM and MP4 video files, and they are listing WebM first:

headspin-source

This is great, since any browser that supports WebM will use that over MP4. Since MP4 is so widely supported, ideally the reason to put the WebM file first is it should be smaller than the MP4. Let’s download the files and check their sizes:

video-size-only

WOW! The WebM is 2.9 MB, but the MP4 video is a staggering 24 MB! That is insane! Any browser that doesn’t support WebM, such as Internet Explorer, will download the 24 MB video, all so Headspin can have a nice looking background. We can see what that looks like in the image below:

ie-loading-video

Why on earth is the MP4 video 10 times the size of the WebM video? To understand what is happening, we need to know that video is often a tradeoff between size and quality. The larger the size of a video file, typically the better the quality. Of course, this is where different video compression technologies come into play. WebM and MP4 can encode the same original video, and produce videos that are different sizes, but that both look roughly the same in terms of quality. In fact one way to measure of how “good” a video codec is, is whether it can make a video file smaller while still “looking” the same as other video codecs.

The point of specifying multiple video formats for an HTML5 video is to ensure that the video plays on the most devices. In other words, we targeting a specific level of quality, and want all of our different video formats to look roughly the same. As a consequence, while we can take advantage of the fact that the MP4 version of a video may be smaller than the WebM version, or vice versa, the size of the videos should be roughly similar as well. If the MP4 is 3 or 4 times the size of the WebM, someone has made a mistake: they did not target the same equivalent quality for both formats, or used very different settings resulting in the large difference in size. In this case, someone at Headspin made a huge mistake when creating their MP4 hero video.

Optimization: Target the same approximate quality level for all the different formats of a video. While the differences in video technology will mean the sizes will be different, a video that is double or triple the size of the others was not properly created.

Summary

In this post, we’ve seen that you can further optimize HTML5 video content by:

  • Specifying the size of the video in HTML or CSS to improve render speed
  • Using properly sized video files to massively decrease bandwidth needs
  • Ensuring all video formats were created properly and have roughly the same size and bitrate.