Performance work is most useful when it begins with evidence. A lower Lighthouse score can come from a slow hero image, expensive Liquid, third-party scripts, layout shifts, or a combination of all four.
The goal is not to chase a perfect score. It is to find the bottleneck customers actually experience, fix it without breaking the storefront, and prevent the same problem from returning.
Key takeaways
- ↗Use field data to choose the problem
- ↗Separate server-rendering issues from browser work
- ↗Measure again after every meaningful change
01
Establish a useful baseline
Start with field data when the store has enough traffic, then use controlled lab tests to reproduce the issue. Review performance by page type and device because a fast homepage can hide a slow product or collection template.
- ↗Record LCP, CLS, INP, and TTFB
- ↗Test representative product and collection pages
- ↗Note recent theme publishes and app changes
02
Fix the largest visible element
Largest Contentful Paint is often a hero or product image. Give that asset explicit dimensions, an appropriate responsive size, and high fetch priority when it appears in the initial viewport. Do not hide it behind a loading animation.
Practical note: Images below the fold can be lazy-loaded. The main above-the-fold image generally should not be.
03
Reduce Liquid and rendering work
Slow server rendering delays everything that follows. Look for deeply nested loops, repeated metafield access, and large product or variant iterations that produce more data than the page uses.
- ↗Move repeated lookups outside loops
- ↗Render only the products and variants needed
- ↗Use Theme Inspector when TTFB points to Liquid
04
Protect the main thread
Theme scripts, analytics, and apps all compete for browser time. Load only what a page needs, use event delegation where appropriate, and avoid rebuilding interactions that HTML and CSS can already handle.
- ↗Defer non-critical scripts
- ↗Load section-specific code with the section
- ↗Review third-party impact before adding another app
05
Create a performance release habit
A one-time cleanup will fade as campaigns, apps, and theme changes accumulate. Add a small performance check to release reviews and compare both lab and field data after deployment.
Written by Mo Oumha
Shopify and full-stack developer working on themes, custom storefront features, integrations, and performance.
About Mo ↗