How to disable lazy loading for above the fold images (Sense Theme)

ferero18
Excursionist
30 0 4

How to disable lazy loading for above-the-fold images (Sense Theme)? Please bare in mind I still want to keep the lazy-loading for the offscreen images, so just the "above the fold" 

 

I'm guessing it would be somewhere in the:

-product-thumbnail.liquid

or

-product-media.liquid

 

but I don't know much about coding, so take this as a "possible hint" of where to look for. Any help is much appreciated

Replies 3 (3)

Cedcommerce
Shopify Expert
718 76 112

Hello @ferero18 ,  

 

To fix this, you need to remove the lazy loading which renders first while loading the page. 

For that, you need to use the “for loop” object in liquid for removing lazy loading by using a condition as given below.

 

{% if forloop.index <= 5 %}

//your image code without lazyload

{% else %}

//your image code with lazyload

{% endif %}

 

Note: You are advised to follow the above instructions only if you are experienced in handling liquid.code or Shopify theme. Else, please consider hiring a Shopify expert. 

 

Check the below-provided image for reference. 

 

Cedcommerce_0-1669985642478.png

 

 

You can also check the below documentation for further help. 

https://shopify.dev/api/liquid/objects/forloop

 

Hope this was helpful, let us know if you need any further help from us in this issue. 

 

All the best, 

CedCommerce

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here
ferero18
Excursionist
30 0 4

Hi, I've applied this as you advised (screenshot below)

Screen 1Screen 1

Screen 2Screen 2

 

I tried it with both 

{% if forloop.index <= 5 %}

and then with {& if forloop.first %} - and waited about 10 minutes after each change to let it sink in.

 

But after running a test on pagespeed.web.dev - nothing changed, and I double-checked on webpagetest.org, which tells you the exact order in which things are requested by the system, and the images from slideshow are still requested after 3s, as before. 

 

I've also found a guy on Reddit with the same problem, and he said:

"All I added was data-immediate-load after the 2nd line of the slideshow.liquid file. This is the Impulse theme, so I don't know how it could vary with other themes.

Look for:

data-section-type="slideshow-section"

and add it underneath that line." "

 

A few people from that Reddit post said their LCP load time has decreased by 60-70% after applying that change - but I see that function/line of code would look different for Sense. Is there any way you could tell me how to apply this code to the Sense theme? As it looks worth testing

 

 

OneCommerce
Shopify Partner
253 19 108

Hi there,
You can access to 1 or 2 files below to find the code you want to edit
Pls use the lazy loading technique for the pre-scroll loaded images or remove the lazy loading technique for the images you do not want to pre-scroll loading

{% if forloop.index <= 5 %}
//your image code without lazyload

{% else %}

//your image code with lazyload

{% endif %}

OneCommerce - The Ultimate eCommerce Solution Platform
We offer 12+ solutions to help increase traffic, maximize conversion rates and generate better revenue for more than 500,000 eCommerce merchants worldwide.

Get know us at: Website | Blog | FAQ | Contact us