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.
Table of Contents
The Three 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.
Most modern themes will support this method. Googling your theme and “video embed widget”, e.g. “elementor video embed widget” will usually find the article related to how to configure this in the theme.
3. srcdoc method
Using the srcdoc method which is similar to the place holder image method and an excellent fallback method if your theme, or CMS doesn’t support either of the other two methods, details further below.
How We Do Video Lazy Loading in WordPress
Ideally we want to use option two from above if possible as it’s going to be the best for SEO and site speed. This method is usually preferable to using a plugin BUT it does require manual editing on every single page which can be a lot of work. Often the best approach is to use the a plugin and then manually edit the top 3-5 busiest pages.
For our WordPress Speed Optimization work we typically use either WPRocket or FlyingPress for our caching plugin and both of these have iframe and Youtube Lazy Load options built in. These plugins work maybe 60-70% of the time. There are some themes live Divi that these plugins have a problem and in that case we’ll use PerfMatters for Youtube and iFrame lazy loads.
If you use WPRocket 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
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
In the code snippet further below you’ll can copy the loading=”lazy” 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/
If you want to see an example of how this looks in the wild, the videos on the homepage of this site https://www.didgeridoobreath.com are using this method.
To use this on your own site replace the Youtube ID and the title.
NOTE on some devices this embed will need two clicks to play. This is due to browsers locking down auto play features of video with sound.
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/Rsp8vl-gb9M&autoplay=1"
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/Rsp8vl-gb9M?autoplay=1><img src=https://img.youtube.com/vi/Rsp8vl-gb9M/hqdefault.jpg alt='How to write a meta description'><span>▶</span></a>"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
title="How to write a meta description"
></iframe>