Marketing | Creative | Strategy

Your faithful partner in the discovery of endless digital opportunity.

Take the First Step

Supercharge Your YouTube Video Load Times With The Lite YouTube Embed Plugin

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!

Niall Gallagher
Senior Web Developer
If there is a new web app, I’ve tried it. If it’s integratable, optimizable, automatable, and customizable it is right up my alley. I manage and lead a team of developers that specialize in making a workable digital solution for your business out of nothing. I identify and make ongoing recommendations based on your business goals and the operational feasibility of what can be implemented to allow your business to scale and grow freely. Long story short, we’ll solve problems you didn’t know you had, in way you never thought possible.
close[x]

Get A Quote

Ready to take the next step? Please fill out the form below. We can't wait to hear from you!

Once submitted, a Slicedbread representative will be back in touch with you as soon as possible.

* Required Fields