Shopify Speed, A Real, Working Playbook for Lighthouse 90+
The actual sequence we use to take Shopify themes from Lighthouse 50s to 90+ on mobile in two weeks. No magic. No new theme required.
Most Shopify speed advice falls into two camps. Camp one: “switch to a Hydrogen storefront.” Camp two: “install this app.” Both miss the point. Almost every Shopify Liquid theme can hit Lighthouse 90+ on mobile if you do the work in the right order.
Here’s the order we use, on every speed engagement we ship.
Day 1, Baseline honestly
Before you change anything: grab a real baseline. Three numbers matter.
- Lab Lighthouse (PageSpeed Insights, mobile). Run it three times, take the median.
- Field CrUX data in Google Search Console. This is what Google actually uses for ranking.
- WebPageTest waterfall, throttled to mobile 4G. This shows you what’s actually loading and when.
Lab numbers are necessary but not sufficient. Field data is what moves rankings. Optimise for both, but if they conflict, follow field data.
Day 2-3, Image pipeline
Shopify’s image_url filter supports WebP and responsive sizing. Most themes don’t use them
properly.
- Add
widthandheightattributes to every image. CLS issues evaporate. - Use
srcsetwith mobile-first widths. A 1600px hero loaded on mobile is the most common Lighthouse killer. - Lazy-load everything below the fold with
loading="lazy". Adddecoding="async"while you’re there. - Convert your hero image preload to
<link rel="preload" as="image" imagesrcset="...">so it starts loading before the rest of the CSS.
This pass alone usually moves Lighthouse 15-25 points.
Day 4-5, App audit
Open Chrome DevTools → Network. Reload your homepage. Sort by Size. Look at every script over 50KB. Most of them are apps.
For each one:
- Is it used on this page? If a “shipping protection” app loads on the homepage but only matters at checkout, defer it.
- Is it deferable? Add
deferorasyncto the script tag. Test the app’s flow still works. - Is it removable? If you installed it 6 months ago and never look at the dashboard, kill it.
Most stores can shave 30% of their JS payload here without losing functionality.
Day 6, Critical CSS
Shopify themes ship one giant theme.css file. The browser blocks rendering until it parses
all of it.
The fix is critical CSS, extract just the styles needed for above-the-fold content, inline
them in the <head>, and load the rest async.
Tools that work:
- Critters (https://github.com/GoogleChromeLabs/critters), Node tool, integrate into your build.
- Penthouse, alternative, similar approach.
- For Shopify, build the critical CSS once during theme development and snippet it into
theme.liquid.
This pass usually moves Lighthouse 5-10 points and dramatically improves LCP.
Day 7, Font loading
Geist, Inter, your custom font, fonts are the most-overlooked render-blocker.
font-display: swapon every@font-facerule. Users see text in a fallback font first, then the real font swaps in.- Preload only the font weights used above the fold (
<link rel="preload" as="font">). - Self-host fonts. Google Fonts adds DNS lookup and TLS handshake overhead. Self-hosted fonts load from your CDN.
Day 8-9, Third-party scripts
Analytics, chat, reviews, A/B testing, every third-party script is render-blocking until proven otherwise.
- Microsoft Clarity can be deferred to
loadevent without impact. - Meta Pixel should be deferred and fired on first scroll, not on document parse.
- GA4 can use the lite version (
gtag.jsasync) without losing core functionality. - Chat widgets should never load on the initial page. Defer until scroll or interaction.
Aim for zero render-blocking third-party scripts. Lighthouse rewards this directly.
Day 10, Theme code
Liquid is server-rendered, so it doesn’t directly affect Lighthouse. But generated HTML weight does.
- Strip unused sections. Most themes ship 30+ section files; you use 8.
- Audit
assets/theme.js, most themes ship megabytes of unused JS. Tree-shake or delete. - Replace heavy JS components with progressive-enhancement Liquid + small JS islands.
Day 11-12, Verification
- Re-run Lighthouse three times, median.
- Check WebPageTest waterfall, should be cleaner now.
- Check CrUX data in Search Console (note: CrUX has a 28-day rolling window, so the field improvements show up over weeks).
- Test on a real mid-range Android phone. Lab data lies. A real Pixel 5a is the ground truth.
What 90+ actually requires
For most Liquid themes, hitting 90+ on mobile requires:
- LCP under 2.5s
- CLS under 0.1
- Total JS under 200KB
- Critical CSS inlined
- Hero image preloaded and properly sized
- Zero render-blocking third-party scripts
If you’re missing any of these, you’re missing the score.
The trap
Speed work has a shelf life. If your team installs a chat widget after launch and doesn’t defer it, you’re back to Lighthouse 70s within a quarter. Speed is not a one-time engagement, it’s a discipline.
Set up Core Web Vitals monitoring (CrUX, or a service like SpeedCurve) and check it weekly. The team that runs this discipline keeps the score. The team that doesn’t, doesn’t.
If you want a focused 2-week sprint to take your store from where it is to 90+, and you want the work documented so your team can keep the score, that’s what our Shopify Speed sprint delivers.