Youtube allows you to embed videos in your website. It is said that having a rich content (like a video) in your website can have a positive impact on your SEO score in the eyes of search engines like Google or Bing.
So I created a video for my experimental Mood Recommendation AI, and tried to embed it in my website. I used the code I got from youtube. It gave me this code:
<iframe
width="100%"
height="100%"
src="https://www.youtube.com/embed/jzx9bpFXSzE"
title="How Does Taranify Work?"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowFullScreen
loading="lazy"
></iframe>
It’s very easy, but the problem was it affected my core web vitals heavily in PageSpeed tool:
The Total Blocking Time is ridiculously high and that’s because of all the scripts and contents that Youtube iframe is loading. I had even put loading="lazy" on iframe but it didn’t make much difference!
What is a Facade for Third-party Embeds ?
Third-party embeds (Youtube, Google maps, Vimeo, Social media, etc.) usually have some contents that are not crucial for end-user in the beginning.
One way is to defer them with Lazy Loading, another way is to replace them with a static image that looks very similar to the actual embedded element. And when user actually needs it (such as clicking on it), we dynamically load the actual element.
You can have a facade for an iFrame such as lazyframe , for a Youtube video such as this or this , for Vimeo such as this , live chats , or even build your own facade with Javascript/Typescript.
How I Used Facade for Youtube Embed in NextJs 13?
NextJs 13 introduced a new structure and ways of doing things. After searching and trying different npm packages, I decided to add this package:
npm i react-lite-youtube-embed
This package doesn’t add its CSS by default, so add this on top of your page:
import "react-lite-youtube-embed/dist/LiteYouTubeEmbed.css";
Then, embed your Youtube video like this:
<LiteYouTubeEmbed
id="jzx9bpFXSzE"
title="How Does Taranify Work?"
poster="maxresdefault"
/>
This is responsive by default and takes up 100% of width. Notice that I decided to use poster="maxresdefault" to load the facade image with the highest available resolution.
After than, my core web vitals assessment is like this:
Voila!
It’s a huge improvement (2110 ms). The page is blazingly fast and in face for the first time I got this assessment result:
Which made me to thank Chromium for PageSpeed tool in this tweet:
Such a satisfying feeling when I got this from PageSpeed for https://t.co/wPSr3BY3TE , Thank you @ChromiumDev pic.twitter.com/OgTwkVxnOj
— Arman ð» (@programmerByDay) August 16, 2023
Thanks for reading. I hope it’s been useful.
Follow me on X for more tips and knowledge sharings.