What Is LCP and Why Does It Matter?
Largest Contentful Paint (LCP) is one of Google's three Core Web Vitals — the metrics Google uses to measure real-world user experience and factor into search rankings. LCP specifically measures how long it takes for the largest visible element on the page to fully render.
On a Shopify store, the LCP element is usually:
- Homepage: The hero banner image or slideshow
- Product page: The main product image
- Collection page: The collection banner or first product image
- Blog post: The featured image
≤ 2.5s
Good
2.5–4.0s
Needs Improvement
> 4.0s
Poor
Why it matters for your store: LCP directly affects both SEO rankings (Google uses it as a ranking signal) and your Shopify speed score. A slow LCP means visitors stare at a blank or incomplete page for seconds before seeing your main content. This increases bounce rate and decreases conversions. Deloitte found that a 0.1-second improvement in LCP led to an 8% increase in conversions for retail sites.
The Easy Fix: Automatic LCP Optimization
Before we dive into the manual fixes below — there's a much easier way. Thunder Page Speed Optimizer automatically addresses the top causes of high LCP on Shopify stores.
How Thunder fixes LCP:
Script Deferral
Defers render-blocking third-party scripts so your hero image loads sooner
Critical CSS Inlining
Inlines above-the-fold CSS for instant rendering
Image Optimization
Smart lazy loading (never on LCP image), WebP, responsive sizing
Font Optimization
font-display: swap and preloading to prevent render delays
Average improvement: +27 PageSpeed points
Typical LCP improvement: 0.5–2.0 seconds. Most stores go from red/orange to green within minutes.
Free plan available · No credit card required · 30-second setup · Works with all themes
How to Measure Your Shopify Store's LCP
PageSpeed Insights (Lab + Field Data)
Go to pagespeed.web.dev and enter your URL (or use our free Shopify speed test tool for a quick check). The report shows both:
- Field data (top section) — Real user LCP from Chrome users over the past 28 days. This is what Google uses for ranking.
- Lab data (Performance section) — Simulated LCP from a controlled test. Useful for debugging, but doesn't reflect real-world conditions.
Scroll to Diagnostics and look for "Largest Contentful Paint element" — it tells you exactly which element is your LCP.
Chrome DevTools Performance Tab
Open DevTools (F12), go to the Performance tab, check "Web Vitals," and record a page reload. The timeline will show an "LCP" marker at the exact moment your largest element rendered. You can hover over it to see which element triggered LCP and how long it took. This is the most precise way to debug LCP issues.
Google Search Console
Under Experience → Core Web Vitals, you'll see how your pages perform across all three metrics including LCP. This uses real user data and groups pages by status (Good / Needs Improvement / Poor). It's the best way to track LCP improvements over time across your entire site.
Common Causes of High LCP on Shopify
LCP is determined by four factors. Understanding which one is your bottleneck determines the fix:
1. Slow Resource Load Time
The LCP image itself is too large (uncompressed, wrong format, oversized dimensions). The image file takes too long to download, especially on mobile connections.
2. Render-Blocking Resources
JavaScript and CSS files that block the browser from rendering anything until they've loaded. Even if the LCP image downloads quickly, it can't display until render-blocking scripts are processed. This is the #1 cause on most Shopify stores.
3. Lazy-Loaded LCP Element
If your hero image has loading="lazy", the browser intentionally delays loading it until the user scrolls near it. For above-the-fold images, this dramatically hurts LCP because the browser waits when it should load immediately.
4. Slow Server Response (TTFB)
Time to First Byte — how long the server takes to respond. On Shopify, this is usually 200–800ms and is mostly outside your control (Shopify's infrastructure). Complex Liquid templates and heavy apps can increase TTFB.
Fix #1: Optimize Your Hero / LCP Image
⚡ Skip this step: Thunder automatically handles image optimization — lazy loading, WebP conversion, and responsive sizing — with no manual work needed.
The single most impactful fix for LCP is usually optimizing the image that is the LCP element. Here's a checklist:
Compress and Resize
- Your hero image should be under 200KB (ideally under 100KB)
- Use Squoosh to compress — aim for quality 75–85% in WebP/AVIF
- Size the image for its actual display width. A full-width hero on desktop is typically 1200–1600px wide. Don't upload a 3000px+ image.
Use Modern Formats
Shopify's CDN automatically serves WebP to supported browsers when you use the image_url Liquid filter. Make sure your theme uses it:
<!-- ✅ Uses Shopify's image CDN with automatic WebP -->
<img
src="{{ section.settings.hero_image | image_url: width: 1200 }}"
srcset="
{{ section.settings.hero_image | image_url: width: 600 }} 600w,
{{ section.settings.hero_image | image_url: width: 900 }} 900w,
{{ section.settings.hero_image | image_url: width: 1200 }} 1200w,
{{ section.settings.hero_image | image_url: width: 1600 }} 1600w
"
sizes="100vw"
width="1600"
height="800"
alt="Your descriptive alt text"
loading="eager"
fetchpriority="high"
>Set Explicit Dimensions
Always include width and height attributes on your hero image. This lets the browser reserve the correct amount of space before the image loads, preventing layout shift (CLS) and enabling the browser to start layout calculations earlier.
Use fetchpriority="high"
The fetchpriority="high" attribute (supported in Chrome, Edge, and Opera) tells the browser this image is more important than others and should be prioritized in the download queue. This can shave 100–500ms off LCP. Add it to your LCP image only — not every image on the page.
Fix #2: Eliminate Render-Blocking Resources
⚠️ Difficulty: Advanced. Third-party app scripts are the biggest render-blocking problem, and you can't edit them directly. Thunder handles this automatically — deferring scripts while preserving dependency chains so your apps keep working.
Even a perfectly optimized hero image won't help LCP if render-blocking JavaScript prevents the browser from displaying it. On most Shopify stores, render-blocking scripts are the primary cause of high LCP — not the image itself.
Here's the sequence: the browser starts loading your page → encounters render-blocking scripts → stops to download and execute them → only then discovers and loads the hero image → finally renders it. Those blocking scripts can add 1–3 seconds before the browser even starts loading your LCP image.
Quick Wins
- Add
deferto any custom<script>tags in your theme - Move inline scripts from
<head>to before</body> - Inline critical CSS so the browser can start rendering without waiting for external CSS files
For Third-Party App Scripts
Third-party app scripts are the biggest render-blocking problem, and you can't edit them directly. This is where a script optimizer becomes essential. Thunder automatically defers non-critical third-party scripts so the browser can render your hero image and visible content first.
For a detailed walkthrough of all render-blocking fixes, see our guide to fixing render-blocking resources on Shopify.
Fix #3: Don't Lazy-Load the LCP Element
This is one of the most common LCP mistakes on Shopify. Many themes apply loading="lazy" to all images, including the hero image. Lazy loading tells the browser to delay loading the image until the user scrolls near it — which is exactly the opposite of what you want for your most important above-the-fold image.
How to Check
Right-click your hero image, select "Inspect," and look at the <img> tag. If it has loading="lazy", that's hurting your LCP. PageSpeed Insights also flags this specifically as "Largest Contentful Paint image was lazily loaded."
The Fix
<!-- ❌ Don't do this for your hero/LCP image -->
<img src="hero.jpg" loading="lazy" alt="...">
<!-- ✅ Use eager loading + high priority for the LCP image -->
<img src="hero.jpg" loading="eager" fetchpriority="high" alt="...">
<!-- ✅ Or simply omit the loading attribute (defaults to eager) -->
<img src="hero.jpg" fetchpriority="high" alt="..."> Rule of thumb: The first 1–2 images visible on page load should use loading="eager". Everything below the fold should use loading="lazy". For a complete breakdown of when and how to use lazy loading correctly, see our Shopify lazy loading guide.
Fix #4: Preload the LCP Image
Normally, the browser discovers your hero image only after it parses the HTML and CSS. By adding a <link rel="preload"> tag in the <head>, you tell the browser to start downloading the image immediately — before it even reaches the <img> tag in the body.
<!-- Add to <head> section of theme.liquid -->
<link
rel="preload"
href="{{ section.settings.hero_image | image_url: width: 1200 }}"
as="image"
fetchpriority="high"
>
<!-- For responsive images, use imagesrcset -->
<link
rel="preload"
as="image"
imagesrcset="
{{ section.settings.hero_image | image_url: width: 600 }} 600w,
{{ section.settings.hero_image | image_url: width: 900 }} 900w,
{{ section.settings.hero_image | image_url: width: 1200 }} 1200w
"
imagesizes="100vw"
fetchpriority="high"
>⚠️ Only preload 1–2 resources. Preloading too many things defeats the purpose — you're just telling the browser everything is high priority, which is the same as nothing being high priority. Preload only your LCP image and maybe one critical font.
Fix #5: Improve Server Response Time
Time to First Byte (TTFB) is the time between the browser requesting your page and receiving the first byte of response. High TTFB delays everything — including LCP — because nothing can render until the HTML starts arriving.
On Shopify, TTFB is typically 200–800ms. You can't change Shopify's server infrastructure, but you can reduce what the server has to process:
- Simplify Liquid templates. Complex nested
forloops, excessiveifconditions, and heavy Liquid logic increase server-side rendering time. Simplify where possible. - Reduce metafield lookups. Each metafield access in Liquid is a database query. Minimize metafield usage on your homepage and collection pages.
- Limit collection products per page. Loading 48 products requires more server processing than 24. Use pagination to keep response times low.
- Remove unnecessary app code from Liquid. Some apps inject Liquid code that runs server-side on every page load. Check your theme files for app-related Liquid code on pages where the app isn't needed.
How to check TTFB: In Chrome DevTools → Network tab, click on the first request (your page URL) and look at the "Waiting for server response" time in the Timing section. Under 600ms is acceptable for Shopify; over 1 second indicates a problem.
Fix #6: Optimize Fonts and CSS
If your LCP element is a text element (heading, paragraph) rather than an image, font loading becomes critical. The browser can't paint text until its font is available — unless you use font-display: swap.
Font Optimization Checklist
- Add
font-display: swapto all@font-facedeclarations - Preload your primary body font:
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin> - Self-host fonts instead of using Google Fonts (eliminates extra DNS lookup)
- Limit to 2 font weights (regular + bold) — each weight is a separate file download
CSS Optimization Checklist
- Inline critical CSS (styles needed for above-the-fold content) directly in the
<head> - Load non-critical CSS asynchronously using the
preload+onloadpattern - Remove unused CSS — use Chrome's Coverage tab to identify dead code
- Minimize external CSS files from third-party apps and widgets
For a deeper dive into CSS and font optimization, see our comprehensive Shopify speed optimization guide.
Frequently Asked Questions
What is a good LCP score for Shopify?
Google considers LCP under 2.5 seconds as 'good,' 2.5–4.0 seconds as 'needs improvement,' and over 4.0 seconds as 'poor.' Most unoptimized Shopify stores have LCP between 3.0–6.0 seconds on mobile. After optimization, achieving 2.0–3.0 seconds is realistic for most stores. Getting under 2.0 seconds is excellent but challenging on Shopify due to platform JavaScript overhead.
What is the LCP element on most Shopify pages?
On homepage: typically the hero banner image or slideshow. On product pages: usually the main product image. On collection pages: often the collection banner image or the first product image. On blog posts: the featured image. PageSpeed Insights identifies your specific LCP element in the diagnostics section — look for 'Largest Contentful Paint element.'
Does LCP affect SEO rankings?
Yes. LCP is one of three Core Web Vitals that Google uses as ranking signals (along with INP and CLS). Pages with 'good' Core Web Vitals get a ranking boost in search results. While content relevance is still the primary ranking factor, LCP can be the tiebreaker between competing pages — and in ecommerce, that matters.
Why is my Shopify LCP worse on mobile than desktop?
Three reasons: (1) Mobile devices have slower processors, so JavaScript parsing takes longer and delays rendering. (2) Mobile networks are slower and higher-latency than broadband. (3) Mobile screens are smaller, but Shopify often serves the same large images. The combination means everything takes 2–3× longer on mobile. Always optimize for mobile first.
Can a speed optimizer app fix LCP?
Yes, significantly. Thunder Page Speed Optimizer fixes LCP by deferring render-blocking JavaScript, inlining critical CSS, optimizing images, and preloading fonts. This lets the browser start rendering your hero image much sooner. Thunder users see an average +27 PageSpeed point improvement, with typical LCP reductions of 0.5–2.0 seconds. It works with all Shopify themes and takes 30 seconds to set up.