How to Lazy Load YouTube Videos for *Dramatic* Speed Improvements
Speed Matter! Google's been drilling that point into our skulls for years and dangling high rank carrots in front of our noses to make the point. We've all learned over the last few years a fast website also can increase conversions, so it's no surprise that many webmasters are on a "speed" kick.
What's ironic is that Google themselves didn't get the memo, specifically in regards to embedded YouTube Videos. Google resources such as fonts and analytics both cause a slight drag on page speed, but nothing like the impact an embedded YouTube Video can have.
The resources necessary for YouTube's embedded videos typically require over 500kb to load, plus they require calls to a remote server - yes this does have a speed impact. Below is an example of the current YouTube embed code.
<iframe width="560" height="315" src="https://www.youtube.com/embed/hA6hldpSTF8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>
In use, it looks like this...
Note: YouTube's embed code is "not" responsive, that can be a problem now also! More on this later...
In the past we used a band-aid approach to this problem by taking a screen shot of the embed, then use that image on the page linking it either to a dedicated video page where the embed was at, or to a pop-up model window with the embedded video in it. While that method works, it's not near as cool as the method Web Developer Arthur Corenzan came up with.