Skip to content
SEOScanShopify SEOPerformance
Critical SeverityPerformance

Shopify Hero Image Not Preloaded: The Biggest LCP Fix Available

Search intent: fix · Updated February 2026

Direct Answer

The hero or banner image on a Shopify homepage or collection page is typically the Largest Contentful Paint (LCP) element - the metric Google uses to measure perceived load speed. By default, browsers discover this image only after downloading and parsing the full HTML and CSS. Adding a <link rel="preload" as="image"> in the <head> tells the browser to fetch the image immediately, in parallel with HTML parsing. Combined with fetchpriority="high" on the <img> tag itself, this single change reduces LCP by 0.5-1.5 seconds and is the highest-impact individual LCP optimisation available on most Shopify themes.

Quick Diagnostic Checklist

  • Run PageSpeed Insights on homepage - note LCP value and identify the LCP element
  • View Source on homepage <head>: search for rel="preload" - confirm presence and matching URL
  • Check hero <img> tag: confirm fetchpriority="high" and absence of loading="lazy"
  • DevTools Network tab: verify hero image starts downloading within first 200ms of navigation
  • Confirm preload URL width parameter matches the actual rendered img src width parameter

Not sure if your store has this issue?

Run a free scan to detect performance problems instantly.

Free Scan

What This Issue Means

Google's Core Web Vitals measure LCP - the time until the largest visible element on the page finishes loading. For most Shopify homepages and collection pages, the largest element is a hero banner or featured image. Without a preload hint, the browser cannot begin fetching this image until it has downloaded the full HTML, parsed all CSS, and identified the image as the LCP candidate. This waterfall delay is entirely avoidable. Every millisecond saved on LCP directly improves your Core Web Vitals score, which feeds into Google's page experience ranking signals.

What Causes It (Shopify-Specific)

1

Browsers discover images late in the render waterfall

Without a preload hint, the browser only discovers the hero image URL when it reaches the <img> tag or CSS background-image declaration during rendering. By that point, HTML parsing, CSS parsing, and potentially JavaScript execution have already consumed several hundred milliseconds.

2

Shopify theme hero sections use lazy loading globally

Some themes apply loading="lazy" globally to all images via JavaScript, including the hero image. Lazy loading is correct for below-fold images but catastrophic for the LCP element - it explicitly delays the most important image on the page.

3

section.settings image is not known at <head> render time

Shopify themes built with Online Store 2.0 sections use customiser-configurable images stored in section.settings. The image URL is only available during Liquid rendering, which means it can be output in a <link rel="preload"> tag in the <head> - but most themes do not implement this.

4

CDN image transformation URL not used for preload

Shopify's image CDN applies transformations via URL parameters (width, format). If the preload tag uses a different URL or size than the actual rendered <img> src, the browser fetches two images instead of one - wasting bandwidth and providing no LCP benefit.

How to Detect It Manually

  1. 1Run Google PageSpeed Insights on your homepage - if LCP is above 2.5 seconds, the hero image is a primary suspect
  2. 2Open Chrome DevTools → Performance tab → record a page load → click the LCP marker and identify the element; if it is an image, check whether it appears early in the waterfall
  3. 3In Chrome DevTools → Network tab, filter by Img and sort by Start Time - the hero image should be one of the first resources fetched; if it starts after 500ms, preloading is missing
  4. 4View Source on your homepage and search the <head> for rel="preload" - if no preload tags exist for images, the issue is confirmed
  5. 5Check for loading="lazy" on your hero <img> tag in page source - this is always wrong for the LCP element and must be removed

How to Fix It (Step-by-Step)

1

Add a preload hint for the hero image in theme.liquid

In your theme.liquid <head> section, output a <link rel="preload"> tag referencing the hero image URL. For section-configurable images, read the section settings in the layout file or pass the image through a global variable.

liquid
{%- assign hero_image = section.settings.image | default: settings.hero_image -%}
{%- if hero_image -%}
  <link
    rel="preload"
    as="image"
    href="{{ hero_image | image_url: width: 1200 }}"
    imagesrcset="{{ hero_image | image_url: width: 400 }} 400w,
                 {{ hero_image | image_url: width: 800 }} 800w,
                 {{ hero_image | image_url: width: 1200 }} 1200w"
    imagesizes="100vw"
  >
{%- endif -%}
2

Add fetchpriority="high" to the hero <img> tag

In your hero section Liquid file (commonly sections/slideshow.liquid, sections/image-banner.liquid, or sections/hero.liquid), add fetchpriority="high" and ensure loading is NOT set to "lazy".

liquid
{{ section.settings.image
  | image_url: width: 1200
  | image_tag:
    loading: 'eager',
    fetchpriority: 'high',
    sizes: '100vw',
    widths: '400, 800, 1200, 1800',
    class: 'hero__image'
}}
3

Remove loading="lazy" from the LCP image

If your theme applies lazy loading via a JavaScript class or data attribute, ensure the hero image is excluded. Search for IntersectionObserver implementations or lazysizes initialisation in your theme JavaScript and add the hero image to the exclusion list.

4

Verify the preload URL matches the rendered src

Open DevTools → Network, filter by "preload" and compare the preloaded image URL against the actual hero img src. They must match exactly (same width parameter, same format). A mismatch means the browser fetches two images and the preload provides no benefit.

How SEOScan Detects This Issue

SEOScan uses a headless browser to capture the LCP element on every scanned page. It identifies the LCP element type (image vs. text) and, if it is an image, checks whether a matching <link rel="preload" as="image"> tag exists in the <head> with a URL that corresponds to the rendered image source. It also checks for fetchpriority="high" on the LCP image element and flags the presence of loading="lazy" on the LCP candidate as a critical error.

Example Scan Result

LCP hero image loaded without preload hintCritical

Description

Homepage LCP element identified as hero banner image (1200x600px). No <link rel="preload" as="image"> found in <head>. Image starts downloading at 820ms after navigation start. LCP measured at 3.4 seconds.

Impact

LCP of 3.4s fails Google's Core Web Vitals threshold (Good: under 2.5s). This directly affects page experience ranking signals. Adding a preload hint is projected to reduce LCP by 0.8-1.2 seconds based on image size and server response time.

Recommended Fix

Add a <link rel="preload" as="image"> tag in theme.liquid <head> referencing the hero image URL with matching imagesrcset. Add fetchpriority="high" to the hero <img> tag in your hero section template.

Why It Matters for SEO

Core Web Vitals Ranking Signal

LCP is one of Google's three Core Web Vitals metrics, incorporated into the page experience ranking signal since 2021. Pages with LCP above 2.5 seconds are classified as "needs improvement" or "poor" and receive a ranking disadvantage against pages with equivalent content quality.

Mobile Search Performance

Mobile devices on cellular connections are most affected by missing preload hints. Google's ranking index is mobile-first, meaning your mobile LCP score is the one that directly affects your rankings - and mobile hero image loading is where the gap between preloaded and non-preloaded is largest.

Bounce Rate and Conversion

A hero image that takes 3+ seconds to appear creates a blank or partially rendered page that prompts visitors to leave before the page loads. Studies consistently show every 100ms of LCP reduction correlates with measurable improvements in bounce rate and add-to-cart rate.

Highest ROI Performance Fix

Adding a preload hint is a 10-line code change. No image compression, no CDN migration, no infrastructure cost. It is the single highest-return LCP intervention available and is frequently the difference between a "Poor" and "Good" CWV rating.

Real-World Validation Signals

  • Google's own web.dev documentation cites preloading the LCP image as the primary recommended action for improving LCP scores on image-heavy pages.
  • Shopify's Dawn theme added fetchpriority="high" to hero images in version 9.0 - stores on earlier Dawn versions or custom themes are systematically missing this optimisation.
  • Median LCP improvement from adding preload + fetchpriority on Shopify hero images: 0.6-1.4 seconds, based on analysis of before/after CrUX data.
  • Chrome's LCP preload scanner was specifically designed to honour <link rel="preload" as="image"> tags before full HTML parsing is complete - making this technique uniquely effective.

Frequently Asked Questions

Q: What is the difference between preload and fetchpriority="high"?

<link rel="preload"> tells the browser to fetch the resource immediately during HTML parsing, before the rendering engine encounters the element. fetchpriority="high" on the <img> tag tells the browser to prioritise this image over other in-flight requests when it is fetched. Both work together: preload starts the fetch early, fetchpriority ensures it is not deprioritised by other concurrent requests.

Q: My hero image is a CSS background-image - does preload still work?

Yes. Add rel="preload" as="image" in the <head> with the exact same URL as the CSS background-image. The browser will use the preloaded resource when the CSS background-image is applied. This is even more important for CSS backgrounds because the browser discovers them even later than <img> tags.

Q: Will preloading the hero image slow down other page resources?

For the hero image specifically, no - it is the most important resource on the page. However, avoid preloading multiple images simultaneously, as this can starve other critical resources (fonts, CSS). Only preload the single LCP candidate image.

Q: My Shopify theme uses a slideshow with multiple images - which one do I preload?

Preload only the first slide image - this is the LCP element. Preloading all slideshow images simultaneously would consume significant bandwidth and provide no LCP benefit. Use preload on the first image and loading="lazy" (or no lazy loading attribute) on subsequent slides.

Q: How do I know if my preload is working correctly?

Open Chrome DevTools → Network tab → reload the page. The hero image should appear near the top of the waterfall, with "Preload" shown in the Initiator column. In the Performance panel, the LCP marker should align with the image load completing early in the timeline.

Check Your Store for This Issue

SEOScan automatically detects shopify hero image not preloaded: the biggest lcp fix available and 4 related issues - with specific fixes for your store.

Run Free Scan

Related Issues

Render-Blocking Scripts on Shopify: Detection and Fixes

Performance · High

Shopify INP Score Poor: Apps Causing High Interaction to Next Paint

Performance · High

Shopify Cumulative Layout Shift from Images Missing Dimensions

Performance · Medium

The "Master" Size Image Performance Penalty

Performance · High