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.

On a recent project we found that the javascript assets the YouTube videos loaded exceeded 500kb. That’s quite an excessive amount of data to add to an initial page load, especially with so many users accessing websites on phones and tablets these days using their cellular wireless package. Not only is it annoying for users, but It will also impact on your pagespeed score on Google, since as we know longer page load times are bad for SEO.

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!

One great solution to that problem is to use a javascript based plugin called Lite YouTube Embed. It reduces the overhead of loading YouTube videos by 224x, ensuring that your pages remain quick to load. The way the plugin works is that it replaces the standard YouTube embedded iframe with a custom <lite-youtube> element, which looks identical but carries a much lighter overhead than a YouTube embed, since it does not load all of the assets that a standard  YouTube embed does. 

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:

<lite-youtube videoid="G7xC32v99"></lite-youtube>

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!