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?

[JoesIdeas]

Couple things you can do:

A) Lazy load youtube videos, you do it the same way you lazy load images (reference: https://speedboostr.com/shopify-lazy-loading). This will help.

B) The best way, but a little more effort is to create a static image with a play button and load that, then set a JavaScript listener for click on the image and when that gets clicked, replace the image with the embedded video. I don't have a tutorial for this one but just send that explanation to your developer, they should be able to figure it out. If you get stuck we have a service called Deferred Video Loading to solve that: https://speedboostr.com/services.

If editing yourself, remember to duplicate your live theme first and work off the new backup theme while you're editing, so any changes don't affect the live site + you can measure the before / after to verify you've done it correctly and gained speed.

[Ryan-Mathias]

Unfortunately, I already tried adding the code through this tutorial (https://www.annacantrell.com/how-to/how-to-defer-loading-iframe-content/) to defer the <iframe> from loading until later, but every time I save my product description with the new HTML embedded code it removes src="" making the JavaScript useless and not solving my issue.

I contacted Shopify support about this and they sent the issue off to their developer team to see what can be done, but have not heard anything back.

Also, I do not want to go the route of just adding a picture with a link, but thank you for that idea as a last resort.

[Ryan-Mathias · Accepted solution]

I found a solution/work-around to lazy load the embeds on most popular browsers (Google Chrome, Firefox and soon to be Safari) without needed to add any JavaScript.

Just add loading="lazy" after <iframe and it works without any other coding needed.

Example:

<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.

[Ryan-Mathias]

I found an even better solution than just lazy loading. It is called the Facade Method and it SIGNIFICANTLY improves 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...

[trees]

Any idea why doing this would cause the video not to work anymore?

[JoesIdeas]

It depends what you mean by "not work anymore".

I would include a url and a description of exactly what isn't working. Someone should be able to investigate and see why.

I'd guess that your javascript is broken and not loading the video container correctly when the user scrolls.