If you try to google something like «how to embed YouTube video» you’ll get plenty of well-known websites giving you recommendations like this:
- find video id
- put it in the iframePHP1<iframe src="https://www.youtube.com/embed/<strong>video_id_goes_here</strong>" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
- place code on your website ( just switch WordPress Editor to the Text tab)
It’s simple and easy way to embed YouTube video in WordPress, except for it slows down your website!
Every YouTube video on the page adds at least a few seconds to your page load time. And you definitely don’t want it, right?
Let’s take a look at numbers.
Regular YouTube video embedding:
And here is more detailed Waterfall, filtered by «youtube».
Look: 42 additional requests generated by YouTube videos, 2 additional MB are loaded which leads us to 38(!) seconds untill all content is loaded.
Smart way to embed YouTube video:
More than twice faster, and almost twice less requests by Gmetrix report:
There is no time spend on YouTube requests on page load at all now.
But how can it be? Simple answer:
Use lazy load to add YouTube videos to your WordPress site
Don’t make a single move until it’s necessary.
Google+ and YouTube itself are using this approach to serve videos to users as fast as possible.
Instead of loading everything at once and making our user drumming his table irritably, we’ll give him usual video preview BUT won’t load the video itself until he actually plays it. There are few ways to do this, I’ll share the one I like the most.
This video is embedded using the method described below. It won’t load an extra byte until you press play button.
Three steps to load YouTube videos faster:
- Instead of iframe place the following div:PHP1<div class='youtube-player' data-id='<strong>video_id_goes_here</strong>'></div>
- Place this CSS in your theme’s style.css
How to add multiple YouTube videos on one page in WordPress
Perhaps, you’ve already get it, but just a little hint for newbies.
This approach will decrease your website load time drastically, improve SE rankings and make your users a bit happier. Isn’t it wonderful?