Shopify Defer Offscreen Images: Fix the PageSpeed Warning

Why PageSpeed Flags Offscreen Images on Shopify

PageSpeed flags offscreen images when images outside the initial viewport are downloaded before they are needed. On Shopify, that often happens in homepage sections, collection grids, mega menus, recommendation blocks, blog thumbnails, review media, Instagram feeds, and product media galleries.

The cost is not only bandwidth. Early image downloads compete with CSS, fonts, JavaScript, and the image that actually defines the first view. Google’s LCP guidance recommends getting the likely Largest Contentful Paint element visible quickly. A good LCP is 2.5 seconds or faster for at least 75% of visits, and wasting early network priority on lower-page images makes that harder.

If your warning appears alongside large payloads or image delivery warnings, read Shopify image optimization, improve image delivery, and enormous network payloads. Offscreen image deferral is one part of the broader image-speed stack.

The Rule: Lazy Below the Fold, Eager Above the Fold

The simple rule is useful: images below the fold should usually use loading="lazy", while images likely visible in the first viewport should use eager loading. The tricky part is that Shopify sections are reusable. A banner section might be first on the homepage, third on a landing page, and inside a product page template. The same snippet can need different priority depending on placement.

Google’s performance guidance warns against lazy-loading the LCP image. For Shopify, that usually means the homepage hero image, main product image, or top collection banner. If you lazy-load those assets, the browser may discover them late and LCP gets worse even if the offscreen image warning improves.

Manual Step-by-Step: Fix Defer Offscreen Images on Shopify

1. Identify the image that should not be deferred

In PageSpeed Insights, find the LCP element. If it is a hero banner, product image, or collection image above the fold, do not lazy-load it. Give it clear dimensions and high priority.

<!-- Above-the-fold hero image -->
&lbrace;&lbrace; section.settings.hero_image
  | image_url: width: 1600
  | image_tag:
    widths: '750, 1100, 1600',
    sizes: '100vw',
    loading: 'eager',
    fetchpriority: 'high',
    alt: section.settings.hero_image.alt
&rbrace;&rbrace;

For more detail, use the Shopify hero image preload guide and LCP optimization guide.

2. Lazy-load repeated product cards below the first row

Collection grids can download dozens of product images at once. Keep the first visible row eager or default, then lazy-load lower rows. If your grid renders with a loop index, use it to decide priority.

{% assign image_loading = 'lazy' %}
{% assign image_priority = 'auto' %}

{% if forloop.index <= 4 %}
  {% assign image_loading = 'eager' %}
  {% assign image_priority = 'high' %}
{% endif %}

&lbrace;&lbrace; product.featured_image
  | image_url: width: 700
  | image_tag:
    loading: image_loading,
    fetchpriority: image_priority,
    widths: '350, 500, 700',
    sizes: '(min-width: 990px) 25vw, 50vw',
    alt: product.featured_image.alt
&rbrace;&rbrace;

3. Add dimensions so lazy images do not shift layout

Lazy loading can create CLS if the browser does not know how much space to reserve. Shopify’s image tag helper can output width and height, but custom markup often forgets them. Use CSS aspect ratio for cards and reserve stable slots for media.

.product-card__media {
  aspect-ratio: 1 / 1.25;
  overflow: hidden;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

If layout shift is already failing, check the Shopify CLS fix guide before changing image loading behavior across the theme.

4. Delay embedded media and feeds below the fold

Instagram feeds, review photo walls, lookbooks, and video thumbnails are common offscreen-image offenders. Lazy-load their images and consider loading the whole widget after scroll or idle if it is not needed for the first purchase decision.

<img
  src="&lbrace;&lbrace; block.settings.image | image_url: width: 800 &rbrace;&rbrace;"
  loading="lazy"
  decoding="async"
  width="800"
  height="800"
  alt="&lbrace;&lbrace; block.settings.image.alt | escape &rbrace;&rbrace;"
>

5. Retest LCP and the offscreen image audit together

Do not celebrate the offscreen image warning if LCP got worse. The correct result is fewer unnecessary early image downloads and stable or improved LCP. Test mobile first because slower networks and CPUs make image priority problems more visible.

Manual Fix vs Thunder Fix

Common Shopify Templates to Check

Check the homepage first if it uses stacked image sections, hero banners, featured collections, lookbooks, testimonials, and blog grids. Check product pages if they use large media galleries, review photos, recommendation blocks, or UGC. Check collection pages if the first load includes too many product cards.

App content matters too. Review apps, Instagram feed apps, page builders, and recommendation apps often inject images outside your theme’s normal Liquid snippets. Thunder can improve the storefront baseline, but some third-party widgets still need app-level settings or removal. The guide to Shopify apps that slow down stores helps you decide what is worth keeping.

How to Confirm the Fix Worked

Run the same URLs through PageSpeed Insights and the Shopify speed test. Watch the offscreen image audit, total transfer size, LCP resource timing, and CLS. Google’s LCP optimization guidance breaks LCP into server response, resource load delay, resource load duration, and render delay, which is useful when image priority changes do not move the metric as expected.

If the warning remains after lazy loading lower-page images, the remaining offenders may come from an app embed or a section that renders hidden images for sliders, tabs, or variant media. Hidden does not always mean free. Browsers may still discover images in markup, CSS backgrounds, or app-generated DOM.

FAQ