New Size and Quality Optimizations for HTML5 Video
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:
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:
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.
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.
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:
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:
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:
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.
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.
Get started with a free trial of Splunk Observability Cloud today.
Splunk, Splunk>, Turn Data Into Doing, and Data-to-Everything are trademarks or registered trademarks of Splunk Inc. in the United States and other countries. All other brand names, product names, or trademarks belong to their respective owners.