How can I add lazy loading to a product gallery video on Debutify?

Store Design
,
1

Is there a way i can add lazyloading to a product gallery video?

I have the product images shown first and the videos isnt even on screen, i want it to load after the galllery previews the video.

ive been getting a loading speed of 30secs on my product page, while 3 secs on my homepage.

ive tried looking for a fix, but all i got was how to apply lazy loading to images.

Im using Debutify.

2

Hi there,
Jack from OpenThinking here!

If you’re using HTML5’s tag and for videos where playback is initiated by the user (i.e., videos that don’t autoplay), specifying the preload=“” attribute on the element may be desirable:

Otherwise you could use lozad.js A super lightweight option that uses Intersection Observer only, as such, it’s highly performant. It is well documented, with plenty of markup examples.

let me know if this works for your. If yes; accept my answer and give me thumbs up! Thank you.

2 Likes
3

Ive found Lozad.js to be what i wanted, thank you!

Im just not sure how to install it, i use Cloudflare and im not sure how i would go about installing it.

if i dont understand how to use the CDN install,

(i use a youtube url) ill just get back to the original solution of using preload method. If you know how to use Lozad.js with cloudflare you wont have to bother with answering this. but where would the video file be in my Directory, i have a Snippet “product-template.liquid” and Section “product-template.liquid” or would i have go look in " Theme, theme.scss, theme.js?

im applying the video where you add pictures for products, no external apps or description.

Thanks!

1 Like
4

To load the script You need to add the script tag in your body

You can add it before the inside layout/theme.liquid

2 Likes
5

Thank you!

This has somewhat improved the speed, but it looks like the youtube player is the main issue.

I checked on PageSpeed Insights

Unused JavaScripts

youtube.com file "base.js is taking around 600 KiB

www-embed-player.js (youtube again) 100 KiB

www-widgetapi.js ( yt) 50 KiB

Unused css

www-player.css (yt) 60 KiB

At this point i’m going to either try remove the video Url and upload a downloaded version,

or remove these codes to see if i’m using a different type of player.

1 Like