How To Defer/Lazy Load YouTube Embeds

Solved
Ryan-Mathias
Excursionist
12 3 2

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?

Accepted Solution (1)

Accepted Solutions
Ryan-Mathias
Excursionist
12 3 2

This is an 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.

View solution in original post

Replies 4 (4)
oreoorbitz
Shopify Partner
213 27 123

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.

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes

If your looking for a pagespeed solution for your Website, take a look at: https://renderbetter.com/
Ryan-Mathias
Excursionist
12 3 2

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
Excursionist
12 3 2

This is an 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
Excursionist
12 3 2

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