Case Study — PageSpeed Optimization

From 43 to 91
PageSpeed Score

A complete performance overhaul of a Shopify fashion store that cut load time from 9.2 seconds to 1.8 seconds — and increased conversions by 89%.

43
Before
91
After
+48pts
Improvement
Before vs After — Key Metrics
Measured using Google PageSpeed Insights and Lighthouse audit
Page Load Time
Before9.2s
After1.8s
Total Page Size
Before18.4MB
After1.9MB
Largest Contentful Paint
Before11.4s
After1.9s
Conversion Rate
Before1.2%
After2.7%
Bounce Rate
Before74%
After38%
What Was Done — Step by Step
7-day optimization sprint across performance, images, scripts, and UX
Day 1 — Diagnosis
Full Lighthouse Audit + Root Cause Analysis
Ran Google Lighthouse, GTmetrix, and WebPageTest audits. Identified 6 render-blocking scripts, 18MB of uncompressed images, 3 unused app scripts loading on every page, and no lazy loading on any images.
✓ Root causes identified — prioritized by load time impact
Day 2 — Image Optimization
Converted 94 Images to WebP — Saved 16.5MB
Converted all PNG and JPEG images to WebP format using Shopify's built-in image transformation API. Added responsive srcset attributes so mobile devices load smaller images. Enabled lazy loading on all below-fold images.
✓ Page weight dropped from 18.4MB to 1.9MB — load time cut by 4.1 seconds
Day 3 — Script Optimization
Deferred 6 Render-Blocking Scripts
Added defer and async attributes to all non-critical JavaScript. Removed 3 unused Shopify apps that were injecting scripts on every page load even though they were only needed on 2 pages. Moved all scripts to bottom of body.
✓ Time to First Byte improved by 2.8 seconds
Day 4 — Font Optimization
Consolidated 6 Google Font Requests to 1
Store was loading 6 separate Google Fonts API calls. Consolidated into a single optimized request. Added font-display: swap to prevent invisible text during font load. Self-hosted the primary display font.
✓ Eliminated 5 network round trips — saved 0.8 seconds
Day 5-7 — Final Tuning
Preload, Cache Headers + Liquid Template Cleanup
Added resource preload hints for hero image and primary font. Cleaned up Liquid template files — removed 340 lines of unused CSS. Added browser cache headers. Minified all custom CSS and JS files.
✓ Final score reached 91 — from starting score of 43
Techniques Used
Every optimization applied with its measured impact
🖼️
WebP Image Conversion
Converted all 94 product and hero images from PNG/JPEG to WebP using Shopify's img_url filter with format parameter. Added responsive srcset for 3 breakpoints.
Saved 16.5MB
Script Deferral
Added defer attribute to all non-critical scripts. Removed 3 abandoned app scripts that were still loading. Moved inline scripts below fold content.
-2.8s render time
🔤
Font Optimization
Reduced Google Fonts requests from 6 to 1. Added font-display: swap. Self-hosted primary display font to eliminate external dependency.
-0.8s load time
💤
Lazy Loading
Added loading="lazy" to all below-fold images. Used IntersectionObserver for custom lazy-loaded sections. Hero image preloaded with <link rel="preload">.
-1.4s LCP
🗑️
CSS Cleanup
Removed 340 lines of unused CSS from theme files accumulated from previous developer edits and removed app styles that were never cleaned up.
-180KB CSS
📦
Browser Caching
Configured cache-control headers for static assets. Shopify CDN already handles most caching but custom asset cache rules were added for theme files.
+repeat visits
Final Results — 30 Days Post-Launch
Measured against same 30-day period from previous year
+89%
Conversion Rate
-80%
Page Load Time
-49%
Bounce Rate
+48pts
PageSpeed Score