Better Explaining The Reason For Video Facades

Jason Knight
Published in
4 min readApr 22


Photo by Christian Wiediger on Unsplash

In my last article I showed a semi-simple way of creating “video facades”, a way to better “embed” third party videos — in this case those from YouTube — in a page.

Almost moments after posting it I got a few “friends in the biz” private messaging me asking why adding code like this is advantageous. I looked back and it’s like “Wow, I explained the how, but kind of skipped the why!”

So I figured I better do a follow up better explaining “why” and backing it up with some real-world numbers.

It’s All About Load Times And Lighthouse Scores

As I said in the previous article, a lot of third party assets just plain suck greatly penalizing your load times and lighthouse score. To illustrate this let’s take my pen and turn it into two static pages. One loading the iframe embeds exactly as YouTube provides them, the other using my facade script.

You can find both demo pages here:

If we look at the “nofacades.html” in the normal network waterfall.

Network Waterfall of the video demo using the “embed” straight. 50+ files, 1.46 seconds “time to interactive”

Kind of horrifying. Especially since the code I wrote is only 2.62k in two files. The overall load time isn’t bad on my spanky new fiber connect, but we throttle down to “regular 4g”

Loaded on 4g, we’re well over 4 seconds.

At 4 seconds and some change for “load” we’re well past the 3 seconds before bounce starts. The 16 seconds overall is outright trash.

And this is reflected in LightHouse. We’ll use the mobile score as its more pronounced there.

No facades lighthouse score: 98 / 100 / 92 / 100

Now, that’s a really good score! BUT what are we being dinged for?




Jason Knight
Writer for

Accessibility and Efficiency Consultant, Web Developer, Musician, and just general pain in the arse