By Cristian Daron
Page speed directly impacts conversion rate. Google reports that a 1-second delay in mobile load time can reduce conversions by up to 20%. Google and Deloitte's Milliseconds Make Millions study found that a 0.1-second improvement in mobile site speed went with retail conversion rates 8.4% higher. Here's the playbook I use.
Audit: Where Is the Bloat?
Use Chrome DevTools Performance tab and Lighthouse to identify the biggest bottlenecks. Common culprits on Shopify: unoptimized theme code (especially Dawn-based themes with heavy JavaScript), oversized product images, third-party apps injecting scripts, and render-blocking CSS.
Theme Code Cleanup
Every Shopify theme ships with features you don't use. I audit the theme's JavaScript bundle and remove unused features: predictive search (if not used), quick-view modals, animations libraries, and unused section JavaScript.
Image Optimization Pipeline
Shopify automatically serves WebP through its CDN, but you still need to optimize: use the image_tag Liquid filter with explicit width/height to prevent CLS, implement lazy loading for below-fold images with loading='lazy', preload hero/LCP images, and keep product images under 200KB each.
Third-Party Script Management
Apps are the #1 performance killer. I audit every installed app and its script impact. Rules: remove any app not actively generating revenue, load non-critical scripts asynchronously, defer analytics scripts until after page load, and consolidate overlapping app functionality where possible.
Liquid Template Optimization
Shopify's Liquid templating engine can be surprisingly slow with poor patterns. Avoid: nested for-loops querying the same collection, excessive use of the 'include' tag (use 'render' instead), inline scripts within Liquid loops, and unnecessary variant JSON serialization on collection pages.
Font Performance
Custom fonts are often a hidden performance drag. Use font-display: swap to prevent invisible text during loading, subset fonts to include only the characters you need, preload your primary font file, and limit yourself to 2 font families maximum.
The Stack
My standard optimization stack for any Shopify store: optimized images with lazy loading, a cleaned theme JavaScript bundle, deferred third-party scripts, a preloaded LCP image and primary font, and critical CSS inlined. Measure before and after with PageSpeed Insights and the Chrome UX Report, and judge the result on real-user Core Web Vitals rather than a lab score.