DEV Community

Cover image for Why Your Shopify Store's LCP Is Still Over 3 Seconds (And the Fix Order I Use)
Zaid Ahmad
Zaid Ahmad

Posted on • Originally published at zaidahmaddev.com

Why Your Shopify Store's LCP Is Still Over 3 Seconds (And the Fix Order I Use)

Most "Shopify speed optimization" advice tells you to compress images and
call it done. After working on 50+ Shopify storefronts, I can tell you
images are rarely the problem. The real LCP killers are usually further
down the stack — and you have to fix them in the right order, or you
waste hours on changes that don't move the needle.

Here's the exact triage order I follow.

1. Audit, don't guess

Before touching anything, run the page through PageSpeed Insights AND
WebPageTest. PSI gives you the Core Web Vitals number Google cares about.
WebPageTest gives you a waterfall that tells you why.

Look for these in the waterfall:

  • Render-blocking scripts in the
  • Large hero images without fetchpriority="high"
  • Third-party scripts loaded synchronously (the usual suspects: chat widgets, review apps, analytics stacks)

2. App audit — the 80/20 of Shopify performance

Open your theme's theme.liquid and search for every <script> tag
injected by an app. Each one is a candidate for removal or deferral.

A pattern I see constantly: stores running 4–5 review apps, 2 popup
apps, and 3 "AI personalization" apps. Each one loads ~50–200KB of JS
on every page. That's your problem.

What I actually do:

  • Uninstall apps that aren't generating revenue you can measure
  • For apps you keep, ask the dev support team if they have an async or deferred loading option (about half do; you just have to ask)
  • Move non-critical scripts to load on requestIdleCallback or after user interaction

3. Fix the hero image properly

If the LCP element is a hero image (it usually is on Shopify):

  • Add loading="eager" and fetchpriority="high"
  • Serve it as WebP at the actual display dimensions (not the source size)
  • Preload it: <link rel="preload" as="image" href="..." fetchpriority="high">

This alone usually drops LCP by 600–1,200ms on a typical Dawn-based
theme.

4. Liquid render time

The often-missed one. If your collection or product page is slow even
on a fast connection, your Liquid is doing too much work per request.
Common culprits:

  • Nested for loops over all_products
  • Unbounded metafield iteration
  • Custom snippets that re-render the same data

Use the Shopify theme inspector to find slow blocks. Cache what you can
in section data.

5. Fonts

Self-host critical fonts. Use font-display: swap. Subset to the
characters you actually use. This is the boring last 10% that takes
you from "fast enough" to "fast."


What I don't recommend: the dozens of "speed optimization" apps in the
Shopify App Store. Most of them just add another script to the page
they claim to make faster. The fix is almost always removing things,
not adding things.

If you're stuck on a specific Shopify store and want a second pair of
eyes, I write about this kind of work at zaidahmaddev.com
— happy to take a look.

Top comments (0)