How can I speed up page load time with YouTube embeds?

[Ryan-Mathias]

Hi, I have a YouTube embeded video on some of my product pages and it increased my page load time by 4-7 seconds. I know that I can add the media through Shopify instead, but I do not want to go that route and I read that it doesn't help much.

So, does anyone know how to have my YouTube embeds load after everything else? Or at least speed up the page load time while keeping the video?

[oreoorbitz]

If your youtube video is bellow the fold, you can add a attribute of loading="lazy" to the youtube iframe and that will do the trick, however, I'm assuming its above the fold you added it to the product pages, in which case, unless you are autoplay the videos, then you will need to use the "Facade" method.

This is an example implementation:

https://css-tricks.com/lazy-load-embedded-youtube-videos/

If you want to autoplay the video, then there is nothing to be done, and you can't have you cake and eat it to.

[Ryan-Mathias]

Let me see if I understand...

You are saying that I should put an image there with a play icon, then put the entire <iframe>...</iframe> code as the link for that image?

[Ryan-Mathias · Accepted solution]

Never mind my last comment...I definitely didn't understand.

But YOU WERE RIGHT!

My videos are all in the product description (so below the fold) and all I had to do was add loading="lazy" after <iframe and it works without any other coding needed! Thanks!

Example for others:

<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLv8mFvlUWR9qab3rjaEMPIp1QrnGkLAsL" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

This also works for images by putting loading="lazy" after <img.

However, it only works for certain browsers such as Google Chrome, Firefox and a few other popular ones. Safari is implementing it soon too.

[Ryan-Mathias]

For anyone looking, I found how to do the Facade Method and SIGNIFICANTLY improve page load time, while still allowing for the YouTube embed.

Here's how to do it: https://community.shopify.com/c/Technical-Q-A/How-To-Implement-the-Facade-Method-for-YouTube-Embedde...

[IGITAD]

Shopify strips out the ::before classes so the arrow does not show.