A slow Shopify store costs you money. Studies show that every second of delay reduces conversions by up to 7%. Google also uses page speed as a ranking factor, meaning slow stores get less organic traffic.
The good news? Most speed issues are fixable — once you know what’s causing them. This guide walks you through a practical, step-by-step process to diagnose and fix the most common performance bottlenecks on your Shopify store.
Step 1: Measure Your Current Performance
Before making changes, you need a baseline. There are two ways to check your store’s speed:
Manual approach: Run your store URL through Google PageSpeed Insights. Note your scores for both mobile and desktop, and pay attention to the specific issues flagged.
Automated approach: Install ThemeLens to get a health score and detailed performance report directly in your Shopify admin. ThemeLens analyzes your theme code, third-party apps, and assets to pinpoint exactly what’s slowing you down — no technical knowledge required.
Tip: Focus on your mobile score first. Most Shopify traffic comes from mobile devices, and Google uses mobile-first indexing.
Step 2: Optimize Your Images
Images are typically the biggest contributor to slow page loads. Here’s how to fix them:
Use the right format
- WebP or AVIF for product photos and hero images (40-50% smaller than JPEG)
- SVG for logos and icons
- PNG only when you need transparency and WebP isn’t an option
Resize before uploading
Don’t upload a 4000x4000px image for a 400px product thumbnail. Resize images to the maximum display size before uploading:
- Product images: 2048x2048px maximum
- Hero/banner images: 1920px wide maximum
- Collection images: 1024px wide maximum
Enable lazy loading
Most modern Shopify themes support lazy loading out of the box. This means images below the fold only load when the visitor scrolls to them. Check your theme settings under Online Store → Themes → Customize for a lazy loading toggle.
What to avoid: Don’t lazy-load your hero image or any images visible on initial page load (above the fold). This actually hurts your Largest Contentful Paint (LCP) score.
Step 3: Audit Your Third-Party Apps
Every app you install can add JavaScript and CSS to your storefront. Some add a lot. This is one of the biggest — and most overlooked — causes of slow Shopify stores.
How to identify problematic apps
ThemeLens automatically detects which third-party apps are injecting code into your storefront and how much they’re impacting performance. It shows you exactly which apps are the heaviest so you can make informed decisions.
Without ThemeLens, you can manually test by:
- Temporarily disabling an app
- Clearing your browser cache
- Re-running a speed test
- Comparing scores before and after
Common app offenders
- Live chat widgets — Often load large JavaScript bundles. Consider loading them only after user interaction.
- Pop-up and notification apps — Multiple overlays competing for resources.
- Social media feed widgets — Pull in external resources and images.
- Analytics and tracking apps — Each one adds another script. Consolidate where possible.
What to do
- Remove apps you’re not actively using
- If two apps serve similar purposes, keep the lighter one
- Check if apps offer a “load on interaction” option
- Contact app developers about performance concerns — good developers care about this
Step 4: Clean Up Your Theme Code
Your theme’s code quality directly affects load times. Here’s what to look for:
Remove unused CSS and JavaScript
If you’ve switched themes or removed sections, leftover code may still be loading. Look for:
- CSS files from features you’ve disabled
- JavaScript for apps you’ve uninstalled (some leave code behind)
- Unused font files
Minimize render-blocking resources
Render-blocking resources prevent your page from displaying until they finish loading. To reduce their impact:
- Move non-critical CSS below the fold
- Add
deferorasyncattributes to non-essential JavaScript - Inline critical CSS for above-the-fold content
Reduce DOM size
Shopify themes with deeply nested elements slow down rendering. Signs of DOM bloat:
- Sections with excessive wrapper divs
- Mega menus with hundreds of links loaded on every page
- Hidden elements that are still in the DOM
Step 5: Optimize Fonts
Custom fonts can add 100-500KB to your page load. Here’s how to minimize their impact:
Limit font variations
Each weight and style is a separate file download:
- Use 2-3 font weights maximum (e.g., 400, 600, 700)
- Avoid loading italic versions unless you actually use them
- Consider using system fonts for body text
Use font-display: swap
This tells the browser to show text immediately with a fallback font, then swap in the custom font when it loads. Most modern Shopify themes do this by default, but it’s worth checking.
Preload critical fonts
Add preload hints for fonts used above the fold:
<link rel="preload" href="your-font.woff2" as="font" type="font/woff2" crossorigin>Step 6: Leverage Browser Caching
Shopify’s CDN handles most caching automatically, but you can still optimize:
- Shopify-hosted assets are cached automatically with long expiration headers
- Third-party scripts may not have optimal caching — this is usually controlled by the app developer
- Custom assets uploaded to your theme should be served through Shopify’s CDN (use the
asset_urlfilter in Liquid)
Step 7: Optimize Above-the-Fold Content
The content visible without scrolling (above the fold) has the biggest impact on perceived speed and Core Web Vitals scores.
Prioritize the Largest Contentful Paint (LCP)
Your LCP element is typically a hero image or large heading. To optimize it:
- Preload the hero image using
<link rel="preload"> - Don’t lazy-load above-the-fold images
- Avoid loading the hero image via CSS (
background-image) — use an<img>tag instead - Set explicit width and height on images to prevent layout shifts
Minimize Cumulative Layout Shift (CLS)
Layout shifts happen when elements move around as the page loads. Common causes:
- Images without width/height attributes
- Ads or banners that load late and push content down
- Web fonts that cause text to resize
- Dynamic content inserted above existing content
Reduce First Input Delay (FID)
FID measures how quickly your store responds to user interaction. Improve it by:
- Reducing JavaScript execution time
- Breaking up long tasks
- Removing unnecessary third-party scripts
Step 8: Set Up Continuous Monitoring
Speed optimization isn’t a one-time task. New apps, theme updates, and content changes can introduce regressions.
ThemeLens offers automated monitoring that regularly scans your store and alerts you to new performance issues. This way you catch problems before they impact your customers.
Without automated monitoring, schedule a manual speed check at least once a month — especially after installing new apps or making theme changes.
Quick Wins Checklist
If you’re short on time, start with these high-impact changes:
- Remove unused apps (biggest impact for least effort)
- Compress and resize images before uploading
- Enable lazy loading for below-the-fold images
- Limit custom fonts to 2-3 weights
- Run a ThemeLens scan to identify your store’s specific bottlenecks
What’s a Good Score?
Google PageSpeed scores range from 0-100:
| Score | Rating | What it means |
|---|---|---|
| 90-100 | Good | Your store is fast |
| 50-89 | Needs Improvement | There’s room to optimize |
| 0-49 | Poor | Speed is likely hurting conversions |
Be realistic: Most Shopify stores score between 40-70 on mobile. Getting to 90+ on mobile is difficult with a fully featured store. Focus on steady improvement rather than chasing a perfect score.
Next Steps
- Measure your current score with ThemeLens or Google PageSpeed Insights
- Identify the biggest bottlenecks (images, apps, or theme code)
- Fix the highest-impact issues first
- Monitor continuously to prevent regressions
Speed optimization is an ongoing process, but even small improvements compound over time. A store that loads one second faster can see meaningful increases in conversion rate, SEO rankings, and customer satisfaction.
Need help identifying what’s slowing down your store? Install ThemeLens — it’s free to start with 3 diagnostic scans and gives you a clear, actionable report in minutes.