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
requestIdleCallbackor 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"andfetchpriority="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
forloops overall_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)