Google PageSpeed Insights gave my Shopify store a mobile score of 23 out of 100. Twenty-three. The "poor" threshold is 49.
I knew my site was slow. Customers had mentioned it. But I didn't realize how bad it was until I saw that number. And the biggest culprit, according to PageSpeed? Images. Specifically, 47 product images loading simultaneously on my collection page, each one a 2500×2500 JPEG at full resolution.
Total page weight: 38MB. On a mobile connection, that's a 12-second load time. Most customers bounce after 3 seconds.
The Problem
I'd followed the advice to use high-resolution product images (2500×2500 for Amazon compliance). But I was serving those same full-resolution images everywhere — collection pages, search results, homepage featured products. Every thumbnail was a 2500px image squeezed into a 300px container.
That's like shipping a refrigerator when someone ordered a lunchbox.
Fix 1: Lazy Loading (Immediate Impact)
Lazy loading means images below the fold don't load until the user scrolls to them. Instead of loading all 47 images at once, the browser loads the 6-8 visible ones and waits for the rest.
On Shopify, this is built in for most modern themes. Check your theme settings → Performance → "Lazy load images." If it's not there, you can add it with a one-line attribute: loading="lazy" on your <img> tags.
Result: Page load time dropped from 12 seconds to 4.5 seconds. PageSpeed score went from 23 to 51. Just from lazy loading. No image quality changes.
Fix 2: Responsive Image Sizes
Instead of serving one 2500px image everywhere, I created multiple sizes:
- Thumbnail: 400×400 (for collection grids)
- Medium: 800×800 (for product cards and quick view)
- Full: 2500×2500 (only loaded when customer clicks into the product page or uses zoom)
Shopify handles this automatically if your theme uses srcset attributes. Most modern themes do. If yours doesn't, it's worth upgrading or adding the markup manually.
Result: Collection page weight dropped from 38MB to 3.2MB. That's a 92% reduction.
Fix 3: WebP Format
JPEG is fine. WebP is better. Same visual quality at 25-35% smaller file size.
I converted all my product images to WebP using a batch converter. Shopify serves WebP automatically to browsers that support it (which is all modern browsers now), but you need to upload the WebP versions.
Result: Another 30% reduction in file size on top of the responsive sizing. Collection page is now under 2.5MB.
Fix 4: Above-the-Fold Priority
Lazy loading is great for below-the-fold images, but you don't want to lazy-load the images that are immediately visible. Those should load as fast as possible.
I added fetchpriority="high" to the first 4 product images on collection pages and the main product image on product pages. This tells the browser to prioritize these images over other resources.
Result: Largest Contentful Paint (LCP) — the Core Web Vital that measures when the main content becomes visible — dropped from 4.2 seconds to 1.8 seconds.
The Final Numbers
| Metric | Before | After | Change |
|---|---|---|---|
| PageSpeed Mobile | 23 | 78 | +239% |
| Page weight (collection) | 38MB | 2.4MB | -94% |
| Load time (3G) | 12s | 2.8s | -77% |
| LCP | 4.2s | 1.8s | -57% |
| Bounce rate | 62% | 41% | -34% |
The bounce rate improvement was the most meaningful business metric. Fewer people leaving = more people buying.
What I Wish I'd Known Earlier
High-resolution images and fast loading aren't mutually exclusive. You can have 2500px images for zoom AND fast page loads. The trick is serving the right size in the right context.
Image optimization is the highest-ROI performance fix. I spent weeks optimizing JavaScript bundles and CSS delivery. The image fixes took an afternoon and had 3x the impact.
Core Web Vitals affect search rankings. After my PageSpeed score improved, my organic traffic increased about 15% over the following month. Google rewards fast sites.
For the image processing pipeline, I use pic1.ai for background removal and then export at multiple sizes. Having clean, properly-sized images from the start makes the optimization much easier than trying to retrofit oversized images after the fact.
For the SEO side of images, check out how alt text increased my image search traffic by 40%. And for the conversion impact of better images, here's how I doubled my conversion rate by changing only the photos.