How do I LazyLoad thumbnail images in Debut?

Solved
SeaSpray
Tourist
24 0 1

I've gotten LazyLoad to work on my other pages except product-template.liquid thumbnail section.

        <div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} thumbnails-slider--active{% endif %}">
          {% if enable_thumbnail_slides == true %}
            <button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}">
              {% include 'icon-chevron-left' %}
              <span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>
            </button>
          {% endif %}
          <ul class="grid grid--uniform product-single__thumbnails product-single__thumbnails-{{ section.id }}">
            {% for image in product.images %}
              <li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item js">
                <a href="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"
                   class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
                   data-thumbnail-id="{{ image.id }}"
                   {% if enable_zoom %}data-zoom="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
                     
<img class="product-single__thumbnail-image lazyload" data-src="{{ image.src | img_url: '110x110', scale: 2 }}" alt="{{ image.alt | escape }}">
                  
                                     
                </a>
              </li>
            {% endfor %}
          </ul>
          {% if enable_thumbnail_slides == true %}
            <button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}">
              {% include 'icon-chevron-right' %}
              <span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>
            </button>
          {% endif %}
        </div>
      {% endif %}
 
 
Can someone help me out with this?
 
Thanks
0 Likes
Syed_Mustafa
Shopify Partner
252 5 18

Hello  
Welcome to the Shopify Community!

This is Syed Mustafa a professional Shopify Developer. As I'm sure you well know, page speed has become a factor for ranking in the search engines. That's why if you're investing lots of time and money into getting the rankings you deserve, you shouldn't be blowing it by having a slow website.

Longer load times have also been shown to negatively affect conversions.

“My Aim” is to optimize the website speed up to 90% in any device. It’s helpful to the visitor who visits on your website and spends much time without annoyed. I've gone through your website speed details and the reason behind why the website is slow is that there are lots of unused code of Javascript and CSS that's why your website loading speed time is more than a standard website and slow speed means that you are losing your potential customers and profit so it's a work that can be done by custom coding and I am professionally able to do this for you.

Drop your reply at Syedmustafanadeem99@gmail.com and let me fix it.

Happy Sending,
speed down.png

If helpful then please Like and Accept Solution.
Do you need custom changes on the store or want a complete speed optimization? Hire me.
Need a dropshipping expert or wants to alive your dead dropshipping store?
Feel free to contact me at Syedmustafanadeem99@gmail.com
0 Likes
oreoorbitz
Shopify Partner
97 10 63

The images have lazyloading enabled already.

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes
0 Likes
SeaSpray
Tourist
24 0 1

When I use the Google PageSpeed Insights for 

https://seasprayjewelry.com/products/sterling-silver-freshwater-pearl-solitaire-ring

I get Defer Offscreen Images 

2020-10-06_082653.jpg

So the lazyload I put in isn't working.

 

Any suggestions?

 

Thanks

0 Likes
Speedimize
Shopify Partner
74 4 25

This is an accepted solution.

Hi SeaSpray, 

 

Aibek is here from Growavelabs Agency. 

 

Hope this message finds you well and safe. 

 

First, you use lazysizes.js to defer loading of hidden images. The problem is that this library thinks the images are in the visible area of the web page. Therefore, the pictures are loaded immediately. But in reality they are hidden from the side. When users click on product thumbnails, the images are shown. The Pagespeed Insights algorithm can figure this out.

Alternatively, you can manually adjust the lazysizes. To do this, you need to lower the expand option. Below will be the code, try to paste immediately after connecting the js file lazysize.js to theme.liquid

window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.expand = 10; //default 360-500 lazySizesConfig. expFactor = 1.5; //default: 1.7
 
If you have other questions, our developers can help you with that. Our agency is now offering free speed optimization for the Shopify Stores. 
 
Feel free to fill out this form, and we can help you with your other requests. Link you can find here: https://mailchi.mp/f33da12dcb76/optimize-my-website

 

We Speedimize your store
Speed performance is our priority but with comfort

If our help was useful, please like it or accept it as a solution :)
0 Likes