When you embed a YouTube or any other video, your visitor’s browser will need to make a number of extra requests to render your page. With YouTube, the number of requests is 4, 3 for three different resolutions and 1 for the still image used as a video cover. It gets even worse when you embed a video that has ads running – several more requests are added. Naturally, your site will load slower and if you have a half a dozen videos on the page … you do the math, this could be a half of the total requests. What’s even worse, is these requests to external resources cannot be controlled, they don’t have far future expirations and because of that will lower your overall speed scores.
To avoid all of the above nonsense, I suggest you use lightboxes for your videos. Doing so will give you 3 benefits:
- It will get rid of unnecessary server requests and speed up your site; requests will be made only when the video is actually played.
- The second benefit is a nice crisp video cover with a big button (you’ll have to make it) in place of whatever that thing is we get from YouTube. Your videos will get more views!
- And third, your visitor will not be distracted from your video when it opens in a fullscreen lightbox.
X iLightbox shortcode:
[image class="video-lightbox" src="//yourdomain.com/wp-content/uploads/the_rest_of_the_path_to_your_cover_image.jpg" link="true" href="//www.youtube.com/embed/your_video_ID?rel=0&autoplay=1" lightbox_video="true"][lightbox selector=".video-lightbox"]
The ?rel=0 in the shortcode is a tweak that prevents YouTube from showing other people’s videos on your site when yours is done playing and autoplay=1 means that the video will autoplay when the cover image is pressed.
If you use Vimeo, Wistia, etc. change href to what’s appropriate.
You can find Alexei’s full WordPress Speed Secrets video tutorial here.
By Alexei Kutsko —
Founder at WP Speed Guru and author of WordPress Speed Secrets.