How to embed YouTube video in WordPress without slowing it down

using lazy load method

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:

  1. find video id
    How to embed YouTube video in WordPress without slowing it down
  2. put it in the iframe
  3. 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:

Gmetrix report:

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:

  1. Instead of iframe place the following div:
  2. Place this JavaScript in your theme’s .js file (you’ve already combined and minified all js for better performance, right?). It will listen to «play» event and load the video only after user wants it to be loaded
  3. 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.

Once you have added this JavaScript and CSS to your theme for the one video, there is no need to do it anymore. No matter how much videos there are in your post, you just place the div in editor and that’s all (just mind to replace video_id_goes_here with actual video id).

This approach will decrease your website load time drastically, improve SE rankings and make your users a bit happier. Isn’t it wonderful?

How to embed YouTube video in WordPress without slowing it down: 1 комментарий

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *