How to Lazy Load YouTube Videos to Improve Core Web Vitals

Website speed is necessary since Google announced the Core Web Vitals Update.

We're your Core Web Vitals Developers!

We will fix the core web vitals issue on reported URL's then submit them until they are in the 'Green' section..

View Service!

One of the best methods of improving page speed scores is to defer the loading of your JavaScript files that are not required for the initial page load.

And one of the great stumbling blocks in this regard is usually YouTube videos, which many of us use and show on our pages.

When you embed a YouTube video, it usually loads additional JavaScript files that can significantly slow down the loading of your website.

The method to combat this problem is lazy loading, known as lazy loading, of YouTube videos, so that their JavaScript is not loaded until the user scrolls (navigates) to where the video is on the page.

So in this article, we are going to learn how to lazyLoad YouTube videos to improve Core Web Vitals.

Lazy Load YouTube videos in WordPress with plugins

All of the above is fine, but what if I have the videos inserted only with the URL?

As you already know, inserting a video in WordPress is something as simple as copying and pasting the URL of the video in the editor and it will be displayed as if by magic.

But this way we don’t have an iframe to manipulate.

So how do I defer uploading YouTube videos if I don’t have an iframe? With plugins!

Lazy Load

This plugin is the one that I always recommend for lazy loading YouTube videos.

In principle, it is also used to lazy load images, but for that, there are many others.

Now, what it does well is the lazy loading of videos, and on top of that, you don’t have to configure anything.

Once you install and activate it, go to its configuration page, in Settings > LazyLoad, and activate at least the second option, that of iframes and videos, as in the following screenshot:

If you want to further optimize lazy loading you can check the last box. What it does is, initially only the YouTube video snapshot is loaded, and it will only load the YouTube JavaScripts when the player is clicked.

As a bonus, it is not only limited to YouTube videos, it also lazy loads any other embedded video from other services such as Vimeo.

Lazy Load for Videos

Lazy Load for Videos plugin is Similar to the previous one, but this one specialized only in videos, there is this plugin.

With it, you can also load only the image thumbnails, among many other settings.

WP YouTube Lyte

WP YouTube Lyte plugin, from the creators of Autoptimize, is specialized in the lazy loading of YouTube videos, so it is not as complete as the previous ones.

However, the work with YouTube videos that it does is correct, and it allows some adjustments in the player.

Conclusion

I hope I have helped you with this article to understand how to Lazyload YouTube videos to Improve Core Web Vitals. If you have any questions then hesitate to ask us in the comment box.

Leave a Comment

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