Episode 8
Shopify Theme Performance: Getting to Lighthouse 90+ on a Live Store
Carlos has fixed performance for 60+ live Shopify stores — some doing $50M/year. Here's his exact diagnostic process, the 10 issues that account for 90% of Shopify performance problems, and the changes that move the needle fastest.
57:25·Guest: Carlos Mendes — Senior Shopify Performance Engineer, Shopspeed Consulting·Host: Ivan P.
Details
- Why Shopify store performance is not primarily a theme problem — it's an app problem.
- The performance diagnostic flow: how Carlos approaches a new store audit in the first 30 minutes.
- Largest Contentful Paint (LCP) on Shopify: the specific causes and the fixes that move the metric.
- Cumulative Layout Shift (CLS): why Shopify stores have chronic CLS problems and the root cause in most cases.
- Interaction to Next Paint (INP): the newest Core Web Vital and why app-heavy Shopify stores fail it.
- App impact on performance: how to identify which installed apps are causing the most JavaScript overhead.
- Liquid render performance: the template patterns that cause slow server-side rendering and how to fix them.
- Image optimization in Shopify: the `image_url` filter, responsive images, and the lazy loading patterns that work in 2026.
- Third-party scripts: Google Tag Manager, Meta Pixel, chat widgets — how to load them without destroying performance.
- Shopify's built-in performance tools: the Speed Report, Page Preview, and what they don't tell you.
- Critical CSS: how to implement above-the-fold CSS inlining in a Shopify theme without breaking the build.
- Font loading strategy: the FOUT vs. FOIT trade-off and the approach that balances speed and brand consistency.
- The performance testing environment: why you can't use Lighthouse on a development store and the alternatives.
- Case study: taking a $30M store from a Lighthouse score of 24 to 91 — the specific changes in order.
- Performance maintenance: the process Carlos uses to keep scores above 90 after every app install or theme update.
Show Notes
- 01Shopify app performance audit: using Chrome DevTools Performance panel to attribute JavaScript cost per app
- 02LCP optimization checklist: hero image format (WebP/AVIF), dimensions, fetchpriority="high", CDN delivery
- 03CLS root causes in Shopify: lazy-loaded images without dimensions, font swap, dynamic content injection from apps
- 04INP on Shopify: how to measure it, the 200ms budget, and what long tasks from apps look like in the trace
- 05Image URL filter in Shopify Liquid: the full syntax for responsive images with width descriptors
- 06Third-party script loading: the partytown approach, async/defer attributes, and GTM container configuration
- 07Critical CSS in Shopify: the manual and automated approaches — when each is practical
- 08Shopify Speed Report: what the score means, how it's calculated, and why it differs from Lighthouse
- 09Real-user monitoring (RUM) for Shopify: how to set up field data collection for actual visitor experience
- 10The case study store changes in order: image optimization → app audit → critical CSS → font loading → third-party script audit
Timestamps
0:00Carlos intro: performance engineer who's worked on 60+ live Shopify stores
4:30The performance myth: it's not the theme, it's the apps
9:1030-minute audit process: where Carlos starts and why
13:45LCP: causes and the fixes that move the metric most
18:20CLS on Shopify: the chronic problem and its root cause
23:00INP: the newest Core Web Vital and why apps fail it
27:35App performance audit: attributing JavaScript cost to specific apps
32:10Image optimization: the image_url filter and responsive images
36:45Third-party scripts: loading strategy that doesn't kill performance
41:20Critical CSS: when it's worth doing and how to implement it
45:55Case study: 24 → 91 Lighthouse — the changes in order
51:30Performance maintenance after app installs and theme updates
55:50Closing: the single highest-ROI performance change for most Shopify stores
Transcript
H
Ivan P.0:00
Carlos, you've fixed performance for 60+ Shopify stores. What's the number one misconception founders have when they come to you?G
Carlos Mendes0:00
That it's the theme. They spent $300 on a premium theme and the store is slow, so they assume the theme is the problem. In my experience, the theme causes maybe 20% of Shopify performance issues. The other 80% is app JavaScript. The average Shopify store has 12–15 installed apps, and every app adds JavaScript. Some add 50KB minified. Some add 500KB. Some add external font loads. Some block rendering. When you add them up, that's the performance problem.H
Ivan P.9:00
Walk me through your first 30 minutes with a new store. What do you look at first?G
Carlos Mendes9:10
I open Chrome DevTools Network tab and load the homepage cold. I'm looking at total transfer size, number of requests, and whether there are any render-blocking resources. Then I open the Performance panel and run a trace. I'm looking for long tasks — anything over 50ms. Usually I see a cluster of long tasks from app scripts that run before the page is interactive. That's my target list. Then I look at the Waterfall to find LCP resource — if it's an image, is it optimized? Is it lazy loaded when it shouldn't be? Is fetchpriority set? In 30 minutes I have a diagnosis that's accurate 90% of the time.H
Ivan P.45:45
Tell me about the store you took from 24 to 91. What was going on at 24?G
Carlos Mendes45:55
Eighteen installed apps, seven of them loading JavaScript unconditionally on every page. Hero image was 2.4MB JPEG with no srcset. Three font families loading from Google Fonts with render blocking. GTM container with 23 tags firing on pageview. The LCP was the hero image loading at 6.2 seconds. We fixed the image first — converted to WebP, added proper dimensions and srcset, set fetchpriority='high'. LCP dropped to 2.8 seconds just from that one change. Then we audited the apps and removed four that were unused-but-installed. Then critical CSS for above-the-fold styles. Then font-display: swap. Final score was 91.Let's ship something great
Ready to hire a Shopify expert?
Get matched with a pre-vetted Shopify developer in 48 hours. 30-day guarantee.