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 Playlist 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.
How I Used Facade for Youtube Embed in NextJs 13?
npm i react-lite-youtube-embed
This package doesn’t add its CSS by default, so add this on top of your page:
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:
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:
Thanks for reading. I hope it’s been useful.
Follow me on X for more tips and knowledge sharings.