How to Measure Your Current Speed
Before fixing anything, establish your baseline. Use three tools:
Google PageSpeed Insights (pagespeed.web.dev) — Enter your URL and check the mobile score. Focus on Core Web Vitals: Largest Contentful Paint (LCP), First Input Delay (FID) / Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).
Google Search Console — The Core Web Vitals report shows how Google evaluates your real-user speed data. This is what actually affects your ranking — not lab scores.
WebPageTest (webpagetest.org) — Run a test from a mobile device on a 4G connection for the most realistic results. The waterfall view shows exactly which resources are slowing your page.
Your targets:
- LCP: Under 2.0 seconds (ideally under 1.5)
- INP: Under 200ms
- CLS: Under 0.1
- Total page weight: Under 2MB
- HTTP requests: Under 60
The 15 Fixes (Ranked by Impact)
1. Optimize and Compress All Images
Impact: Very High (typically 30-50% of total speed improvement)
Images are the #1 speed killer on most Shopify stores. The average unoptimized Shopify store loads 3-8MB of images per page.
What to do:
Convert all images to WebP or AVIF format. These next-gen formats are 25-35% smaller than JPEG at equivalent quality. Shopify serves WebP automatically if you upload images through the admin — but many stores have older images that were uploaded before this feature existed, or use apps that bypass Shopify’s image processing.
Resize images to the maximum display size. A product image displayed at 800px wide doesn’t need to be uploaded at 3000px. Resize before uploading. For hero banners, 1600px wide is sufficient for virtually all screen sizes.
Implement lazy loading for all below-the-fold images. Lazy loading means images only load as the user scrolls down to them — not on initial page load. Shopify’s Dawn theme and most modern themes support native lazy loading. If yours doesn’t, add loading="lazy" to image tags.
Compress without visible quality loss. Use tools like TinyPNG, ShortPixel, or Shopify’s built-in compression. Aim for file sizes under 150KB for product images and under 300KB for banners.
2. Audit and Remove Unused Apps
Impact: Very High
Every Shopify app injects JavaScript into your storefront — whether you’re actively using the app or not. The average Shopify store has 20+ apps installed. Our target: 6-8.
What to do:
Go to Settings → Apps and review every installed app. For each one, ask: “Is this app actively contributing to revenue or operations?” If the answer is “I installed this 6 months ago and haven’t touched it,” uninstall it.
After uninstalling, check your theme’s code for leftover app scripts. Many apps leave behind JavaScript snippets even after uninstallation. Check theme.liquid and snippets/ for references to apps you’ve removed.
For essential apps, evaluate lighter alternatives. A review app loading 200KB of JavaScript might be replaceable with one loading 30KB. Judge.me and Loox are generally lighter than Yotpo, for example. The difference compounds across every page load.
3. Defer Non-Critical JavaScript
Impact: High
JavaScript that runs before the page is visible (render-blocking JS) directly delays LCP. Most third-party scripts — analytics, chat widgets, pop-up tools, social proof notifications — don’t need to load immediately.
What to do:
Add defer or async attributes to non-critical script tags. defer loads the script in parallel but executes it after the page is parsed. async loads and executes as soon as possible.
Move chat widgets, social proof pop-ups, and analytics scripts to load after the main content. A chat widget that loads 500ms faster is irrelevant to the user — they’re not going to chat in the first 500ms. But those 500ms directly affect your LCP score.
For Google Analytics (GA4), use the async loading method. For Klaviyo, Meta Pixel, and similar tracking scripts, defer loading by 2-3 seconds using setTimeout wrappers.
4. Minimize and Bundle CSS
Impact: High
Unminified CSS files contain whitespace, comments, and formatting that adds bytes without adding value. Multiple CSS files require multiple HTTP requests, each adding latency.
What to do:
Minify all CSS files. Most Shopify themes can be minified using online tools or build processes. Remove unused CSS rules — if your theme has styles for features you’re not using (accordion, tabs, video player), remove those rules.
Inline critical CSS. The CSS needed to render above-the-fold content can be inlined directly in the of your HTML, eliminating one render-blocking HTTP request. The rest of the CSS loads asynchronously.
5. Optimize Fonts
Impact: Medium-High
Custom web fonts are common on Shopify stores and often loaded inefficiently.
What to do:
Limit to 2 font families maximum. Each additional font family adds 50-150KB and an HTTP request.
Use font-display: swap in your @font-face declarations. This tells the browser to show text immediately using a system font, then swap in the custom font when it loads — preventing the “invisible text” flash that hurts LCP.
Self-host fonts instead of loading from Google Fonts. Shopify’s servers are faster for your users than Google’s font CDN in most cases. Download the font files, upload to your theme’s assets folder, and reference them locally.
Subset your fonts. If you only need Latin characters, don’t load the full Unicode range. Font subsetting can reduce file size by 50-70%.
6. Preload Critical Assets
Impact: Medium
Preloading tells the browser to start downloading important resources before it naturally discovers them during page parsing.
What to do:
Add for your hero image, primary font file, and critical CSS file. These are the resources that determine your LCP — getting them started earlier directly reduces LCP time.
Add for third-party domains you know you’ll need (e.g., Shopify’s CDN, your analytics provider, your review app’s domain).
7. Reduce DOM Size
Impact: Medium
A large DOM (Document Object Model) means the browser has more HTML elements to parse, style, and render. Shopify stores with complex mega-menus, product grids with 48+ items per page, and heavily nested section layouts often exceed 1,500 DOM elements.
What to do:
Reduce products per page on collection pages. Loading 48 products per page means 48 product cards with images, titles, prices, and interactive elements. 24 products per page with a “Load More” button cuts initial DOM size in half.
Simplify mega-menu structure. A mega-menu with 200+ links across 6 columns is a massive DOM element that renders on every page — even when the menu is closed.
Remove hidden elements. Sections that are present in the DOM but hidden with display: none still consume parsing time. If content isn’t needed on page load, use JavaScript to inject it on demand.
8. Enable Browser Caching
Impact: Medium
Shopify handles most caching automatically through its CDN, but there are additional optimizations:
What to do:
Verify that Shopify’s CDN is serving assets with proper cache headers. Static assets (images, CSS, JS) should have long cache durations (1 year).
For any custom-hosted assets (self-hosted fonts, custom scripts), ensure cache-control headers are set appropriately.
9. Optimize the Homepage Specifically
Impact: Medium
The homepage typically has the most content, the largest images, and the most third-party scripts. It’s also the page Google evaluates most heavily.
What to do:
Reduce the number of sections on the homepage. Many stores have 15-20 sections below the fold. Question each one: does it contribute to conversion? If not, remove it.
Lazy-load entire sections — not just images. Collection carousels, Instagram feeds, and testimonial sliders below the fold can load on scroll.
Replace animated carousels with static hero images. Carousels load multiple images and JavaScript for functionality that most users never interact with. A single well-chosen hero image with a strong CTA outperforms a carousel in both speed and conversion.
10. Optimize Product Pages
Impact: Medium
Product pages are where conversions happen. Speed here directly impacts revenue.
What to do:
Limit product image variants loaded on initial page load. If a product has 8 images, load the first 3 immediately and lazy-load the rest.
Defer review widget loading. Reviews are important for conversion but not needed in the first 2 seconds. Load the review section after the primary product content.
Minimize variant-switching JavaScript. Complex variant selectors that reload page sections on every click add interaction delay. Ensure variant switching is handled client-side without server requests.
11. Use Shopify’s Native Features Over Apps
Impact: Medium
Shopify has built in many features that previously required apps: product reviews (via Shop channel), email marketing, discount codes, and basic analytics. Each native feature you use instead of a third-party app removes JavaScript overhead.
12. Compress and Optimize Video
Impact: Situational (High if video is present)
Product videos are increasingly important for conversion but devastating for speed if not optimized.
What to do:
Never auto-play videos on page load. Use click-to-play with a poster image (thumbnail).
Host videos on YouTube or Vimeo and embed them — don’t upload video files directly to Shopify. Embedded players use adaptive streaming that adjusts quality to the user’s connection.
Lazy-load video embeds. Don’t even load the YouTube iframe until the user scrolls to the video section.
13. Implement Resource Hints
Impact: Low-Medium
Resource hints (dns-prefetch, preconnect, prefetch) tell the browser about resources it will need soon.
Add dns-prefetch for all third-party domains referenced on your page. This resolves DNS lookups in advance, saving 50-100ms per domain.
14. Optimize Checkout Performance
Impact: Low (Shopify controls checkout)
Shopify controls the checkout experience, so direct optimization is limited. However: minimize the number of apps that inject scripts into checkout (review apps, upsell apps, tracking pixels). Each one adds load time to the highest-value page on your store.
15. Monitor Continuously
Impact: Ongoing
Speed is not a one-time fix. Every new app, theme update, or content change can regress performance.
Set up weekly PageSpeed Insights checks. Set up Google Search Console alerts for Core Web Vitals regressions. After any app installation, immediately retest speed. After any theme update, immediately retest speed.
Expected Results
| Starting LCP (Mobile) | After Optimization | Typical Improvement |
|---|---|---|
| 6+ seconds | 2.0 – 2.5 seconds | 55-65% faster |
| 4 – 6 seconds | 1.5 – 2.0 seconds | 50-60% faster |
| 3 – 4 seconds | 1.2 – 1.8 seconds | 40-55% faster |
| Under 3 seconds | Under 1.5 seconds | 25-40% faster |
The biggest gains come from image optimization and app removal — if you only do two things, do those. The remaining tactics layer additional improvement on top.
Frequently Asked Questions
Does Shopify speed affect Google rankings?
Yes. Core Web Vitals (LCP, INP, CLS) are confirmed Google ranking factors. A store with “Good” Core Web Vitals has a ranking advantage over one with “Poor” scores, all else being equal. The impact is not massive in isolation, but combined with the conversion rate benefit, speed optimization is one of the highest-ROI activities for any Shopify store.
Can I make my Shopify store as fast as a custom-built site?
Nearly. Shopify’s infrastructure is genuinely fast — the CDN, hosting, and checkout are world-class. The bottlenecks are almost always theme code, images, and apps — all of which are within your control. A well-optimized Shopify store on the Dawn theme can achieve sub-1.5-second LCP, which rivals most custom builds.
How many apps is too many?
There’s no hard rule, but we target 6-8 apps maximum. Each app above that threshold adds incremental weight. The real metric isn’t the count — it’s the total JavaScript payload. Some apps add 10KB (fine). Others add 500KB (problem). Use the Network tab in Chrome DevTools to see exactly what each app loads.
Will speed optimization break my theme?
Not if done carefully. Image optimization and app removal are zero-risk. CSS minification and script deferral require testing — always test on a preview theme before publishing to your live store. Our speed sprints include full QA testing across devices.
How much does professional speed optimization cost?
Our Shopify Speed Sprint is $1,500-$3,000 depending on the store’s complexity. It includes a full audit, implementation of all applicable optimizations from this guide, and before/after testing. Typical turnaround: 1-2 weeks. Learn more →
Next Steps
Test your store now: Run your URL through PageSpeed Insights and note your mobile LCP score.
Need help? Our Shopify Speed Sprint delivers a 40-60% speed improvement in 1-2 weeks. Get a free speed audit →
Keep reading:
- Shopify Store Setup Cost: Complete Breakdown for 2026 →
- Best Shopify Apps for Conversion Rate Optimization →
- Shopify Conversion Rate Optimization: The 2026 Playbook →
Last Updated: March 2026