Better Explaining The Reason For Video Facades
--
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:
https://cutcodedown.com/for_others/medium_articles/videoFacades/
If we look at the “nofacades.html” in the normal network waterfall.
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”
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.
Now, that’s a really good score! BUT what are we being dinged for?
Performance:
