Video Optimization for the Web: The Missing Piece in Lighthouse

Hey, I'm Rahul, great to be here. I'm one of the co-founders at ImageKit. And when we bought this domain name ImageKit 10 years back, we thought we were only going to be doing images as a product, right? But here I am talking about video optimization for the web because that's like the next big media format that almost everyone is using on websites. And though seven minutes is a really short time to be talking about video optimization, but I'll try to leave you with some guiding principles and maybe some methods in which you can optimize videos for your websites and apps, right? So let's get started.

Lighthouse is great. If you want to test for your website for performance, it's great for images, but it's not great for videos, right? For images, it gives you all kinds of audits, like whether it's in the right format, whether it's compressing well, whether it's resized, whether it's lazy loading. But for videos, the best thing that you will get out of Lighthouse is that you're loading a large payload, right, which is as generic as it gets. So it really doesn't work for video streaming optimization. So, which brings me to principle one, if you have to optimize your videos for your website, if you have a lot of short videos, and when I say short videos, these are typically under 15 seconds, then you need to apply the same set of audits that Lighthouse does for images to your videos as well. But it would be the video equivalent of it, right? So when we say that you need to use modern formats for videos, you need to use WebM or VP9 or AV1 codecs. You need to compress the videos, reduce their bitrate, reduce their resolution, and lazy load the videos, which in a way to lazy load videos could be that you just wait for the user to play the video.

Now, this sounds complex, but with something like ImageKit, because I am from ImageKit, it's actually as simple as just loading your videos via ImageKit, right? So the example that you see on the screen right now, I have a video file. ImageKit automatically takes care of converting it to the right format and compressing it based on the end user's device. And you can add this parameter width 400 to the video URL, and in real time, you'll resize the video to that resolution, right?

Now, this works great for short videos, but here's the catch, right? So, okay, I missed one slide. By doing this, you would be able to compress your videos by close to 90, 95% for the shorter videos, right? But when it comes to longer videos, because the videos stream and load over a period of time, you need to optimize for the changing conditions that would change over a period of time, right? It's, let's say, if you're loading a 20-minute episode on your website or on your app, the time that it takes to download and stream all of that video, a lot of things can change, right?

Now, network is not the only thing that will change as the user plays the video, right? The other thing that changes is that the user could actually change the player size as well. They could go full screen. Let's say they start off in portrait mode, they're viewing the video in a really small placeholder and then they decide to go full screen. You need to allow your player to be able to adjust the resolution based on the size of the video player at that time, right? And now this is not related to ImageKit, but in general, every player would have similar settings. I'm using Video.js here, so you can have two settings, which is limit rendition by player dimensions and use the device DPR.

The last thing, the user would not interact with your video in the same way as they did when they started on the page, right? So for example, your user lands on the page, they start looking at a video, they start playing that video, but it's fairly possible that they just scroll past the video. They start going through the rest of your content. They are no longer looking at the video. If you do not pause the video in such a case, the video player will just keep loading more and more video content, which as a business is a lot of data transfer costs that you would incur. And the user actually gains nothing out of this because they're not really viewing the video at all.