Almost all websites out there these days feature YouTube videos embedded on the page. If you don’t, get with the program! It’s 2020! if you do, read on, this is for you! While embedding YouTube videos is a great way to add a dynamic edge to your content and showcase your product in a modern and exciting context, it can also add a surprising and unwelcome bottleneck to your page size and subsequently how quickly the page loads. Slow page load times can be devastating to your bounce rate, since most people are not even willing to wait a split second for your content to load before leaving you page for a competitor.
You can use the common approaches of optimizing your scripts and moving them to the footer to speed most things up on your page load, but YouTube is not one of those things since it loads its own scripts externally. So how do you fix it? I’ll tell ya!
The <lite-youtube> element is just a basic div with the same background image and styling applied to it, so the user doesn’t notice any difference in the layout, but your page load speed sure does. When the user clicks on the <lite-youtube> element it then dynamically swaps it out for a real YouTube embed and plays it as normal from there. You know, the classic bait and switch, but with YouTube!
Essentially what is happening here is a form of lazyloading. A feature that YouTube does not natively support, but the Lite YouTube Embed does - and does so very effectively. To use the plugin all you need to do is add the necessary files to your site, then get the ID of your YouTube video which you can find in the URL.
For example https://www.youtube.com/watch?v=G7xC32v99 has a video ID of G7xC32v99. Finally you add the embed like so:
And that’s it! YouTube embeds with no performance hit. Your webpage looks modern and fancy. Your webpage loads with lightning fast speeds. Your SEO is not damaged. You are a happy camper with a completely optimized website riddled with video content… that sounds like a recipe for success!