Site Speed WTF?!

Weekly Email

Please wait…


You have subscribed! A verification email will be sent to you.


SpeedGuard tracks Core Web Vitals from your WordPress. Check it out.

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

What if you don’t bother to lazy load YouTube videos in WordPress?

Have you ever seen the notice “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!

I compared different ways to lazy load YouTube videos in WordPress:

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: Share on X

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! Share on X

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! 👌 Share on X

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. Share on X

41 responses to “How to lazy load YouTube video embeds in WordPress when nothing works”

  1. Rabii Avatar

    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. Rabii Avatar

    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

  3. Matthew Avatar

    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!

  4. Matthew Avatar

    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!

  5. altadefinizione Avatar

    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!

    1. sz Avatar
      sz

      This site is hosted on SiteGround.

  6. altadefinizione Avatar

    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!

    1. sz Avatar
      sz

      This site is hosted on SiteGround.

  7. David Vongries Avatar

    Hey Sabrina,

    great post!

    YouTube videos can really slow down a website.

    I’ve actually created a plugin for the exact same reason so that the YouTube video only loads once a button was clicked.

    With that, no additional load is added to the page – at least not on the initial page load – and it also helps with GDPR 🙂

    https://de.wordpress.org/plugins/responsive-youtube-vimeo-popup/

  8. David Vongries Avatar

    Hey Sabrina,

    great post!

    YouTube videos can really slow down a website.

    I’ve actually created a plugin for the exact same reason so that the YouTube video only loads once a button was clicked.

    With that, no additional load is added to the page – at least not on the initial page load – and it also helps with GDPR 🙂

    https://de.wordpress.org/plugins/responsive-youtube-vimeo-popup/

  9. frank Avatar

    https://wordpress.org/plugins/wp-youtube-lyte/ might be worth looking into as well; it automatically transforms YT iframes into a fast-loading responsive dummy players, adds microdata (title, description, upload date, … ) and can even cache the thumbnail locally. I am biased though, as I’m the developer … 😉

  10. frank Avatar

    https://wordpress.org/plugins/wp-youtube-lyte/ might be worth looking into as well; it automatically transforms YT iframes into a fast-loading responsive dummy players, adds microdata (title, description, upload date, … ) and can even cache the thumbnail locally. I am biased though, as I’m the developer … 😉

  11. Eric Avatar

    The second suggestion worked so well and so easily! I’d been trying a bunch of other plugins including SG Optimizer and WP YouTube Lyte, but they were hard to use and didn’t work. Finally I installed the plugin you suggested (Lazy Load – Optimize Images) and with only checking two little boxes in settings my page speed score jumped 40 points. Thank you so much!

    1. sz Avatar
      sz

      Sometimes a good solution won’t work just because of some conflict between two plugins (which might not even be noticeable at first sight). Thanks, Eric! Good to know that plugin worked for you 🙂

  12. Eric Avatar

    The second suggestion worked so well and so easily! I’d been trying a bunch of other plugins including SG Optimizer and WP YouTube Lyte, but they were hard to use and didn’t work. Finally I installed the plugin you suggested (Lazy Load – Optimize Images) and with only checking two little boxes in settings my page speed score jumped 40 points. Thank you so much!

    1. sz Avatar
      sz

      Sometimes a good solution won’t work just because of some conflict between two plugins (which might not even be noticeable at first sight). Thanks, Eric! Good to know that plugin worked for you 🙂

  13. Jay Avatar

    Great post!! Thank you for a detailed explanation. Any chance you can tell me how to modify the manual code (labnolThumb(id), labnolIframe()) for Vimeo?

    1. sz Avatar
      sz

      Jay, sorry for the late reply!
      Maybe you’d interested in checking out David’s plugin? It works both with vimeo and youtube https://de.wordpress.org/plugins/responsive-youtube-vimeo-popup/

  14. Jay Avatar

    Great post!! Thank you for a detailed explanation. Any chance you can tell me how to modify the manual code (labnolThumb(id), labnolIframe()) for Vimeo?

    1. sz Avatar
      sz

      Jay, sorry for the late reply!
      Maybe you’d interested in checking out David’s plugin? It works both with vimeo and youtube https://de.wordpress.org/plugins/responsive-youtube-vimeo-popup/

  15. Seb Avatar

    Excellent. How do you use it in case of 2 videos on the same page?

    1. sz Avatar
      sz

      You already have JS and CSS added with the first one. So to add second, third or whatever videos on the same page just add it’s container and ID -> step 1 only https://sabrinazeidan.com/embed-youtube-video-wordpress-without-slowing/#aad33ad808d6

  16. Seb Avatar

    Excellent. How do you use it in case of 2 videos on the same page?

    1. sz Avatar
      sz

      You already have JS and CSS added with the first one. So to add second, third or whatever videos on the same page just add it’s container and ID -> step 1 only https://sabrinazeidan.com/embed-youtube-video-wordpress-without-slowing/#aad33ad808d6

  17. Payton Avatar
    Payton

    Hi there. The hardcore mode solution really improves performance, however you need to click 2 times to make the video play. Is there any way to make it only 1 click?

  18. Payton Avatar
    Payton

    Hi there. The hardcore mode solution really improves performance, however you need to click 2 times to make the video play. Is there any way to make it only 1 click?

  19. Codeaxia Digital Solutions Avatar

    thanks for optimize embedded videos …

  20. Codeaxia Digital Solutions Avatar

    thanks for optimize embedded videos …

  21. Alias Marketing and Design Avatar

    Thank you life saver ! Lazyload plugin worked a treat

  22. Alias Marketing and Design Avatar

    Thank you life saver ! Lazyload plugin worked a treat

  23. Alex V Avatar
    Alex V

    Thank you so much for this awesome solution for YouTube videos. I have one question though. Is there a way to auto-generate a featured image from the video?

  24. Alex V Avatar
    Alex V

    Thank you so much for this awesome solution for YouTube videos. I have one question though. Is there a way to auto-generate a featured image from the video?

  25. Matias Avatar
    Matias

    Thanks for the advice.
    Just by activating the LazyLoad plugin, my landing page went from a 24% mobile grade in PageSpeed Insights to a 57%. And from a 73% in desktop to a 95%.
    Script size went from 1.6mb to 330.6kb.

  26. Matias Avatar
    Matias

    Thanks for the advice.
    Just by activating the LazyLoad plugin, my landing page went from a 24% mobile grade in PageSpeed Insights to a 57%. And from a 73% in desktop to a 95%.
    Script size went from 1.6mb to 330.6kb.

  27. Kari Avatar
    Kari

    Thank you SO MUCH for this!! Very helpful.

  28. Kari Avatar
    Kari

    Thank you SO MUCH for this!! Very helpful.

  29. Reducing The Web’s Carbon Footprint: Optimizing Social Media Embeds – Websites For Me and You Avatar

    […] for embedded videos to choose from. The Lazy Load plugin by WP Rocket comes highly recommended, and this article by Sabrina Zeidan demonstrates the big difference it can make to performance. Unfortunately, I’m […]

  30. Create a WordPress Video Lightbox with ease! – Geniuswp Avatar

    […] drawback – slow performance. There is a great article by my friend Sabrina Zeidan that shows how bad things can actually get when embedding just 3 videos on your page. Crazy, […]

  31. trickyaamir Avatar

    It,s showing

    syntax error, unexpected token “var”

    If i saving it in function.php

    I am using NEVE theme.

  32. Rose Avatar
    Rose

    Is there a way for a PLAYLIST please?

  33. Pete J. Avatar
    Pete J.

    Regarding the video needing two clicks/not autoplaying. The solution to that issue is explained here:

    https://stackoverflow.com/questions/40685142/youtube-autoplay-does-not-work-with-iframe

    You just need to add:

    iframe.setAttribute(“allow”, “autoplay”);

    So the buttom function in Sabrina’s code becomes this:

    function labnolIframe() {
    var iframe = document.createElement(“iframe”);
    var embed = “https://www.youtube.com/embed/ID?autoplay=1”;
    iframe.setAttribute(“src”, embed.replace(“ID”, this.dataset.id));
    iframe.setAttribute(“frameborder”, “0”);
    iframe.setAttribute(“allow”, “autoplay”);
    iframe.setAttribute(“allowfullscreen”, “1”);
    this.parentNode.replaceChild(iframe, this);
    }

Leave a Reply

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