Disable Lazyloading on Brooklyn Slideshow

Store Design
1

Can someone help me disable lazyloading for slideshow/hero images on the Brooklyn theme please? It’s really slowing down our LCP.

This is the code that needs to have lazyloading removed:
2

Hi,

To remove Lazyloading you can change to this code:

I hope this can help you.

Thank,

1 Like
3

That has worked, thank you very much.

It would be good to somehow keep the data-width functionality in there as now the LCP for mobile is actually worse than before as it’s loading the full-size image.

Is there a way to have smaller size images load for mobile like the original “data-widths” provided?

4

I have tweaked your code to the following which seems to have helped, but might be a bit rough.

Do you have a more elegant solution to help the mobile LCP?


          {%- if block.settings.image == blank -%}
            

              {%- capture current -%}{% cycle 1, 2 %}{%- endcapture -%}
              {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
            

          {%- else -%}
            
            {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
          	
          {%- endif -%}

          

            

              

                {%- unless block.settings.slide_subheading == blank -%}
                  

                    {{ block.settings.slide_subheading | escape }}
                  

                {%- endunless -%}
                {%- unless block.settings.slide_heading == blank -%}
                  ## 
                    {{ block.settings.slide_heading }}
                  
                {%- endunless -%}
                {%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
                  
                    {{ block.settings.button_label | escape }}
                  
                {%- endif -%}
5

Hi,

To load small image on mobile you can follow this article:

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

I hope this can help you.

Thank,