Shopify Native Lazy Loading: What Works & What Doesn't

What Shopify Does Natively for Lazy Loading

Shopify doesn't have a single "lazy loading" toggle in your admin panel. There's no checkbox under Settings → Performance that enables it store-wide. Instead, Shopify provides tools for theme developers to implement lazy loading — and whether those tools are used depends entirely on your theme.

Here's what Shopify provides at the platform level:

These are solid building blocks. But they're building blocks — not a complete solution. The gap between "tools available" and "tools actually used in your store" is where most performance problems live.

Curious where your store stands? Run a free speed test to see if lazy loading is helping or hurting your performance.

How Shopify's image_tag and section.index Work

The image_tag Liquid filter is Shopify's recommended way to render images in themes. When a theme developer uses it correctly, it handles responsive sizing, format conversion, and lazy loading in one line:

{{ product.featured_image | image_url: width: 800 | image_tag: loading: "lazy" }}

But the real power comes from combining it with section.index. This property tells the theme which position a section occupies on the page. Shopify's performance team recommends using it like this:

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

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

This code eager-loads images in the first two sections (typically hero and featured collection) and lazy-loads everything below. It's a smart approach that avoids the #1 lazy loading mistake — lazy loading your LCP image.

The image_tag filter also generates a srcset attribute with multiple image widths, letting the browser pick the optimal size. This works with lazy loading — when the browser decides to load a lazy image, it picks the right size from the srcset based on the viewport width.

Which Shopify Themes Have Native Lazy Loading?

Not all themes are equal when it comes to lazy loading implementation. Here's the breakdown:

Themes With Good Native Lazy Loading

Themes With Poor or No Native Lazy Loading

Not sure which category your theme falls into? The easiest way to find out is to inspect your site — which we'll cover in the testing section below. For a deeper look at theme performance, check our guide on the fastest Shopify themes.

5 Things Shopify's Native Lazy Loading Doesn't Cover

Even with a modern theme using image_tag correctly, native Shopify lazy loading has significant blind spots:

How to Check If Your Shopify Store Has Lazy Loading

Before making any changes, verify whether your theme already implements lazy loading. Here are three ways to check:

Method 1: Inspect Element (30 Seconds)

Method 2: Chrome DevTools Network Tab

Method 3: PageSpeed Insights

Run your store through Google PageSpeed Insights. If you see the "Defer offscreen images" recommendation, your below-fold images aren't being lazy-loaded. If that recommendation doesn't appear, lazy loading is likely working. You can also use our free Shopify speed test for a quick assessment.

Adding Native Lazy Loading to Shopify Manually

If your theme doesn't have lazy loading or implements it poorly, here's how to add it manually. This requires editing your theme's Liquid files — make a backup first.

Step 1: Use image_tag Instead of img Tags

Find instances where your theme uses raw <img> tags and replace them with Shopify's image_tag filter. This alone gives you responsive images, WebP conversion, and the foundation for lazy loading.

<img src="{{ product.featured_image | image_url: width: 800 }}" alt="{{ product.title }}" />

{{ product.featured_image | image_url: width: 800 | image_tag: loading: "lazy", alt: product.title }}

Step 2: Add section.index Logic

To avoid lazy loading above-the-fold images, add conditional logic based on section position:

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

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

Step 3: Add fetchpriority to Your LCP Image

For your hero image or main product image (the likely LCP element), add fetchpriority="high" to tell the browser to prioritize it:

{{ section.settings.hero_image | image_url: width: 1200 | image_tag: loading: "eager", fetchpriority: "high" }}

Common Native Lazy Loading Mistakes on Shopify

These mistakes are exactly why many merchants prefer a comprehensive solution. If you want to understand the full picture of what's slowing your store down, diagnose your store's speed issues with our step-by-step guide, or simply follow the complete optimization guide.

Frequently Asked Questions

The Bottom Line on Shopify's Native Lazy Loading

Shopify does have native lazy loading — but it's a tool for theme developers, not a store-wide feature. If you're on a modern theme like Dawn that implements image_tag and section.index correctly, your theme images are probably lazy-loaded properly. But that still leaves app-injected content, CSS background images, videos, and — critically — render-blocking scripts completely unaddressed.

For most stores, native lazy loading covers about 30–40% of the optimization opportunity. The rest requires script deferral, image optimization, critical CSS inlining, and intelligent resource prioritization — exactly what Thunder Page Speed Optimizer does automatically.

Start by testing your store: Run a free speed test to see where you stand, then decide whether native lazy loading is enough or if you need a more comprehensive approach.