82% of Shopify stores fail LCP. That is not a guess or a scare stat. That is from Google's own PageSpeed Insights data across thousands of stores. And the frustrating part? Most of these stores could pass with a few specific fixes that nobody tells you about.
Shopify is a fantastic platform for selling things. It is not naturally great at performance. That is not a criticism, it is just the reality of a system built to be flexible and app-friendly. Flexibility comes with weight. But you can trim that weight without rebuilding your store from scratch.
This guide is split into two parts. No-code fixes first, because most store owners are not developers and should not have to be. Developer fixes after, for those who can touch the code. We will cover both honestly.
Why Shopify Stores Have LCP Problems
Before fixing anything, you need to understand why the problem exists. Shopify LCP failures almost always come from one of four places.
The Hero Image Gets Lazy Loaded
This is the single biggest Shopify LCP killer. Dawn theme, which is Shopify's default theme in 2026, applies loading="lazy" to hero images by default. Lazy loading means: wait until the image is near the viewport before downloading it.
For images below the fold, lazy loading is great. For the hero image at the top of your homepage, it is a disaster. You are telling the browser to wait before downloading the most important image on the page. Your LCP tanks. This alone adds 500ms to 2 seconds to LCP on most stores.
Apps Inject Scripts in Your Head
Every app you install on Shopify can add JavaScript and CSS to your theme's <head>. Most do. Each of those scripts is render-blocking by default, meaning the browser stops parsing your HTML to download and execute them before it can show your hero image.
If you have 8 apps installed, you potentially have 8 render-blocking resources sitting between your customer and your hero image. Shopify's Performance dashboard shows that apps cause around 60% of render-blocking resources across stores. That is a lot.
Dawn Theme Bundles Everything
Dawn 15.0 and later versions bundle JavaScript at around 250KB. Even when that script is deferred (loaded after the page), parsing a 250KB JS file takes significant CPU time on mobile phones. That parsing competes with rendering your content and can push LCP higher.
Liquid Template Rendering Takes Time
Shopify uses the Liquid templating language to generate your HTML on their servers. Complex liquid logic, like loops that iterate through many products or metafields, increases your Time to First Byte (TTFB). Every extra millisecond of TTFB adds directly to your LCP because LCP cannot start until the HTML arrives.
No-Code Fixes (Do These First)
Fix 1: Audit and Disable Unused Apps
Go to your Shopify admin, click Apps, and look at every app you have installed. For each one, ask: is this app actively helping sales right now? If the answer is no, or "I think we might use it someday," turn it off.
This is the single highest-impact thing most store owners can do. A store going from 10 apps to 5 apps commonly sees LCP drop by 500ms to 1.5 seconds. Before/after numbers from the Shopify Performance dashboard will show the change within a day.
Fix 2: Optimize Your Hero Image File
Your hero image should be under 150KB and in WebP format. Shopify's media library automatically converts images you upload to WebP when browsers support it, but the file you upload still needs to be reasonably sized to start with.
If you are uploading a 4000 x 3000 pixel photo as your hero, compress it first. Tools like Squoosh (free, browser-based) can compress a 2MB image down to under 200KB with almost no visible quality loss. Upload the compressed version to Shopify.
Fix 3: Reduce Your Home Page Sections
Every section on your homepage requires Liquid rendering time. A homepage with 15 sections has 15 blocks of Liquid code executing before your page is ready. Prune ruthlessly. Keep the sections that convert. Remove the ones that looked nice in a Fiverr mockup but nobody clicks.
Fix 4: Check Your Theme's Speed Score in Admin
Shopify added a built-in speed score to the Online Store section of your admin panel. Go to Online Store, then Themes. Your published theme shows a speed score at the bottom. It is based on Lighthouse and updates roughly every day. Watch it before and after any changes to know what actually helped.
Fix 5: Use Shopify's Image Optimizer Settings
In some themes and the Shopify admin under Preferences, you can find image optimization settings. Enable lazy loading for product images (but not for hero images, and not for images above the fold). Shopify will handle the lazy attribute for product listings automatically once enabled.
Developer Fixes (Better Results, Needs Code Access)
Fix 6: Remove loading="lazy" From the Hero Image
This is the highest-priority developer fix. Open your theme code, go to sections/image-banner.liquid or wherever your hero image is defined, and find the line that adds loading="lazy". Remove it. While you are there, add fetchpriority="high".
<!-- Before (bad for hero image) -->
{%- render 'image',
image: section.settings.image,
loading: 'lazy',
class: 'hero__image'
-%}
<!-- After (correct for hero image) -->
{%- render 'image',
image: section.settings.image,
loading: 'eager',
fetchpriority: 'high',
class: 'hero__image'
-%}If your theme uses Shopify's image Liquid tag directly:
<!-- Before -->
{{ section.settings.image | image_url: width: 1200 | image_tag: loading: 'lazy' }}
<!-- After -->
{{ section.settings.image | image_url: width: 1200 | image_tag: loading: 'eager', fetchpriority: 'high' }}Fix 7: Preload the Hero Image
Add a preload link in your theme.liquid file inside the <head> section. This tells the browser to start downloading the hero image immediately, before it even parses the rest of the HTML:
<!-- In theme.liquid, inside <head> -->
{%- if template == 'index' -%}
{%- assign hero_img = section.settings.image -%}
{%- if hero_img -%}
<link rel="preload"
href="{{ hero_img | image_url: width: 1200 }}"
as="image"
fetchpriority="high">
{%- endif -%}
{%- endif -%}Fix 8: Defer App Scripts
Find app script tags in your theme.liquid or layout files. Most look like:
<!-- Before: render-blocking -->
<script src="https://some-app.com/widget.js"></script>
<!-- After: deferred -->
<script src="https://some-app.com/widget.js" defer></script>Check whether adding defer breaks the app. Most modern apps work fine with defer. Some older ones need async instead. Test after each change.
Fix 9: Inline Critical CSS
Your hero section CSS should load instantly without waiting for a stylesheet download. Extract the CSS rules that control your hero image, navigation, and above-fold content. Put them in a <style> tag directly in your <head>.
The goal is that when the browser gets your HTML, it immediately knows how to render the top of the page without waiting for any external file. This alone can cut FCP and LCP by 200-400ms on slower connections.
Shopify Speed Apps: The Honest List
| App | What it does | Honest verdict |
|---|---|---|
| Booster: Page Speed Optimizer | JS/CSS deferral, image lazy load | Actually works for basic deferral |
| TinyIMG | Image compression, alt text, lazy load | Good for bulk image optimization |
| Hyperspeed | Comprehensive Shopify speed optimization | Helps but pricey, do manual fixes first |
| NitroPack | Caching, HTML optimization, CDN | Works well but expensive for small stores |
| Random "page speed" apps under $5/mo | Usually vague promises | Usually adds more scripts, hurts speed |
General rule: before adding any speed app, do the free manual fixes first. An app cannot fix the root problem of too many apps.
Real Before/After LCP Numbers
Based on Shopify stores that applied these fixes in 2025-2026, here is what the changes typically look like:
- Removing lazy load from hero image: LCP drops 400-900ms on average
- Disabling 3-4 unused apps: LCP drops 300-700ms, FCP also improves
- Preloading the hero image: LCP drops 150-400ms on slow connections
- Adding defer to app scripts: FCP improves 200-600ms, LCP indirectly benefits
- Compressing hero image to WebP under 150KB: LCP drops 200-500ms on mobile
Combined, these changes regularly move stores from failing LCP (over 4 seconds) to passing (under 2.5 seconds). Not always, because some stores have deeply customized themes with many complex issues. But for most standard Shopify stores, this is absolutely achievable.
FAQ
Will changing my theme break my store?
Editing theme code in Shopify does not break your live store until you save the changes. Make a duplicate of your theme first (Themes, then Actions, Duplicate). Edit the duplicate. Preview it. If everything looks right, publish it. If something breaks, your original theme is still there untouched.
How do I know which app is causing the slowdown?
Disable apps one at a time, check your PageSpeed score after each. Yes, this takes time. But it is the only reliable way to identify the culprit app. Do it in order of the scripts you see in DevTools Network tab, starting with the ones that load first.
Does Shopify hosting affect LCP?
Shopify's own hosting and CDN are quite good. Your TTFB on Shopify servers is typically 100-300ms, which is reasonable. LCP problems on Shopify are almost always caused by image issues or render-blocking scripts, not by the hosting infrastructure itself.
Can I pass Google Core Web Vitals on Shopify?
Yes, absolutely. Plenty of Shopify stores have green Core Web Vitals across all three metrics. It takes the fixes above plus sometimes some deeper theme code work. But it is definitely possible and increasingly necessary as Google's ranking signals include real user data from CrUX.
Related Performance Guides
Still Getting Red Scores?
Run a free audit and get a punch-list of exactly what to fix. No account needed.
Run Free Audit →Still Getting Red Scores?
Run your site through VitalsFixer. Free audit in 30 seconds, no account needed.
Analyze My Site Free →Want an Expert to Handle It?
Real engineers, 48-hour turnaround, money back if scores don't improve.
View Expert Fix →