Disable Lazyloading on Brooklyn Slideshow

[andylewie]

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:

<img class="hero__image hero__image--{{ block.id }} lazyload fade-in {% unless forloop.first == true %} lazypreload {% endunless %}"
              data-src="{{ img_url }}"
              data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
              data-aspectratio="{{ block.settings.image.aspect_ratio }}"
              data-sizes="auto"
              data-parent-fit="cover"
              data-hero-image
              alt="{{ block.settings.image.alt | escape }}"
              style="object-position: {{ block.settings.image_position }}">

[kai-nguyen · Accepted solution]

Hi,

To remove Lazyloading you can change to this code:

<img class="hero__image hero__image--{{ block.id }}"
    src="{{ block.settings.image | img_url: 'master' }}"
    alt="{{ block.settings.image.alt | escape }}"
    style="object-position: {{ block.settings.image_position }}">

I hope this can help you.

Thank,

[andylewie]

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?

[andylewie]

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?

<div class="hero__slide slide--{{ block.id }}{% if block.settings.image == blank %} slide--placeholder{% endif %}"
              data-hero-slide
              {{ block.shopify_attributes }}>
          {%- if block.settings.image == blank -%}
            <div class="placeholder-background">
              {%- capture current -%}{% cycle 1, 2 %}{%- endcapture -%}
              {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
            </div>
          {%- else -%}
            <noscript>
              {%- if forloop.first == true -%}
                <div class="hero__image-no-js"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}');"{% endif %}></div>
              {%- endif -%}
            </noscript>
            {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
          	<picture>
              <source media="(min-width:501px)" srcset="{{ block.settings.image | img_url: 'master' }}">
              <source media="(max-width:500px)" srcset="{{ block.settings.image | img_url: 'grande' }}">
              <img class="hero__image hero__image--{{ block.id }}" src="{{ block.settings.image | img_url: 'master' }}" alt="{{ block.settings.image.alt | escape }}" style="object-position: {{ block.settings.image_position }}">
            </picture>
          {%- endif -%}

          <div class="hero__text-wrap{% if block.settings.image_overlay %} slideshow__overlay{% endif %}">
            <div class="hero__text-align wrapper">
              <div class="hero__text-content" data-hero-text-content>
                {%- unless block.settings.slide_subheading == blank -%}
                  <p class="hero__subtitle">
                    {{ block.settings.slide_subheading | escape }}
                  </p>
                {%- endunless -%}
                {%- unless block.settings.slide_heading == blank -%}
                  <h2 class="hero__title h1">
                    {{ block.settings.slide_heading }}
                  </h2>
                {%- endunless -%}
                {%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
                  <a href="{{ block.settings.button_link }}" style="color: {{ block.settings.slide_button_label_color }}; background-color: {{ block.settings.slide_button_background_color }}" class="btn hero__cta">
                    {{ block.settings.button_label | escape }}
                  </a>
                {%- endif -%}
              </div>
            </div>
          </div>
        </div>

[kai-nguyen]

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,