TL;DR for the CoderLegion community: Most "Shopify speed optimization"
advice is image compression theater. After 50+ stores, the real LCP
killers live in your app stack, your Liquid loops, and your font loading
— and the order you fix them in determines whether you waste an
afternoon or actually move Core Web Vitals. Here's the triage order
I run on every audit.
If you've ever inherited a Shopify store with a 4-second LCP and a
client breathing down your neck about Core Web Vitals, you already
know the drill: someone tells you to "just compress the images,"
you do, and the number barely moves.
I've worked on 50+ Shopify storefronts at this point, and I can tell
you images are rarely the actual problem. The real LCP killers are
usually further down the stack — and you have to fix them in the right
order, or you'll waste hours on changes that don't move the needle.
This is the exact triage order I follow on every store I audit. Save
it, share it, argue with it in the comments — but try it in this order
first.
1. Audit, don't guess
Before you touch a single line of code, run the page through
PageSpeed Insights and
WebPageTest. Both, not one.
PageSpeed Insights gives you the
Core Web Vitals numbers Google
actually uses for ranking. WebPageTest gives you the waterfall that
tells you why the page is slow. You need both signals.
In the waterfall, look for these three patterns first:
- Render-blocking scripts in the
<head>
- Large hero images without
fetchpriority="high"
- Third-party scripts loaded synchronously — usual suspects are chat
widgets, review apps, and bloated analytics stacks
Write these down before you fix anything. Half the time, the fix list
is shorter than you expected.
This is where most stores live or die.
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–200 KB of
JavaScript on every page. That's your problem. Not the hero image.
What I actually do during this phase:
- Uninstall apps that aren't generating revenue you can measure. If
the marketing team can't show you a number, the app goes.
- For apps you keep, email the app's dev support and ask if they have
an async or deferred loading option. About half of them do — they
just don't advertise it.
- Move non-critical scripts to load on
requestIdleCallback
or after the first user interaction.
This step alone typically cuts 800ms–2s off LCP on a typical store.
3. Fix the hero image properly
If the LCP element is a hero image (it usually is on Shopify), here's
the three-line fix:
- Add
loading="eager" and fetchpriority="high" on the <img>
- Serve it as WebP at the actual display dimensions, not the
source upload size
- Preload it in
<head>:
<link
rel="preload"
as="image"
href="/path/to/hero.webp"
fetchpriority="high"
/>
This alone usually drops LCP by
600–1,200ms on a typical
Dawn-based
theme. It's the highest-leverage 10 minutes of work in the entire
stack.
4. Liquid render time
The often-missed one — and the one that separates devs who know
Shopify from devs who know Shopify.
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 on every section
Use the
Shopify Theme Inspector
to find the slow blocks. Cache what you can in section data, and look
hard at any snippet that touches all_products or queries metafields
in a loop. I've seen single snippets add 400ms to TTFB on their own.
5. Fonts
The boring last 10% — but it's the difference between "fast enough"
and "fast."
Self-host critical fonts. Three rules:
- Use
font-display: swap
so text renders immediately
- Subset to the characters you actually use (most stores ship full
Latin Extended for no reason)
- Preload only the one or two weights used above the fold — preloading
every weight hurts more than it helps
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 learning this stuff and want to go deeper on the
JavaScript/performance fundamentals behind why these patterns work,
I cover a lot of it in
1:1 web dev tutoring —
particularly the rendering pipeline, critical request chains, and how
browsers actually decide what to prioritize. The Shopify part is
just applied browser performance.
For real proof this triage order works in production, the
case studies on my site walk
through the actual before/after numbers from Shopify projects that
went through exactly this sequence.
TL;DR — the order matters
If you skim nothing else, remember this sequence:
- Audit with PageSpeed + WebPageTest
- Kill apps you don't need, defer the ones you do
- Fix the hero image (preload + fetchpriority + WebP)
- Profile Liquid with Theme Inspector
- Self-host fonts with proper subsetting
Do them out of order and you'll spend a weekend on font subsetting
while a 200KB chat widget is still tanking your LCP.
About the author
Zaid Ahmad is a Web Growth Partner helping small and medium
businesses build sites that turn visitors into customers. He
specializes in Shopify speed optimization
and WordPress performance work, and offers 1:1 web dev tutoring in
React, JavaScript, Node.js, and Shopify.