Shopify Lazy Load Images: Complete Guide for LCP & Performance Optimization

                                        lazy-image.liquid
                                    

                                        {% comment %}
Shopify Lazy Load Images Snippet

Usage:
{% render 'lazy-image',
  image: product.featured_image,
  alt: product.title,
  class: 'custom-class',
  priority: true
%}
{% endcomment %}

{% assign img = image %}
{% assign alt_text = alt | default: img.alt | escape %}
{% assign img_class = class | default: '' %}
{% assign is_priority = priority | default: false %}

{% if img != blank %}

  {% if is_priority %}

    <!-- LCP Image (Above the fold) -->
    <img
      src="{{ img | image_url: width: 1200 }}"
      srcset="
        {{ img | image_url: width: 400 }} 400w,
        {{ img | image_url: width: 800 }} 800w,
        {{ img | image_url: width: 1200 }} 1200w
      "
      sizes="(max-width: 768px) 100vw, 50vw"
      alt="{{ alt_text }}"
      class="{{ img_class }}"
      loading="eager"
      fetchpriority="high"
      width="{{ img.width }}"
      height="{{ img.height }}"
    >

  {% else %}

    <!-- Lazy Loaded Image -->
    <img
      src="{{ img | image_url: width: 400 }}"
      data-src="{{ img | image_url: width: 1200 }}"
      srcset="
        {{ img | image_url: width: 400 }} 400w,
        {{ img | image_url: width: 800 }} 800w,
        {{ img | image_url: width: 1200 }} 1200w
      "
      sizes="(max-width: 768px) 100vw, 50vw"
      alt="{{ alt_text }}"
      class="lazyload {{ img_class }}"
      loading="lazy"
      width="{{ img.width }}"
      height="{{ img.height }}"
    >

  {% endif %}

{% endif %}
                                    

                                        loading="eager"
fetchpriority="high"
                                    

                                        loading="lazy"
                                    

                                        srcset="
  {{ img | image_url: width: 400 }} 400w,
  {{ img | image_url: width: 800 }} 800w,
  {{ img | image_url: width: 1200 }} 1200w
"
                                    

                                        width="{{ img.width }}"
height="{{ img.height }}"
                                    

                                        <script>
document.addEventListener("DOMContentLoaded", function () {

  const lazyImages = document.querySelectorAll("img.lazyload");

  const observer = new IntersectionObserver((entries, observer) => {

    entries.forEach(entry => {

      if (entry.isIntersecting) {

        const img = entry.target;

        img.src = img.dataset.src;

        img.classList.remove("lazyload");

        observer.unobserve(img);
      }

    });

  });

  lazyImages.forEach(img => observer.observe(img));
                                    

                                        {% render 'lazy-image',
  image: product.featured_image,
  alt: product.title,
  priority: true
%}
                                    

                                        {% render 'lazy-image',
  image: collection.image,
  alt: collection.title
%}
                                    

                                        {% render 'lazy-image',
  image: section.settings.image,
  alt: 'Banner Image',
  class: 'banner-img'
%}
                                    

                                        width="{{ img.width }}"
height="{{ img.height }}"
                                    

                                        loading="lazy"
                                    

                                        loading="eager"
fetchpriority="high"
                                    

                                        style="background-image:url('{{ img | image_url: width: 20 }}');"
                                    

                                        <link
  rel="preload"
  as="image"
  href="{{ product.featured_image | image_url: width: 1200 }}"
>
                                    

                                        alt="{{ alt_text }}"