Solved

Can I apply lazy loading to a product gallery video on Shopify?

JohnDx
Excursionist
12 0 3

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.

Accepted Solutions (2)

OpenThinking
Shopify Partner
321 81 120

This is an accepted solution.

Hi there,
Jack from OpenThinking here!

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

 

<video preload="none" poster="placeholder.png"></video>

 


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.

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]

View solution in original post

OpenThinking
Shopify Partner
321 81 120

This is an accepted solution.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/lozad.js/1.0.8/lozad.min.js"></script>

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

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]

View solution in original post

Replies 4 (4)

OpenThinking
Shopify Partner
321 81 120

This is an accepted solution.

Hi there,
Jack from OpenThinking here!

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

 

<video preload="none" poster="placeholder.png"></video>

 


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.

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]
JohnDx
Excursionist
12 0 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!

OpenThinking
Shopify Partner
321 81 120

This is an accepted solution.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/lozad.js/1.0.8/lozad.min.js"></script>

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

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]
JohnDx
Excursionist
12 0 3

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.