Why Speed Matters for Shopify Stores
Google's Core Web Vitals are a direct ranking factor. Slow pages rank lower in search AND convert worse. For ecommerce:
- 1s delay โ ~7% drop in conversions (Akamai)
- 3s load time โ 40% of mobile visitors leave before the page loads
- Fast stores see 15โ30% higher add-to-cart rates
Diagnose First
Before fixing, measure. Run your store through:
- Google PageSpeed Insights โ gives a Core Web Vitals breakdown
- GTmetrix โ waterfall view showing exactly what is slow
- Shopify's built-in speed score (Online Store โ Themes โ Speed)
The three Core Web Vitals to focus on:
- LCP (Largest Contentful Paint) โ time to render the main content
- INP (Interaction to Next Paint) โ response time to clicks
- CLS (Cumulative Layout Shift) โ visual stability
1. Compress and Resize Images
Images are the #1 cause of slow Shopify stores.
Quick wins:
- Convert product images to WebP format (30โ50% smaller than JPEG)
- Resize images to actual display size โ a 4000px image displayed at 800px wastes bandwidth
- Add
loading="lazy"to below-the-fold images - Use Shopify's native
img_urlfilter with size parameters:
{{ product.featured_image | img_url: '800x800', format: 'webp' }}
2. Reduce App Load
Every installed Shopify app that injects JavaScript slows your store. A store with 20 apps is almost always slow.
Steps:
- Go to Online Store โ Themes โ Edit code
- Search for
app.jsandembedtags for inactive apps - Uninstall apps you no longer use โ deletion from the app store does not remove their code
- Use Shopify's App Audit (via PageSpeed Insights) to see which apps add the most weight
Target: under 8 active apps injecting front-end code.
3. Optimize Your Theme
Choose a fast theme. Dawn (Shopify's default) scores 95+ on PageSpeed out of the box. Many premium themes are slow.
In your current theme:
- Remove unused sections from templates
- Disable features you don't use (predictive search, infinite scroll, video backgrounds)
- Minify custom CSS/JS if your theme doesn't do it automatically
4. Lazy Load Videos and Heavy Embeds
YouTube embeds, Vimeo, maps, and chat widgets all block page render if loaded immediately.
Use a facade pattern: show a thumbnail image, load the real embed only when the user clicks.
<!-- Show thumbnail first -->
<img src="/thumbnail.jpg" id="video-thumb" />
<!-- Load iframe on click via JS -->
5. Set Up a CDN
Shopify's CDN (powered by Fastly) automatically serves images from edge servers. Make sure you are using Shopify-hosted images, not external image URLs.
For JavaScript and CSS, Shopify already serves theme assets via CDN. Custom scripts should be loaded asynchronously:
<script src="{{ 'custom.js' | asset_url }}" defer></script>
6. Reduce Third-Party Scripts
Google Tag Manager, Meta Pixel, TikTok Pixel, Klaviyo, Hotjar โ every pixel adds 50โ300ms.
Best practice:
- Load all pixels through Google Tag Manager (one script, multiple tags)
- Set non-essential scripts to load with
deferorasync - Remove pixels for platforms you no longer advertise on
Speed Improvement Checklist
- Images compressed and in WebP format
- Unused apps removed and their code cleaned up
- Theme sections stripped to what is actually used
- Videos use facade/lazy-load pattern
- All custom scripts use
defer - PageSpeed score above 80 on mobile
Need Help?
eData4You's Shopify team audits, optimises, and maintains store speed as an ongoing service. Contact us โ