Shopify Lazy Loading: Images, Videos & More

What Is Lazy Loading?

Lazy loading is a strategy that delays loading non-critical resources until they're actually needed. Instead of downloading every image on the page the moment a visitor arrives, the browser only loads images as the visitor scrolls toward them.

Think of it like a restaurant kitchen: instead of preparing every dish on the menu the moment the restaurant opens, they cook each dish when a customer orders it. The result? Faster first service and less wasted effort.

On a typical Shopify product or collection page, you might have 20–50 images. Without lazy loading, the browser tries to download all of them simultaneously, fighting for bandwidth and slowing down the images your visitor actually sees first — the hero banner, the product photo, the navigation icons.

With lazy loading, only the above-the-fold images load immediately. Everything below the fold waits until the visitor scrolls near it. The result: faster initial page render, lower bandwidth usage, and a better experience — especially on mobile.

Why Lazy Loading Matters for Shopify Stores

Shopify stores are image-heavy by nature. Product photos, lifestyle images, collection banners, trust badges, app widgets — a typical homepage can easily have 30+ images totaling 5–15 MB of data.

Without lazy loading, all of those images compete for bandwidth on initial page load. Here's what that means in practice:

Proper lazy loading can cut initial page weight by 40–70% on image-heavy pages. That translates directly to faster first paint and better user experience. Lazy loading is just one piece of the puzzle though — for the full picture, read our complete optimization guide.

The #1 Lazy Loading Mistake (and It's Costing You 1 Second)

Here's the counterintuitive truth: the most common lazy loading mistake isn't failing to lazy load — it's lazy loading too aggressively.

Specifically, lazy loading your hero image or LCP element. According to Shopify's own performance team:

Why does this happen? When you set loading="lazy" on an above-the-fold image, you add an unnecessary step:

That extra detection step adds 200–1000ms of delay to your most important image. On mobile with slower JavaScript execution, it's even worse.

The rule is simple:

• ✓ Above the fold: Eager load (no loading attribute, or loading="eager")
• ✓ Below the fold: Lazy load (loading="lazy")
• ✗ Never: Lazy load the hero image, product featured image, or any LCP candidate

Sounds simple, right? In practice, it's tricky. "Above the fold" is different on every device, every screen size, and every page template. What's above the fold on a 27" desktop monitor might be below the fold on an iPhone SE. Getting this right manually requires responsive awareness across dozens of breakpoints.

Native vs JavaScript Lazy Loading: Which to Use in 2026

There are two approaches to lazy loading images, and this decision matters more than most Shopify developers realize.

Native Lazy Loading (loading="lazy")

Added to the HTML spec in 2019, native lazy loading is now supported by 96%+ of browsers (all modern Chrome, Firefox, Safari, and Edge versions). You simply add loading="lazy" to your <img> or <iframe> tag:

<img
  src="product-photo.jpg"
  loading="lazy"
  alt="Blue running shoes - side view"
  width="800"
  height="600"
/>

That's it. No JavaScript library, no configuration, no bundle size increase. The browser handles everything.

JavaScript Lazy Loading (lazysizes, etc.)

Before native lazy loading, the standard approach was using JavaScript libraries like lazysizes. These libraries use the IntersectionObserver API to detect when images approach the viewport, then swap a placeholder data-src with the real src.

<!-- JS lazy loading pattern -->
<img
  data-src="product-photo.jpg"
  class="lazyload"
  alt="Blue running shoes - side view"
/>
<script src="lazysizes.min.js" async></script>

This still works but adds JavaScript overhead — typically 5–10 KB of additional script that needs to be downloaded, parsed, and executed before any lazy loading begins.

Comparison

What to Lazy Load (and What NOT To)

Not all resources should be treated equally. Here's a practical breakdown for Shopify stores:

✓ Lazy Load These

✗ Never Lazy Load These

How to Implement Lazy Loading in Shopify Liquid

If you're editing your theme code manually, here's how to implement lazy loading correctly in Shopify's Liquid templating language.

Method 1: Shopify's image_tag Filter (Recommended)

Shopify's Liquid image_tag filter automatically sets loading="lazy" on images. It also handles responsive srcset and sizes attributes for optimal delivery.

{{- product.featured_image | image_url: width: 800 | image_tag:
    loading: 'lazy',
    widths: '200,400,600,800',
    sizes: '(min-width: 768px) 50vw, 100vw',
    alt: product.featured_image.alt -}}

For your hero/LCP image, explicitly set eager loading:

{{- section.settings.hero_image | image_url: width: 1200 | image_tag:
    loading: 'eager',
    fetchpriority: 'high',
    widths: '600,900,1200,1800',
    sizes: '100vw',
    alt: section.settings.hero_alt -}}

Method 2: Raw HTML with Loading Attribute

If you're writing raw HTML (custom sections, snippets), add the attribute directly:

<!-- Below-fold image: lazy load -->
<img
  src="{{ image | image_url: width: 600 }}"
  alt="{{ image.alt | escape }}"
  width="{{ image.width }}"
  height="{{ image.height }}"
  loading="lazy"
  decoding="async"
/>

<!-- Above-fold image: eager load -->
<img
  src="{{ image | image_url: width: 1200 }}"
  alt="{{ image.alt | escape }}"
  width="{{ image.width }}"
  height="{{ image.height }}"
  loading="eager"
  fetchpriority="high"
/>

Method 3: Smart Loading Based on Section Position

Dawn and other Shopify 2.0 themes use a clever pattern: they track which section is first on the page and only eager-load images in that section.

{%- liquid
  # In the layout or page template:
  assign first_section = true
-%}

{%- for block in section.blocks -%}
  {%- if first_section -%}
    {%- assign loading_strategy = 'eager' -%}
    {%- assign fetch_priority = 'high' -%}
    {%- assign first_section = false -%}
  {%- else -%}
    {%- assign loading_strategy = 'lazy' -%}
    {%- assign fetch_priority = 'auto' -%}
  {%- endif -%}

  {{- block.settings.image | image_url: width: 800 | image_tag:
      loading: loading_strategy,
      fetchpriority: fetch_priority -}}
{%- endfor -%}

This approach is better than blanket lazy loading, but it's still imperfect — it doesn't account for how many images are visible above the fold in each section, and it varies by device.

Beyond Images: Lazy Loading Videos, Iframes, and Sections

Images are the obvious target, but lazy loading principles apply to other heavy resources too.

Video Embeds (YouTube, Vimeo)

A YouTube embed loads 500–800 KB of JavaScript plus the video player UI — even if the visitor never hits play. Two common fixes:

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  loading="lazy"
  title="Video title"
  allow="accelerometer; autoplay; encrypted-media; gyroscope"
  allowfullscreen
></iframe>

<div class="video-facade" data-video-id="VIDEO_ID">
  <img
    src="https://i.ytimg.com/vi/VIDEO_ID/hqdefault.jpg"
    alt="Video thumbnail"
    loading="lazy"
  />
  <button class="play-btn" aria-label="Play video">▶</button>
</div>

Shopify Section Rendering API

Shopify introduced the Section Rendering API which lets you load entire sections on demand — not just images. This is like lazy loading on steroids: instead of loading just the image later, you load the entire section's HTML, CSS, and JavaScript only when needed.

Combined with IntersectionObserver, you can build a true "load on scroll" experience where below-fold sections don't exist in the initial HTML at all. This is particularly powerful for:

• • Product recommendation sections
• • Review widgets
• • Instagram feed sections
• • Heavy third-party app widgets

Third-Party App Scripts

This is where the real performance wins hide. Most Shopify apps inject render-blocking scripts into your store's <head>. While you can't directly "lazy load" a script with the loading attribute, you can defer or async them:

<!-- Blocking (bad) -->
<script src="app-widget.js"></script>

<!-- Deferred (better) -->
<script src="app-widget.js" defer></script>

<!-- Async (good for independent scripts) -->
<script src="app-widget.js" async></script>

The problem? You can't always control how apps inject their scripts. Many apps hardcode synchronous script tags that you can't modify without breaking the app. This is the single biggest reason why manual optimization hits a ceiling — and why Thunder exists. Thunder intercepts and re-sequences all script loading automatically, regardless of how apps inject them.

How to Test If Lazy Loading Is Working

You've added loading="lazy" to your images — but how do you know it's actually working? Here are four ways to verify:

1. Chrome DevTools Network Tab

2. Inspect Element

Right-click any below-fold image → Inspect. Look at the <img> tag in the Elements panel. You should see loading="lazy" as an attribute.

3. PageSpeed Insights Audit

Run your page through PageSpeed Insights or test your store speed with our free tool. If lazy loading isn't implemented, you'll see the suggestion: "Defer offscreen images" with an estimate of potential savings (in KB and seconds).

4. Lighthouse in DevTools

Chrome DevTools has a built-in Lighthouse tab. Run a performance audit and check for two diagnostics:

• • "Defer offscreen images" — lazy loading not implemented or incomplete
• • "Largest Contentful Paint image was lazily loaded" — you're lazy loading your LCP (fix this immediately!)

Thunder vs Manual Lazy Loading

Frequently Asked Questions

Related Resources