Table of Contents
Youtube video embeds are a problem when it comes to site speed.
A standard Youtube embed is 0.7mb which is quite heavy and multiple embeds on a single page both fatten up the page a LOT and also start to work the browser or device hard, especially on a page with 3+ videos which can be quite common on something like a testimonial page.
Because Youtube videos are both heavy and slow they also typically take 2-5 seconds to render so if they are above the fold on a page, the page almost always will fail core web vitals LCP metric. Our goal for this metric is 2.5 seconds and below so only the fastest video renders will fall into the “good” range.
The Two Ways To Lazy Load a Youtube Video
There’s two ways to lazy load a Youtube video:
1. A traditional lazy load
A traditional style lazy load where the video player doesn’t load until the user scrolls down to that part of the page.
This is not a bad way of optimizing and is certainly better than nothing and will work perfectly fine where the video is below the fold and there’s only one embed.
It won’t work if the video is above the fold and if there’s multiple videos below the fold we still have the issue of the browser or device starting to grind to a halt when they starting loading 2+ players.
2. Placeholder image which triggers the player when clicked
A much better method is to show just a thumbnail or placeholder image with a play icon on it in place of the video. The placeholder looks near identical to a video player and when clicked it loads the full player and starts playing the video.
How We Do Video Lazy Loading in WordPress
Ideally we want to use option two from above if possible. We typically use WPRocket for most WordPress sites which has a video lazy load built in which works probably 60-70% of the time and can solve the problem sitewide.
If you use the WPRocket method ideally you want to use the addon plugin on this page where you can force the embed to use the highest resolution and quality thumbnail preview image: https://docs.wp-rocket.me/article/1062-choose-youtube-preview-image-resolution
Many page builders also have the placeholder lazy load method built in which is usually preferable to the WPRocket method BUT does require manual editing on every single page which can be a lot of work. Often the best approach is to use the WPRocket method and then manually edit the top 3-5 busiest pages.
Other Video Lazy Loading Methods
In some cases the above approach may not work because of the plugin combination used or theme or where the site is Shopify, Bigcommerce or some other non-Wordpress CMS
In this case there’s 2 different approaches we can take:
1. Native Browser Lazy Load
Chrome now supports native lazyloading for iframe and Youtube video embeds.
You just need to add loading=“lazy” into the iframe code
More details here:
https://web.dev/iframe-lazy-loading/
2. srcdoc method
You can also display just the thumbnail without the full embed by adding srcdoc code into the iframe code, example below – swap out the video ID for your own video.
There’s a full demo with code here – https://css-tricks.com/lazy-load-embedded-youtube-videos/
srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=1><img src=https://img.youtube.com/vi/Y8Wp3dafaMQ/hqdefault.jpg><span>▶</span></a>"