June 22, 202610 min read

The One Liquid Snippet That Drops LCP by 800ms on Most Shopify Stores

Discover a single Liquid snippet that can slash your Shopify store's Largest Contentful Paint (LCP) by hundreds of milliseconds, dramatically improving speed and user experience.

Ashraful

Shopify Select Partner

shopify speed lcp optimization liquid code theme development performance

Close-up of hands on a laptop browsing an e-commerce site in a modern office. — Photo by Shoper .pl on Pexels

If you've spent any time looking at your Shopify store's performance metrics, you've probably stared at "Largest Contentful Paint" (LCP) scores with a mix of frustration and bewilderment. It’s often the hardest core web vital to fix, and on Shopify, it's almost always held back by one glaring, easily avoidable mistake: your hero image isn't preloaded.

I've audited hundreds of Shopify stores, from small startups to multi-million dollar enterprises, and I can tell you that 90% of them are leaving 600-1200ms of LCP improvement on the table. The fix? A single, simple <link rel='preload' as='image'> tag in your theme.liquid file. This isn't theoretical; it's a practical, high-impact adjustment that I've applied countless times with consistent, dramatic results.

Why Shopify Preload Hero Image Matters for LCP (and Your Bottom Line)

LCP measures when the largest image or text block on your page becomes visible. For most Shopify stores, this "largest contentful element" is the main hero banner image on the homepage. Google considers an LCP of 2.5 seconds or less "good." Anything above that, and you're penalizing your users, your search rankings, and ultimately, your conversions.

Think about it: when a user lands on your store, what's the first thing they see? Usually a big, impactful hero image. If that image takes an extra second or two to load, it creates a moment of blank space or low-res flicker. That's a bad first impression. It screams "slow site," and slow sites bleed money. I've seen firsthand how an LCP improvement of just a few hundred milliseconds can translate into higher engagement and lower bounce rates.

The problem is, browsers are smart, but they're not clairvoyant. They don't know which image is going to be your LCP element until they've parsed most of your HTML and CSS. By then, it's often too late.

The Core Problem: Late Image Discovery

When a browser loads a web page, it goes through a series of steps:

HTML Parsing: It reads the HTML document.
Resource Discovery: It finds <link> and <script> tags, and starts fetching those resources.
CSS Parsing: It parses CSS files, which might contain background images or styling that applies to images.
JavaScript Execution: It runs JavaScript, which might dynamically add images to the DOM.
Image Loading: Only then does it typically start downloading images referenced in <img> tags or CSS.

Your hero image, even if it's right at the top of your <body>, often gets discovered late in this process. Why? Because many Shopify themes use complex structures for hero sections. The image might be set as a background image via CSS, or injected via JavaScript, or wrapped in multiple Liquid includes. Even when it's a simple <img> tag, the browser usually prioritizes CSS and JavaScript that could block rendering before it downloads images.

What most agencies get wrong is assuming the browser is smart enough. They might correctly use srcset for responsive images and loading="lazy" for images below the fold. But applying loading="lazy" to your hero image is a critical error – it tells the browser to delay loading the very image that defines your LCP. I've seen this 50+ times on client audits, costing them valuable seconds.

The Simple Fix: Explicitly Preloading Your Shopify Hero Image

This is where link rel="preload" comes in. It's a declarative fetch request that tells the browser: "Hey, this resource is really important, start downloading it now, before you even finish parsing everything else." When used correctly for your LCP image, it pushes the image fetch much earlier in the critical rendering path.

Here's the basic structure you need to add to your theme.liquid file, ideally within the <head> section, as high up as possible:

{% comment %}
  Preload the primary hero image to improve LCP.
  Adjust the `image_url` filter based on your theme's hero section settings.
{% endcomment %}
<link rel="preload" 
      as="image" 
      href="{{ section.settings.image | image_url: width: 1500 }}" 
      fetchpriority="high">

Let's break that down:

rel="preload": This tells the browser to fetch the resource early.
as="image": This is crucial. It tells the browser what kind of resource it's fetching, allowing it to apply correct prioritization and prevent double-fetching.
href="...": This is the URL of your hero image. The key here is to make it dynamic and correctly sized.
fetchpriority="high": This is a hint to the browser that this resource is very important, even more so than other preloaded resources.

The image_url filter in Shopify Liquid is your best friend here. It allows you to generate a responsive image URL. I typically recommend preloading a width that closely matches the expected display size of your hero image on common desktop breakpoints, often around 1500px or 1800px. Don't preload an image that's unnecessarily large for the LCP.

Dynamically Identifying Your Hero Image in Liquid

The snippet above uses section.settings.image. This is a common pattern for hero sections built with Shopify's Sections functionality. However, your specific theme might use a different variable or structure. This is the biggest hurdle for most store owners and even some developers.

Here's what nobody talks about enough: identifying the exact Liquid variable that holds your hero image. It's not always section.settings.image. It could be block.settings.image if your hero is a series of blocks (like a slideshow), or even a direct asset_img_url if your theme developer hardcoded an asset (though that's rare and bad practice for hero images).

To find it, you need to inspect your theme's code. Open theme.liquid and look for includes or sections related to your homepage hero. Common section names are hero-banner.liquid, slideshow.liquid, image-banner.liquid, or simply hero.liquid. Inside those section files, search for <img> tags or background-image CSS properties. The Liquid variable used to output the image source is what you need.

For example, if your hero section (sections/hero-banner.liquid) looks something like this:

{%- if section.settings.image != blank -%}
  <div class="hero__image-wrapper">
    <img srcset="{{ section.settings.image | image_url: width: 375 }} 375w,
                 {{ section.settings.image | image_url: width: 750 }} 750w,
                 {{ section.settings.image | image_url: width: 1100 }} 1100w,
                 {{ section.settings.image | image_url: width: 1500 }} 1500w,
                 {{ section.settings.image | image_url: width: 1800 }} 1800w,
                 {{ section.settings.image | image_url: width: 2200 }} 2200w"
         src="{{ section.settings.image | image_url: width: 1500 }}"
         sizes="100vw"
         alt="{{ section.settings.image.alt | escape }}"
         loading="lazy"
         width="{{ section.settings.image.width }}"
         height="{{ section.settings.image.height }}">
  </div>
{%- endif -%}

You'd use section.settings.image. If it's a slideshow with blocks:

{% for block in section.blocks %}
  {% if block.type == 'slide' %}
    {%- assign image_object = block.settings.image -%}
    {% comment %} This image_object is what you'd target {% endcomment %}
  {% endif %}
{% endfor %}

Here's a more robust snippet I often use, which tries to dynamically find the first eligible hero image from a common section type. You'd place this in your theme.liquid <head>:

{% assign lcp_image_url = false %}

{% comment %} Check for common hero sections (customize as needed) {% endcomment %}
{% for section in request.page_type == 'index' ? sections : empty %}
  {% if section.type contains 'hero' or section.type contains 'slideshow' or section.type contains 'image-banner' %}
    {% if section.settings.image != blank %}
      {% assign lcp_image_url = section.settings.image | image_url: width: 1800 %}
      {% break %}
    {% elsif section.blocks.size > 0 %}
      {% for block in section.blocks %}
        {% if block.settings.image != blank %}
          {% assign lcp_image_url = block.settings.image | image_url: width: 1800 %}
          {% break %}
        {% endif %}
      {% endfor %}
      {% if lcp_image_url %}{% break %}{% endif %}
    {% endif %}
  {% endif %}
{% endfor %}

{% comment %} Output preload link if an LCP image was found {% endcomment %}
{% if lcp_image_url %}
  <link rel="preload" 
        as="image" 
        href="{{ lcp_image_url }}" 
        fetchpriority="high">
{% endif %}

This snippet iterates through your homepage sections (only on the index page to avoid preloading on every page, which isn't efficient) and tries to find an image from common hero section types. You might need to adjust section.type contains 'hero' to match the exact type of your hero section as defined in its schema.

Handling Multiple Layouts and Sections

The dynamic snippet above is a good starting point. However, every theme is unique. If you have a custom theme or a highly modified one, you might need to adapt this.

Inspect Section Schema: Look at the config/settings_schema.json and the individual section files (sections/*.liquid). This will show you the exact ids for image settings.
Conditional Logic: Use if request.page_type == 'index' to ensure this preload only happens on the homepage, where LCP is most critical for the hero image. Preloading other images on other page types might be beneficial but requires separate logic.

A Real-World Impact: Client Success Story

I recently worked with a Shopify Plus client, a high-growth fashion brand, whose LCP was hovering around 4.8 seconds on desktop and 6.5 seconds on mobile. Their hero section was a beautiful, full-width image banner, but it was being loaded late. After digging into their theme code, I identified the correct Liquid variable for their hero image and injected a precisely targeted preload tag into theme.liquid.

The result? Their desktop LCP immediately dropped to 3.2 seconds, and mobile LCP came down to 4.1 seconds. That's a 1.6-second improvement on desktop and 2.4 seconds on mobile, purely from this one snippet. This wasn't a minor tweak; it was a fundamental shift that visibly sped up their site's initial render, directly impacting their bounce rate and conversion metrics during a critical holiday sales period. They reported a measurable uptick in early-stage user engagement metrics within days.

Verification: How to Confirm Your Shopify Preload Hero Image is Working

Implementing the snippet is only half the battle. You need to verify it's actually working and having the desired effect.

Google PageSpeed Insights / Lighthouse: Run a report on your homepage. Look at the "Diagnostics" section under "Preload largest contentful paint image." If you've done it correctly, this audit should pass or show significant improvement. Also, check the "Largest Contentful Paint element" in the "Opportunities" section.
Chrome DevTools (Network Tab): This is where you get granular.
- Open your homepage in an Incognito window.
- Open DevTools (F12 or Ctrl+Shift+I).
- Go to the Network tab.
- Refresh the page (Ctrl+R or Cmd+R).
- Filter by Img.
- Look for your hero image file. In the "Priority" column, it should say Highest or Very High. Its "Initiator" should be Other or (index) (indicating it was initiated by the HTML preload tag, not by a later element in the DOM).
- Crucially, observe the waterfall: the hero image should start downloading very early, often before most CSS or JS.

Here's a quick check you can do in the Chrome DevTools console to see if your preload is active:

performance.getEntriesByType('resource').filter(entry => entry.initiatorType === 'link' && entry.url.includes('cdn.shopify.com/s/files/')).forEach(entry => console.log(entry.name, entry.fetchStart, entry.responseEnd));

This JavaScript snippet lists resources initiated by a <link> tag and coming from Shopify's CDN, giving you an idea of when they started and finished fetching.

This kind of deep-dive into performance is exactly what I do when optimizing Shopify stores. If you're struggling to diagnose and fix LCP issues, my Shopify speed optimization services are built on this kind of practical, results-driven approach.

Beyond Preload: Other LCP Optimizations

While preloading your hero image is a massive win, it's part of a larger strategy. I want to be clear: this one snippet isn't a silver bullet for all performance issues. Other critical factors for LCP include:

Image Compression and Format: Ensure your images are properly compressed and use modern formats like WebP where supported.
Responsive Images: Use srcset and sizes attributes for all images, especially the LCP image, so browsers only download what's necessary for the user's viewport.
CDN Optimization: Shopify handles this well, but ensuring your assets are served efficiently is key.
Minimize Render-Blocking Resources: Reduce the amount of CSS and JavaScript that the browser has to process before it can render your page. This often involves deferring non-critical scripts and inlining critical CSS.
Efficient Liquid Code: Bloated Liquid loops and unnecessary logic can slow down server response time, which impacts LCP. My Shopify theme development services always focus on lean, performant code.

I've built 700+ Shopify stores and optimized countless others. I've been a verified Shopify Select Partner since 2021 and am Top Rated Plus on Upwork. My approach is always practical and focused on measurable results. If you're tired of generic advice and want to see real speed improvements on your Shopify store, let's talk.

If your Shopify store's LCP is holding you back, and you're unsure how to implement these changes or diagnose deeper issues, I offer a free 30-minute consultation. We can discuss your specific challenges and map out a clear path to a faster, more profitable store. Book your free call at /consultation.

About the author

Ashraful

Shopify Select Partner, Top Rated Plus on Upwork. 700+ Shopify projects shipped over 7+ years — themes, apps, migrations, speed, Hydrogen. Solo shop, no agency middlemen.

Read the full story

Working on a Shopify project?

That's what I do every day. Pick whichever feels lower-friction.

Book a free 30-min call Get a fixed quote

Keep reading

June 21, 20269 min

Your Shopify Store Has a Third-Party Script Budget — And You're Over It

Your Shopify store has a finite budget for third-party scripts. Most stores blow past it, adding unnecessary bloat that slows down the site and costs you sales. It's time to audit and cut.

Read

June 19, 202610 min

The Three Shopify CLS Fixes That Actually Move the Needle

Stop chasing complex CLS fixes on Shopify. My 7+ years of experience show that almost all Cumulative Layout Shift issues stem from three predictable sources: late-loading reviews, currency switchers, and unsized hero images. Fix these, and your scores will soar.

Read

June 17, 202611 min

How to Hit Lighthouse 95 on Shopify Without Rebuilding Your Theme

Most Shopify stores can achieve 95+ mobile Lighthouse scores by implementing 7 key optimizations on their existing theme, avoiding expensive rebuilds.

Read