Shopify Question posted in
The Shopify help center can be found here.

How do I add lazy loading to my product page on Shopify?

I would like to speed up my Shopify website load time by lazyloading my images. The problem is that I cannot locate the specific image files in the code in order to add the class= "lazyload" to it.

Here is what I have tried:
I have pasted this code at the top of the product-template.liquid page:

<!--Lazy Loading -->
{{ "lazysizes.min.js" | asset_url | script_tag }}
<style>.lazyload,.lazyloading{opacity:0}.lazyloaded{opacity:1;transition:opacity.3s}</style>

And then adding the code: class= "lazyload" to the end of any chunk of code that I think looks like an image, but it doesn’t work.
Product-template.liquid page 1 page 2 page3

Would anyone be able to help me understand where this code goes and how to identify where I need to put the code to lazyload an image?

Tags:

2

Answers


  1. 0

    I see that you’re using <img src="..." /> . For lazyload to work, change it to <img data-src="..." />

    And the better alternative is to implement native lazy loading. Just add loading="lazy" to your images and voila.

    Ex: <img src="https://dummyimage.com/600x400/000/fff" loading="lazy" />

    More details & a combined use with lazyload library – https://web.dev/native-lazy-loading/ & https://caniuse.com/loading-lazy-attr

    Login or Signup to reply.
  2. 0

    In the online code editor, add the below code before close tag.

    {{ '//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js' | script_tag }}

    Add the class lazyload to images that should be lazy loaded. In addition, change the src attribute to data-src.

    <img class="lazyload" data-src="image.jpg" />

    Instead of

    <img src="image.jpg" />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search