A really really good Mux component

We've been on a mission to try and achieve a near perfect lighthouse score with Roboto Studio. One of the hardest tasks has been getting Mux video to not tank the performance with their Mux Player.

We ended up building a stripped down version of the Mux player and we've written a blog about it. Read it here. Don't worry you can just ignore the blog pit and steal the code and it should work, providing you're using Typescript (you should).

I also want to reiterate - the Mux player is ultimately the better choice for most folks, because it's a plug and play library that works with pretty much every video format, however, for those tilted enough to want to optimise the hell out of everything at the expense of compatibility - this is for you.

Hey thanks for surfacing (Dylan from Mux here).

Love the work you've done in your example to optimize for lighthouse score. There is a fundamental tradeoff here that I think folks should think about:

web vitals (lighthouse score) vs. video performance

The biggest change that I can see, if I'm following correctly is waiting to load <hls-video> until after the user clicks play.

That's going to make your lighthouse score great, (which is great!) -- but the tradeoff is that when the user clicks play it's going to take more time for playback to start and the user to see the first frame of the video.

For your use case on roboto.studio I think that probably makes perfect sense. For other use cases where you want the video to load fast you may want to lazy load the player, which tries to balance the tradeoffs:

Doesn't block the initial page load (despite this, your lighthouse scores will be impacted negatively)
Lazy loads the player without requiring the user to click play so that when the user does click play the video starts up immediately

Either way, I think what you created here is great and thanks for sharing. I think Mux can maybe do more here to help people achieve this behavior out of the box if they are really trying to optimize for lighthouse!

Hey ! First of all, thank you for the kind words, keep up the incredible work with Mux, we love it. If you don't mind, would I be able to include your quote + credit within the original article, because I think we may have glossed over this a little, and you're right, it's very important that folks know the trade off between web vitals vs. video performance

I believe we did actually try using the lazy loading Mux player originally, but Google wasn't having any of it in regards to lighthouse scores. I'm also painfully aware that the reality of achieving a perfect score on lighthouse involves pretty much stripping out a whole host of interactivity for the website and it's ironically, not always the best user experience. I always think back to this part of this video from Rich Harris every time this comes up

Also, while I've got you here, I'm actually really curious what your opinions are of videos "above the fold". The reason I ask is because your videos on the homepage Mux are ludicrously fast perceptively and from a UX they're great, but lighthouse slams the website performance-wise. I'm guessing you focus on the tradeoff for the video performance? Is there something more to it, that I'm missing out of curiosity?

First of all, thank you for the kind words, keep up the incredible work with Mux, we love it

❤️

would I be able to include your quote + credit within the original article

Of course!

I believe we did actually try using the lazy loading Mux player originally, but Google wasn’t having any of it in regards to lighthouse scores

That's consistent with what I've seen

I’m actually really curious what your opinions are of videos “above the fold”.

I think it's entirely context dependent. Since we're a video company, and we have a tool for monitoring performance metrics like Video Startup time (& rebuffering, video quality, etc.) we chose to make sure our video startup times are fast, even at the expense of a less-than perfect lighthouse score.

The important thing is that you're not blocking the pageload / time to first paint / time to interactive on downloading the full player code. An unfortunate reality of browsers right now is that in order to play video in an adaptive bitrate streaming format reliably across different browsers it's hard to avoid loading a bunch of Javascript.