How To Lazy Load & Optimize Youtube Videos For Site Speed

0:00Why YouTube Embeds Slow Down Your Pages

WP Speed Fix here. I just want to make a short video. We have this post on our website about optimizing lazy loading and optimizing YouTube videos for site speed. It's a question we get asked about a lot, which is why we have this post. A YouTube embed is really heavy. Each embed is about 0.7 of a megabyte, so if you have a page with lots of embeds on it, the page is going to get big or fat very quickly.

The other issue is that if you have a page with a lot of embeds on it, it'll tend to go slow. It'll make the browser work really hard. If you're on a laptop you'll probably hear the fan spin up. It's just making the browser work way too hard and the page will get clunky and slow. So I want to share with you in this video, and we talk through in this post, the three ways that we optimize YouTube videos for lazy loading.

0:22Traditional Lazy Loading for Videos Below the Fold

It's pretty simple, so let me scroll down here. There are really three ways. There's a traditional lazy load style, where the player does not load till the user scrolls down to that part of the page. Pretty simple, and it works well for videos that are below the fold. Just like lazy loading images, the user scrolls down to whatever part of the page the player is on and then the browser will load the player.

That doesn't really work when the player is above the fold. If the player is at the top part of the site then it's just going to load with the page, so it doesn't really help us in a lot of scenarios.

1:08The Preview Image Method

The next way we would look at optimizing the video, and this is our preferred method, is using some sort of preview image, a preview tile that has a play icon over it, and then when you press play it loads the player. This is going to be the fastest way to load the videos, because basically you're just loading an image on the page. Most themes and page builders support this now, so all the popular ones will do it. There is a video widget to embed the video, you add the link to the video on YouTube, and then you have a preview image or featured image. In some builders there is an option to control what the play icon is over the top of it.

That is the best way to do it, so if you're building a site from scratch that's ideal. If you have a site with a lot of videos already, it's actually a lot of work to go back and fix it, because you're going to have to edit each page individually, edit each video widget, and then find the preview tiles or make a preview image for that video. If you have 50 pages with videos, that could be a problem.

2:16Using WordPress Plugins to Lazy Load Videos

The method that we found works best, so how we do lazy loading in WordPress, is using a plugin. Typically we'll use one of three plugins, and you'll see in the post we talk about it. The caching plugin or speed optimization plugins we use on WordPress are either WP Rocket or FlyingPress. Both of those have options for lazy loading video and for showing the preview tile, or preview thumbnail, or video preview before loading the whole player. That works most of the time. It works 60 to 70% of the time, but there are some themes and some page builders that don't support it. Divi is one we have a problem with. In that case, as you'll see we talk about in the post, we'll use Perfmatters instead. It does seem to work around that problem and it works perfectly fine.

Typically our approach will be to use the plugin to do lazy loading and that'll fix it site-wide, and if possible, if it works, and it doesn't always work, use the method where it will display that preview image first. Just to note, if you're using WP Rocket and doing this, WP Rocket won't display the highest resolution YouTube preview tile by default. There is an add-on plugin that we've linked to, as you'll see here, where you can choose the image resolution of the preview tile. Make sure you use that in conjunction with WP Rocket, otherwise the preview images are going to look really grainy and rough.

Using some combination of these methods is probably going to work best. Use a plugin to fix it site-wide quickly, and then go back to the important pages, particularly the homepage, which is going to get a lot of traffic, and if the page builder supports it, fix it on there at least. At least the homepage is using the most optimal method and then the other pages will use the plugin method. The other issue with the plugin method is that the page needs to be built in order for the optimizations to work, for the plugin to actually optimize or lazy load the YouTube video. If you have pages excluded from the caching then it won't actually apply those optimizations to those pages either, so that's something to be mindful of.

4:31The Srcdoc Method for Any CMS

The last one is the srcdoc method, the source doc method. This is using some code. If you scroll down here, the third method is the srcdoc method. Probably the best way to explain this is to show you. There is some code here you can use that will tell the browser to go and get the preview tile from YouTube and show that. This one is a good option if you have some sort of weird site, if you're not on WordPress for example. If you're using Shopify or some other CMS that doesn't support a plugin and doesn't support any sort of lazy loading, this is a good way to do it.

You'll see here we've linked to this site, didgeridoobreath.com, in this post, and you'll see on the homepage that these videos are using this srcdoc method. These are actually just images, and you can control the color of this play icon here. As you'll see in the code, that's actually just a character, that character there. If you copy and paste that code you can just edit the bits here, so edit the YouTube video, and edit the title as well, obviously. If you edit that you'll be able to use that code on your site.

If you click on it, then it pulls through the full player. On most browsers it no longer autoplays. It used to autoplay the video, so you'd click on it and it would play the video automatically, and you'll see in the code it actually has an autoplay there. But most browsers, particularly if the video has audio, won't autoplay it, so just be mindful of that. It'll require two clicks from the visitor, but I don't think that's too much of a user experience issue to get such a speed gain. You'll see there are two examples. If I click it there, then it loads the full player.

6:01Adding Loading Lazy to the Iframe

That's pretty much it. If you are on another CMS, most browsers now support just adding the loading="lazy" attribute into the iframe, so this might be a way to work around problems as well. If you're on, like I said, Shopify, BigCommerce or some other non-WordPress CMS, you can just edit the iframe code that you're using for the YouTube embed and add loading="lazy" into it, and that should lazy load it. That uses the method where it doesn't load till the user scrolls to that part of the page. That'll work well if the videos are below the fold, but again, like I said, if they're above the fold that might be problematic. But that's pretty much it.

6:45Free Site Speed Help and Tools From WP Speed Fix

It's pretty straightforward. This post is on our site and I'll link to it underneath the video. It's just in our Wiki section here. If you are looking for site speed help with your WordPress site, head over to wpspeedfix.com, that's our website. There are a few things you can do here if you want help from us. You can request a free site speed audit here in the menu. We'll come back to you in one business day or so. Just fill out this form, we're happy to help out.

If you want to dig into Core Web Vitals, you can get a free Core Web Vitals report here. It takes about 30 seconds to generate, you don't need to opt into anything, it's completely free, and that report will automatically update on the second Tuesday of each month with the latest Core Web Vitals data for your website. It's a good high-level tool for keeping track of site speed, and this will work on any site, it doesn't have to be a WordPress site. You will need to have 50 to 100, excuse me, visitors a day to have enough data to generate this report, so just keep that in mind. If there's no data in the report, you probably don't have enough traffic for it.

Lastly, if you want to dig into the site speed yourself, you can use our free WordPress site speed test tool. It takes about 90 seconds and it's not opt-in required as well. It'll give you detailed recommendations on how to speed up your site. So that's it for this video. I'll keep it short. If you have any questions just ask in the comments, and I'm happy to come back and clarify or provide more detail or whatever. Cheers.