If your Shopify store loads slowly, your Largest Contentful Paint (LCP) score is probably the culprit. LCP measures how long it takes for the biggest visible element (usually your hero image or main product photo) to render on screen. Google wants this under 2.5 seconds, and so do your customers.
This guide is not generic Core Web Vitals advice. It’s a hands-on, Shopify-specific walkthrough showing you exactly what to fix in your theme, apps, and image setup to reduce LCP on Shopify stores fast.
What Is LCP and Why It Matters for Shopify Stores
LCP is one of the three Core Web Vitals Google uses to rank pages. On a typical Shopify store, the LCP element is one of these:
- The hero banner image on your homepage
- The main product image on a product page
- The collection grid’s first image on a category page
- A large headline block in the hero section
A poor LCP score (above 4 seconds) hurts conversions, ad quality scores, and SEO rankings. The good news: most Shopify LCP issues come from a small set of fixable problems.
How to Identify What’s Causing Your Slow LCP on Shopify
Before applying fixes, find out what your LCP element actually is. Use these tools:
- PageSpeed Insights — paste your URL and scroll to the diagnostics. The LCP element is highlighted in the report.
- Chrome DevTools — open the Performance tab, record a page load, and look for the LCP marker on the timeline.
- Shopify Web Performance dashboard — found in your admin under Online Store > Themes > Web Performance.
- web.dev Measure — gives you field data and lab data side by side.
Once you know which element is your LCP, the fixes below become surgical.
9 Proven Fixes to Reduce LCP on Shopify
1. Preload Your Hero Image
The single biggest LCP win on most Shopify themes. By default, browsers discover the hero image after parsing CSS, which costs precious seconds. Adding a preload hint tells the browser to fetch it immediately.
In your theme.liquid file, add this inside the <head> tag, before any stylesheets:
{%- if template == 'index' -%}
<link rel="preload" as="image"
href="{{ section.settings.hero_image | image_url: width: 1500 }}"
fetchpriority="high">
{%- endif -%}For product pages, preload the featured image instead. This single change can cut LCP by 1 to 2 seconds.
2. Set fetchpriority=”high” on the LCP Image
Even without preload, you can tell the browser which image matters most. Find the hero image tag in your theme and add the attribute:
<img src="..." fetchpriority="high" loading="eager" width="1500" height="800">Critical: never set loading="lazy" on your LCP image. This is one of the most common Shopify mistakes and it adds 500ms to 1.5s to your LCP score.
3. Properly Compress and Resize Hero Images
Shopify serves images via its CDN, but it does not automatically pick the perfect size. Use the image_url filter with explicit widths:
{{ image | image_url: width: 1500 }}Use this checklist:
- Hero images should be under 200 KB
- Use WebP format (Shopify serves it automatically when you use image_url)
- Match the rendered dimensions, do not load a 4000px image into a 1500px slot
- Use
srcsetwith multiple widths for responsive delivery
4. Defer or Remove Heavy Shopify Apps
Apps are the silent LCP killer on Shopify. Each app injects scripts and sometimes CSS into your theme. Audit your apps:
| App Type | LCP Impact | Action |
|---|---|---|
| Reviews widgets | High | Lazy load below the fold |
| Live chat | Medium | Delay 3-5 seconds after load |
| Popups | High | Trigger on intent or scroll |
| Upsell/cross-sell | Medium | Defer until interaction |
| Tracking pixels | Low to High | Use Shopify Web Pixels |
Uninstall any app you do not actively use. Removing the app from the admin is not enough, you must also clean leftover code from theme.liquid.
5. Inline Critical CSS
Render-blocking stylesheets delay LCP because the browser will not paint until CSS is parsed. Most premium Shopify themes (Dawn-based ones included) load multiple CSS files.
Inline the CSS needed for the above-the-fold content directly in <head>, and load the rest with media="print" onload="this.media='all'":
<link rel="stylesheet" href="{{ 'theme.css' | asset_url }}"
media="print" onload="this.media='all'">6. Reduce Server Response Time (TTFB)
LCP cannot be fast if Time to First Byte is slow. On Shopify, TTFB issues usually come from:
- Heavy Liquid loops (especially on collection pages with many products)
- Excessive metafield queries
- Apps doing server-side calls
Audit your collection.liquid and product.liquid templates. Avoid nested loops over all_products and limit the number of items rendered initially.
7. Use Shopify’s Native Section Rendering API
Instead of fetching full pages on filter changes, use the Section Rendering API to update only what changed. This drastically reduces re-render cost on collection pages where filters often cause LCP regressions.
8. Eliminate Render-Blocking JavaScript
Add defer or async to non-critical scripts. In your theme:
<script src="{{ 'app.js' | asset_url }}" defer></script>For third-party scripts (Google Tag Manager, Meta Pixel, etc.), load them through Shopify’s Customer Events (Web Pixels) feature instead of injecting them in theme.liquid. This isolates them in a sandbox and prevents them from blocking your LCP.
9. Switch to a Performance-First Theme
If you are using an old, heavy theme (especially pre-Online Store 2.0 themes), no amount of tweaking will fix things. Modern themes built on Shopify’s Dawn reference architecture are dramatically faster out of the box.
Top performance themes to consider in 2026:
- Dawn (free, official)
- Sense (free)
- Impulse (paid, well-optimized)
- Broadcast (paid)
Bonus: A Quick LCP Audit Checklist for Shopify
Before you publish any change, run through this checklist:
- Hero image is preloaded with
fetchpriority="high" - LCP image is not lazy-loaded
- Hero image is under 200 KB and properly sized
- Unused apps are uninstalled and code is cleaned
- Critical CSS is inlined
- Non-critical JS uses
defer - Tracking pixels run via Customer Events
- Theme is on Online Store 2.0 architecture
- PageSpeed Insights LCP is under 2.5s on mobile
Real Results You Can Expect
Stores we have audited typically see LCP drop from 4 to 6 seconds down to 1.8 to 2.4 seconds after applying these fixes. The biggest single wins almost always come from preloading the hero image, removing lazy loading from the LCP element, and deferring app scripts.
FAQ
What is a good LCP score for a Shopify store?
Under 2.5 seconds is considered good by Google. Anything above 4 seconds is poor and will hurt your SEO and conversions.
Why is my Shopify LCP so slow even with a fast theme?
The most common cause is third-party apps injecting render-blocking scripts. The second most common is large, unoptimized hero images that are not preloaded. Audit both before blaming your theme.
Does Shopify automatically optimize images for LCP?
Shopify’s CDN serves images in WebP and handles delivery, but it does not preload them, set fetchpriority, or pick the right size for you. Those optimizations have to be done in your theme code.
Can I reduce LCP on Shopify without editing theme code?
Partially. You can compress images, uninstall apps, and switch themes from the admin. But the highest-impact fixes (preload, fetchpriority, deferring scripts, inlining CSS) require editing your theme files.
Will reducing LCP improve my Google rankings?
Yes. Core Web Vitals are a confirmed ranking factor, and LCP is the most heavily weighted of the three. Stores that move from poor to good LCP often see ranking and traffic improvements within a few weeks.
How often should I check my Shopify LCP score?
Check at least once a month, and always after installing a new app or making theme changes. Apps are the most common cause of LCP regressions on Shopify stores.
Final tip: performance work compounds. Each fix above might shave 200ms to 1s off your LCP, but together they routinely turn a failing Shopify store into one that loads in under 2 seconds. Start with the hero image preload today, it is the single highest-ROI change you can make.