Cutting a Shopify Theme's LCP in Half
A measured teardown of a slow Shopify storefront: which apps cost the most, how the hero image was fixed, and what actually moved Largest Contentful Paint.
Quick answer
On the Shopify storefronts I have audited, LCP improvements come mostly from three changes: removing or deferring third-party app scripts that block the main thread, right-sizing and preloading the hero image, and cutting render-blocking CSS from the theme. Liquid rendering is almost never the bottleneck — the merchant's app stack usually is.
Starting point
A fashion storefront with a 4.1s field LCP on mobile and a bounce rate the owner blamed on 'the theme'. The theme was fine. Eighteen apps were not.
Where the time actually went
| Source | Main-thread cost | Action |
|---|---|---|
| Review app | 820 ms | Deferred until scroll into view |
| Popup/marketing app | 610 ms | Removed, replaced with a theme section |
| Chat widget | 540 ms | Loaded on first interaction |
| Hero image | 1.3 s render delay | Right-sized, preloaded, eager |
| Unused CSS | 180 ms | Split critical vs deferred |
The hero fix
{% assign hero = section.settings.image %}
<link rel="preload" as="image"
href="{{ hero | image_url: width: 1200 }}"
imagesrcset="{{ hero | image_url: width: 600 }} 600w,
{{ hero | image_url: width: 1200 }} 1200w"
imagesizes="100vw">
<img src="{{ hero | image_url: width: 1200 }}"
width="1200" height="800"
fetchpriority="high" loading="eager" decoding="async"
alt="{{ hero.alt | escape }}">Result
- Field LCP on mobile: 4.1s → 1.9s over four weeks of collected data.
- Total blocking time reduced by roughly 70%.
- Page weight on the landing template down 48%.
- No visual redesign; every change was infrastructural.
Lessons
- Audit apps before touching Liquid.
- Measure in the field; lab scores hide the real app stack.
- Every third-party script needs an owner and a justification.
- Re-measure a month later — apps get reinstalled.
Checklist
- Field data collected before and after, not just Lighthouse
- Per-app main-thread cost measured
- Non-critical apps deferred or removed
- Hero image preloaded, sized and eager
- Chat and popup widgets loaded on interaction
- Critical CSS inlined, rest deferred
- Re-audit scheduled after 30 days
Common mistakes
- Rewriting the theme before auditing apps.
- Judging success by a lab Lighthouse score.
- Deferring the hero image along with everything else.
- Leaving unused app scripts installed after removing their sections.
Frequently asked questions
Do Shopify apps really slow down a store?
Yes — most inject render-blocking JavaScript on every page regardless of whether the feature is used there. In audits, apps typically account for the majority of total blocking time.
What is a good LCP for a Shopify store?
Under 2.5 seconds at the 75th percentile on mobile field data. Under 2 seconds is achievable on most themes with disciplined app usage.
Summary
Audit the app stack, price each script in milliseconds, fix the hero image properly and defer everything that is not needed for first paint. The theme is rarely the problem.
working on something like this?