How to lazy load YouTube video embeds in WordPress when nothing works

What happens when you embed a Youtube video on your site?

An empty page with NO video:

I created a new post on this website without any content (so header, footer, sidebar, all scripts, comment form etc are loaded, but post content in empty).

How to lazy load YouTube video embeds in WordPress when nothing works

Results:

38 requests
376 KB
Speed Index: 1.2 s
Total Blocking Time: 10 ms

An empty page with ONE video:

Then 1 added one video (embed in Gutenberg):

Results:

50 requests
944 KB
Speed Index: 1.7 s
Total Blocking Time: 110 ms

An empty page with THREE videos:

I had one martini and added two more videos to this page:

Results:

72 requests
2102 KB
Speed Index: 2.8 s
Total Blocking Time: 250 ms

Reduce the impact of third-party code in PageSpeed Insights

Google PageSpeed Insights even gives us a hint, embedding 3 videos resulted into this warning:

When I wrote the first version of this post back in 2017, 3 Youtube videos on the page added: 42 additional requests and 2 additional MB 🤯

Time passed. Today (2020) 3 YouTube videos will add 34 additional requests and 1.6 additional MB to your page 🤯🤯🤯.

So, as you can see YouTube embeds performance hasn’t changed much.

While our expectations as users did! We can’t stand slower websites anymore, especially on mobile. That’s why you’re reading this post, right? 🙂

Let’s fix it!

Instead of making our user drumming his table irritably while we load all the video data, let’s show him page content as fast as possible!

There will be the same layout but we won’t be loading video itself (and therefore all the data) unless he actually plays it.

I can see just one single reason for not using Lazy Load: if you need your video to be autoplayed (it’s background video or promo, or something like that).

In all other cases — just do it!

I tried 3 ways to lazy load Youtube videos, measured site speed results and here is what I found out: Click To Tweet

Mind that on your site results will be different (please, share in comments what worked for you better).

By the way, I use my very own plugin to run site speed tests. Check it out!

WP Rocket results

I’m always happy to recommend WP Rocket. And not because I’m a former team member. I loved this plugin long time before I became one, and still do!

So, I enabled LazyLoad for videos and iframes in WP Rocket Settings:

WP Rocket Settings

Results:

42 requests
440 KB
Speed Index: 1.3 s
Total Blocking Time: 30 ms

Important note about WP Rocket results:

When I was running this test a while ago, I noticed that enabling LazyLoad in WP Rocket didn’t bring too much improvement in performance. There were no errors on the page and honestly I didn’t know why I happened. The same plugin’s version worked great just a week before when I was optimizing a website for the client.

But after I took a closer look at it, I found out that despite there were no errors on the frontend, there was a conflict between WP Rocket and some other plugin in the backend. It resulted into the second option “Replace YouTube iframe with preview image” not showing up, so it wasn’t checked. And performance improvement was far from what it could have been!

Even if you enabled Lazy Load for videos/images test that it's working actually as expected, cause it might not be! Click To Tweet

Lazyload standalone plugin

The next thing I tried was a free Lazy Load — Optimize Images plugin. It comes from WP Rocket team as well, but it uses a different approach to lazyload videos and might work better in some cases.

Results:

42 requests
438 KB
Speed Index: 1.3 s
Total Blocking Time: 30 ms

Looks fantastic, doesn’t it?!

Hardcore mode 🤘

If neither of previous two methods worked (shit happens!) — do it manually:

1.Instead of iframe (or link in Gutenberg) place the following div:

<div class='youtube-player' data-id='video_id_goes_here'></div>

2. Add this JavaScript in your theme’s js file (preferably, load it in footer).
It will listen to “play” event and load the video only after user wants it to be loaded

3. Add this CSS in your theme’s style.css

Results:

42 requests
439 KB
Speed Index: 1.4 s
Total Blocking Time: 0 ms

How cool is that?

This video is embedded using the method described above. It won’t load a single byte until you press a Play button!

You can style the layout as you prefer, of course.

You might have already got it, but just a little hint for newbies.

Once you have added this JavaScript and CSS to your theme for a one video, there is no need to add it anymore. No matter how many videos there are in your post (or how many posts with videos you have), you just place the <div> in the editor and that’s it (just mind to replace video_id_goes_here with relevant video id).

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

By the way, I use my very own plugin to run site speed tests. Check it out!

Nice table with all numbers compared

* Mind that minor fluctuations in results are normal. Each time you reload PageSpeed Insights page the results will defer a little bit. That’s why it’s important to include requests count and pageweight too.

WP Rocket, free standalone LazyLoad plugin (comes from WP Media team as well) and custom code showed very similar results.

If you apply lazyload to videos using one of the methods described you will get almost the same performance as if there were no YouTube videos on your page at all! 👌 Click To Tweet

I’ll stick with WP Rocket as an all-in-one solution for this website. I also use it when I speed up websites for clients, and always happy to recommend it.

Conclusion

Don't make a single move until it's necessary. Click To Tweet

5 Replies to “How to lazy load YouTube video embeds in WordPress when nothing works”

  1. hey thanks for the helpful article, do you have any idea how to remove related videos from the embed the standard (rel=”0″ showinfo=”0″) does not work

    thank you

  2. Thank you Sabrina! I’ve been trying to get this to work on my site for weeks now, all the existing plugins don’t seem to work with Jetpack. But this worked!

    I have a page called Video Library with 60 youtube video embeds on it that was taking 30+ seconds to load on gtmetrix.

    Now it’s down to 6.7 seconds. Incredibly massive improvement, thank you!

  3. Hey would you mind letting me know which hosting company you’re working with?
    I’ve loaded your blog in 3 completely different web browsers and I must say this
    blog loads a lot faster then most. Can you suggest a good web hosting provider
    at a honest price? Thanks, I appreciate it!

Leave a Reply

Your email address will not be published. Required fields are marked *