Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
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.
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
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.
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!
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
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.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024