Shopify Hero Image Preload: Fix LCP with fetchpriority and Liquid (2026)

Quick Fix with Thunder

When Hero Image Preload Actually Helps

Largest Contentful Paint measures when the largest visible text or image element finishes rendering. Google’s good threshold is 2.5 seconds or less for at least 75% of real users. On Shopify homepages, landing pages, and collection pages, the LCP element is often the hero banner image.

Preload helps when the browser would otherwise discover that hero image late. This happens when the image URL is buried inside a section snippet, loaded through JavaScript, hidden behind responsive logic, or referenced after many CSS and script tags. Preload tells the browser: fetch this important image early.

Preload does not fix a 900KB image, a slider that waits for JavaScript, or render-blocking resources that delay the entire page. It is one part of the LCP chain. Use it with image compression, correct dimensions, and script cleanup.

Step 1: Confirm the LCP Element

Run PageSpeed Insights or Chrome DevTools Performance. In Lighthouse, expand the LCP diagnostic and check which element is reported. If it is the hero image, continue. If it is a headline or product image, preload that resource instead.

Do not guess. Shopify themes often show different hero assets on desktop and mobile, and sliders can make a different element win LCP on mobile. Our speed test results guide explains how to read the report without chasing the wrong metric.

Step 2: Preload the Exact Shopify Image URL

Add the preload link in theme.liquid inside the head, before heavy scripts. Use the same image object and width that your hero uses.

{%- if template.name == 'index' and settings.hero_image != blank -%}
  <link
    rel="preload"
    as="image"
    href="{{ settings.hero_image | image_url: width: 1600 }}"
    imagesrcset="
      {{ settings.hero_image | image_url: width: 800 }} 800w,
      {{ settings.hero_image | image_url: width: 1200 }} 1200w,
      {{ settings.hero_image | image_url: width: 1600 }} 1600w
    "
    imagesizes="100vw"
    fetchpriority="high"
  >
{%- endif -%}

The exact object name will differ by theme. It may be section.settings.image, settings.hero_image, or a block image. If the preload URL does not match the rendered image URL closely enough, the browser may download two images.

Step 3: Mark the Hero Image as Eager and High Priority

The image tag itself should not be lazy-loaded. Use eager loading and high fetch priority for the first above-the-fold hero image.

{{ section.settings.image
  | image_url: width: 1600
  | image_tag:
    widths: '800, 1200, 1600',
    sizes: '100vw',
    loading: 'eager',
    fetchpriority: 'high',
    alt: section.settings.heading
}}

Lazy-loading the hero is one of the most common Shopify LCP mistakes. Lazy loading is correct for below-the-fold product images and galleries; it is wrong for the one image the browser needs immediately. For the rest of your store, use our Shopify image optimization guide.

Step 4: Avoid the Responsive Image Double Download

If your preload points to a desktop image but mobile renders a separate mobile crop, mobile visitors may download the wrong preloaded file and then download the real mobile image. That makes LCP worse.

{%- assign hero = section.settings.mobile_image | default: section.settings.image -%}

<link
  rel="preload"
  as="image"
  href="{{ hero | image_url: width: 1200 }}"
  imagesrcset="{{ hero | image_url: width: 600 }} 600w, {{ hero | image_url: width: 1200 }} 1200w"
  imagesizes="100vw"
  fetchpriority="high"
>

For themes with truly different desktop and mobile hero images, use media-specific preload links carefully. Test both viewport sizes and check the Network tab for duplicate downloads.

Step 5: Be Careful with Sliders

Shopify Community LCP threads often point to hero slideshows as the hidden problem. Even with one visible slide, a slider may wait for JavaScript, initialize layout, hide images until ready, or preload multiple slides. Preloading one image cannot fully fix a hero that is controlled by a heavy carousel script.

For the first viewport, a static hero usually beats a slideshow. If you keep the slider, preload only the first visible slide, set it eager/high priority, lazy-load later slides, and remove autoplay JavaScript on mobile if it creates long tasks.

This is also where minimizing main-thread work matters. A carousel script can delay the image even when the image is requested early.

Manual Fix vs Thunder Fix

Retest Without Fooling Yourself

After adding preload, open DevTools Network with cache disabled. Confirm the hero image starts early, confirm the rendered image is not downloaded twice, and compare mobile Lighthouse runs. Then watch real-user LCP in Shopify’s Web Performance dashboard or Search Console Core Web Vitals.

If the hero request starts early but LCP is still slow, the bottleneck is probably image weight, render-blocking CSS, or JavaScript. Use the complete Shopify speed optimization guide, then check whether PageSpeed also flags Shopify critical request chains, enormous network payloads, or Total Blocking Time. Compare Thunder’s optimization features, and check current plans if you want the automated path.

References and Validation

For the metric target, use web.dev's Largest Contentful Paint guidance: a good LCP is 2.5 seconds or faster at the 75th percentile. For priority hints, check web.dev's fetchpriority guidance; preload and fetchpriority solve different parts of the discovery and prioritization problem.

Shopify Community LCP threads often show the same failure mode: a merchant preloads a hero image and sees little movement because the theme is still lazy-loading it, the carousel script delays rendering, or render-blocking resources take priority. Validate the network waterfall, the rendered image URL, and the LCP element before declaring the preload ineffective. The fix is precise resource priority, not more preload tags.