How To Make Youtube Videos Load Faster And On Demand
There comes a time when you will want to add a YouTube video to your site, and why not?
Videos are a great marketing tool. Your site visitors much prefer to watch a 2 minute video than to read 2,000 words of text.
But there is a downside. Namely, speed and page load times.
If you are an SEO or webmaster in the know, you will be aware that going back as far as 2010, Google announced that speed is a ranking factor. Back in 2010, it was only a minor ranking factor; today I would say that it has been given a little more weight so is something you should be working on improving.
If you are using the original embed code to place a YouTube video on your page, your page will not be fully loaded until the video has been fully loaded with all of its associated code. On average, this will add around 300-400KB of code to your page!
At the end of the day, why load video if it may not be viewed?
Your current embed code may look something like this
<iframe src="//www.youtube.com/embed/xxxxxxxxxx?rel=0&showinfo=0" width="530" height="298" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
but what you really want is to load the video only when clicked or “on demand”.
To achieve this we change the code to the following
<div class="youtube" id="xxxxxxxxxx" style="width: 530px; height: 298px;"></div> <p><script src="https://labnol.googlecode.com/files/youtube.js"></script></p>
Where you have the “xxxxxxxx” is where you need to enter the ID for the video. Simple.
Now you will find that your page is around 300-400KB lighter, which will make it significantly faster.
The video will stay play perfectly, but will only load on demand, i.e. when the video is clicked.
A really easy way to improve your site speed and please both search engines and more importantly, your visitors. Having a faster site will also help with conversion rate optimisation.