Shopify
How I Took a Shopify Store From 41 to 96 on Lighthouse Mobile
A step-by-step case study of a real Shopify speed optimisation project — the exact changes that took mobile performance from 41 to 96, in order of impact.
A D2C skincare client came in with a Shopify store scoring 41 on mobile Lighthouse — slow enough that their own paid ad traffic was bouncing before the page finished loading. Six weeks later it sat at 96. Here's exactly what changed, in the order it was fixed.
The starting audit
The Lighthouse report pointed at three culprits immediately: a theme running four unused apps' worth of injected JavaScript, unoptimised product images averaging 1.4MB each, and a hero video autoplaying above the fold on every device including mobile data connections.
1. App audit — the fastest win
Shopify apps are the single most common cause of a slow store, because every installed app injects its own script tag regardless of whether the page needs it. We removed four apps that were either unused or replaceable with native theme functionality, which alone took the score from 41 to 58.
2. Image optimisation and responsive sizing
Product photography was uploaded at full camera resolution and served at that size regardless of viewport. Switching to Shopify's built-in image_url responsive sizing with proper srcset attributes, and compressing the source images to WebP, cut the largest contentful paint image weight by roughly 80%.
3. Killing the autoplay hero video on mobile
The hero video looked great on desktop and was actively harmful on mobile — a multi-megabyte video blocking the perceived load of the page above the fold. It was replaced with a static hero image on mobile breakpoints, with the video still available on desktop where bandwidth is less of a constraint.
Key takeaway: Anything autoplaying above the fold on mobile should be treated as a performance liability by default, not a design win.
4. Deferring non-critical scripts
Chat widgets, review platform embeds, and analytics scripts were all loading synchronously in the theme's <head>. Moving them to load after the page's main content painted — using defer and, for a couple of third-party embeds, a simple intersection-observer-based lazy load — removed a significant chunk of main-thread blocking time.
5. Font loading strategy
The theme was loading three font weights it didn't use anywhere in the design. Trimming to the two weights actually used, self-hosting them instead of a render-blocking external request, and adding font-display: swap removed a layout shift penalty that was hurting the Cumulative Layout Shift score specifically.
The result
Final mobile Lighthouse score: 96. More importantly, the client's own analytics showed mobile bounce rate on paid traffic drop by 22% in the following month, and mobile conversion rate improved measurably — the kind of result a Lighthouse number is really a proxy for.
None of these five changes required a theme rebuild. If your Shopify store is running slow, an app audit and image optimisation pass alone will usually recover most of the score.
Related articles
Shopify vs WordPress: Which Platform Is Actually Right for Your Business
An honest, platform-agnostic comparison of Shopify and WordPress across cost, control, ecommerce features, and long-term maintenance — with a simple decision framework.
Google AI Overviews: How to Get Your Website Cited by AI Search
AI Overviews and tools like ChatGPT and Perplexity are changing how people find businesses. Here is exactly what determines whether your site gets cited — and how to fix it.
The Complete React Performance Guide: From Slow to Sub-Second
A practical, no-fluff walkthrough of the React performance techniques that actually move the needle — memoisation, code-splitting, virtualisation, and the profiling workflow to find real bottlenecks.