Lazy Loading vs Eager Loading on Shopify: When to Use Each

Quick Comparison: Lazy Loading vs Eager Loading

Before diving deep, here's the fundamental difference. Both strategies control when the browser downloads a resource — but their goals are opposite.

The ideal Shopify store uses both — eager loading for the content visitors see first, lazy loading for everything they'll scroll to later. The challenge is knowing where to draw the line, especially when "above the fold" differs across devices. Test your store's speed to see how your current loading strategy performs.

How Each Loading Strategy Works Under the Hood

Eager Loading: The Default Path

Eager loading is what browsers do by default. When the HTML parser encounters an <img> tag without a loading attribute, it immediately queues the image for download:

This is fast and predictable for above-fold images. The downside? If you have 40 images on a collection page, the browser tries to download all 40 simultaneously. Your hero image — the one that determines your LCP score — has to share bandwidth with 39 other images the visitor hasn't scrolled to.

Lazy Loading: Deferred Until Needed

When you add loading="lazy" to an image, the browser registers it but doesn't download it until the IntersectionObserver detects the image is approaching the viewport:

This extra step is exactly why lazy loading your LCP image is so costly — you're adding an unnecessary wait for your most important visual element. But for images below the fold, this deferral is pure benefit: less bandwidth competition and faster initial render.

When to Use Eager Loading on Shopify

Eager load any element that appears in the initial viewport — what the visitor sees before scrolling. On Shopify, this typically means:

When to Use Lazy Loading on Shopify

Lazy load anything the visitor won't see until they scroll. On most Shopify stores, that's the majority of images:

For more detail on what to lazy load and the technical implementation, see our full Shopify lazy loading guide.

Loading Strategy by Shopify Page Type

Different page templates have different LCP elements and content structures. Here's the optimal loading strategy for each:

How to Implement Both Loading Strategies in Shopify Liquid

Here's the practical Liquid code for implementing the right loading strategy across your theme. This follows Shopify's native lazy loading best practices.

Basic: Section-Index Based Loading

{%- liquid
  if section.index > 2
    assign loading = "lazy"
  else
    assign loading = "eager"
  endif
-%}

{{ section.settings.image | image_url: width: 1200 | image_tag: loading: loading }}

Advanced: LCP Image With fetchpriority

{%- if section.index == 1 -%}
  {%- comment -%} Hero section — LCP image, maximum priority {%- endcomment -%}
  {{ section.settings.image | image_url: width: 1400 | image_tag: loading: "eager", fetchpriority: "high", decoding: "sync" }}
{%- elsif section.index == 2 -%}
  {%- comment -%} Second section — eager but normal priority {%- endcomment -%}
  {{ section.settings.image | image_url: width: 1200 | image_tag: loading: "eager" }}
{%- else -%}
  {%- comment -%} Below fold — lazy load {%- endcomment -%}
  {{ section.settings.image | image_url: width: 1200 | image_tag: loading: "lazy" }}
{%- endif -%}

Product Grid: First Row Eager, Rest Lazy

{%- for product in collection.products -%}
  {%- if forloop.index <= 4 and section.index <= 2 -%}
    {%- assign img_loading = "eager" -%}
  {%- else -%}
    {%- assign img_loading = "lazy" -%}
  {%- endif -%}

  {{ product.featured_image | image_url: width: 600 | image_tag: loading: img_loading, alt: product.title }}
{%- endfor -%}

fetchpriority: The Third Loading Strategy You Should Know

Beyond lazy and eager, there's a third lever: fetchpriority. This attribute doesn't control when a resource loads but how important it is relative to other resources:

The combination of loading="eager" + fetchpriority="high" on your LCP image is the most aggressive loading strategy available. It tells the browser: "Download this immediately, and prioritize it over everything else." For LCP optimization, this combination typically shaves 100–300ms off your LCP time.

Frequently Asked Questions

The Right Loading Strategy Makes a Real Difference

Lazy loading vs eager loading isn't a binary choice — it's about applying the right strategy to the right element. Eager load your LCP image with high priority, eager load the rest of the above-fold content, and lazy load everything below the fold. That's the formula that gets you the fastest possible initial render without wasting bandwidth.

But remember: image loading strategy is only part of the equation. Third-party scripts from apps often cause more performance damage than unoptimized images. A holistic approach — handling images, scripts, CSS, and fonts together — delivers the best results.

Next step: Run your free speed test to see how your current loading strategy impacts performance, then explore our complete Shopify speed optimization guide for the full picture.