Embedded YouTube videos can slow down your page and hurt your Lighthouse performance score, especially in the Largest Contentful Paint (LCP) and Total Blocking Time (TBT) metrics. Here are some ways to improve it:
1. Lazy Load the YouTube Video (Best Option)
Instead of embedding the YouTube iframe directly, replace it with a clickable thumbnail that loads the video only when clicked.
- Use a static image (YouTube thumbnail) as a placeholder.
- When the user clicks, replace the image with the actual iframe.
- This avoids loading the heavy YouTube player on initial page load.
Example code:
<div class="youtube-wrapper" data-id="VIDEO_ID">
<img src="https://img.youtube.com/vi/VIDEO_ID/hqdefault.jpg" alt="YouTube Thumbnail">
<button class="play-button">▶</button>
</div>
<script>
document.querySelectorAll('.youtube-wrapper').forEach(wrapper => {
wrapper.addEventListener('click', function () {
const videoId = this.getAttribute('data-id');
const iframe = document.createElement('iframe');
iframe.setAttribute('src', `https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0`);
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('allow', 'autoplay; encrypted-media');
iframe.setAttribute('allowfullscreen', 'true');
this.innerHTML = ''; // Remove thumbnail
this.appendChild(iframe);
});
});
</script>
2. Use YouTube’s Lite Embed
Google provides a lite YouTube embed solution that is much lighter than the default iframe:
- Use lite-youtube.
- Replace your
<iframe>with<lite-youtube>.
Example:
<lite-youtube videoid="VIDEO_ID"></lite-youtube>
<script type="module">
import 'https://cdn.jsdelivr.net/npm/lite-youtube-embed/src/lite-yt-embed.js';
</script>
3. Use Facade Images with YouTube No-Cookie Domain
Instead of embedding a full YouTube player, use an image and load the video on click.
<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" loading="lazy"></iframe>
This reduces third-party cookies and improves privacy while still helping performance.
4. Preload & Optimize Image Thumbnails
If you use a placeholder image, preload it to speed up rendering:
<link rel="preload" href="https://img.youtube.com/vi/VIDEO_ID/hqdefault.jpg" as="image">
5. Reduce Render-Blocking Scripts
- If you must use the iframe, defer loading it using
loading="lazy":
<iframe src="https://www.youtube.com/embed/VIDEO_ID" loading="lazy"></iframe>
The best approach is to use a thumbnail with lazy loading, either manually or with lite-youtube-embed. This can significantly improve your Lighthouse scores, especially LCP and TBT.
