How to get rid of lazy load prestige theme

How to get rid of lazy load prestige theme

jn45
Tourist
6 0 3

Hi,

 

I recently asked a question about how to get rid of the fade in effect as you are scrolling down the page, and am coming to the conclusion that it is because my website images have lazy loading. How do you get rid of this? Specifically with the prestige theme.

 

Thank you. 

Replies 4 (4)

RokasZa
Tourist
6 0 2

Looking for this solution as well. 

InnesF
Visitor
1 0 0

I've been looking into this for SEO reasons as well, I just want to get it disabled for the first image to help score better on Google's Largest Contentful Paint metric on product pages. SEO wise it's best to keep the others on lazy load though.

I'm wanting to sort this myself too, without going to creators of the Prestige theme (https://maestrooo.com/) to pay them to do it.

I've sent a support request to see if it's possible without paying, I'll let you know if I have any luck!

 

If you want to disable it completely this article might be helpful.

InnesF_0-1654082960913.png

 

Nambrooklyn
Shopify Partner
2 0 0

I spoke with Meastro and they are very unhelpful when it comes to improving image load time on their themes. I can clearly see that their theme causes very slow image load times as compared to many other e-commerce sites where images load instantly. Their explanation was that their theme has to have this slow load, or lazy load because google requires it. I was like BS, if tons of others sites don't have it. They are not helpful. 

Wesley9
Explorer
68 1 10

Hi,

 

I found the solution for the collection page in the Prestige Theme.

You have to go to main-collection.liquid (available in the new version of  the prestige theme)

 

Search for "Lazyload Image", then delete the html-code that is shown below.

<div class="PageHeader__ImageWrapper Image--lazyLoad Image--fadeIn {% if section.settings.apply_overlay %}Image--contrast{% endif %}"
               data-optimumx="1.2"
               data-bgset="{{ collection.image | img_url: 'x600' }} 600w, {{ collection.image | img_url: '800x' }} 800w, {{ collection.image | img_url: '1200x' }} 1200w, {{ collection.image | img_url: '1400x' }} 1400w, {{ collection.image | img_url: '1600x' }} 1600w">
          </div>

 

The pictures of your products will be shown directly when the customer is scrolling down.