To speed up your Shopify store, measure the pages customers actually use, identify the slowest resources, and fix the main bottleneck first. Common priorities include oversized images, unnecessary app scripts, delayed hero images, and heavy theme features. Test each change before publishing.
You don’t need to apply every recommendation in a speed report. You need to understand what is slowing your storefront down and whether a proposed fix improves the shopping experience.
1. Run a Shopify store speed test before changing anything
Start with your homepage, a popular collection, and a product page that receives meaningful traffic. Include an important advertising landing page if it uses a different layout.
Use PageSpeed Insights for mobile and desktop tests. Its Lighthouse results help diagnose problems in a controlled test. Its field data, when available, reflects real visitors over a rolling 28-day period. A low-traffic page may not have enough field data for its own assessment.
Check Shopify’s web performance reports through the performance summary on the Themes page or the Reports list in your admin. These reports help compare loading, interactivity, and layout stability across pages and devices.
Record the URL, device, date, theme version, and main findings. Run several comparable lab tests and use the median result rather than choosing your best score.
2. Find the metric behind the problem
Shopify page speed involves more than how quickly the first screen appears. A page can load quickly and still respond poorly when someone selects a variant.
| Metric | What it measures | Good threshold | First area to investigate |
|---|---|---|---|
| Largest Contentful Paint (LCP) | When the largest visible content appears | 2.5 seconds or less | Hero or product image discovery and loading |
| Interaction to Next Paint (INP) | Responsiveness to user interactions | 200 milliseconds or less | JavaScript work during interactions |
| Cumulative Layout Shift (CLS) | Unexpected movement of visible content | 0.1 or less | Unreserved space for images, widgets, and fonts |
These thresholds apply at the 75th percentile of real visits, considered separately for mobile and desktop. A Lighthouse performance score is a diagnostic summary, not proof that every customer has a good experience.
3. Create a safe testing environment
Duplicate your theme before editing code. Keep a change log and confirm how to restore the previous version.
A duplicate theme does not isolate every setting. Uninstalling an app or changing its account-level configuration can affect the live store. Use a development store or coordinate a controlled test when necessary.
Test the mobile menu, search, product variants, add-to-cart button, cart drawer, discounts, and checkout handoff after relevant changes. Also check analytics and consent behavior.
4. Remove unnecessary storefront app resources
Review what each app adds to the storefront. An admin-only tool and a widget that loads on every page have different performance costs. App count alone is a poor measure of impact.
List each app’s purpose, visible placement, loaded scripts, and business value. Look for duplicate popups, review widgets, tracking integrations, or features already handled by the theme.
Disable an unnecessary app embed in your test theme where possible, then compare requests and interaction behavior. Ask the app developer whether its resources can load only where needed.
Uninstalling an app may leave older snippets or script references behind. Follow the developer’s removal instructions instead of deleting unfamiliar code. Preserve required Shopify code and active integrations.
5. Serve images at the size the layout needs
Shopify can optimize image delivery, but your theme still needs to request sensible image dimensions. Sending a desktop-sized asset to a small mobile card wastes bandwidth.
Check the actual downloaded image dimensions in the browser’s Network panel. Compare them with the rendered size, allowing for high-density screens.
Use responsive image markup with appropriate srcset and sizes values. Shopify’s image_url and image_tag Liquid filters support this workflow. Keep image width and height attributes so the browser can reserve space.
Avoid repeatedly compressing photos until product details become unclear. Compare the transferred file size and visual quality before accepting a change.
6. Load the main image early and secondary images later
Find the actual LCP element in a performance trace. It may be a hero banner, product image, or large text block.
If it is an image, make sure the browser can discover it in the initial HTML. Do not lazy-load the LCP image. Consider fetchpriority=”high” for the confirmed critical image, rather than assigning high priority to every image.
Use lazy loading for images outside the initial viewport. Check mobile layouts separately because the visible area changes with screen size.
For galleries and sliders, investigate whether hidden slides are downloading immediately. Simplifying the first screen may remove more work than compressing every slide.
7. Reduce JavaScript that blocks useful interactions
When buttons feel delayed, inspect JavaScript execution in Chrome DevTools. Rank expensive scripts by execution time as well as download size. A small script can still perform costly work.
Load page-specific features only on relevant templates. For suitable noncritical scripts, defer allows HTML parsing to continue during download and preserves execution order among deferred classic scripts.
Use async only when a script is independent and order does not matter. Adding either attribute blindly can break dependencies.
Keep essential product information in Liquid-rendered HTML instead of making shoppers wait for client-side JavaScript to build the page.
8. Simplify fonts, video, and optional theme features
Review extra font families and weights, autoplay media, animated sections, quick-view drawers, and repeated homepage blocks. Keep features that help customers choose and buy.
A useful first test is removing one optional feature from the duplicate theme and measuring the difference. This reveals its actual cost in your setup.
Prefer a video preview that loads the player after a click when immediate playback is unnecessary. Use fewer font files and test a system-font alternative if it fits the brand.
Changing themes is a larger decision. Compare an updated theme using similar content and features before assuming a rebuild is necessary.
9. Retest the customer journey and document the result
Repeat the same URLs and test conditions after each meaningful change. Check whether the targeted metric improved and whether anything else became worse.
Keep a simple record:
| Page | Change | Before | After | Functional checks |
|---|---|---|---|---|
| Product URL | Describe the tested change | Record measured result | Record measured result | Variants, cart, tracking |
Lab results can show changes immediately. Real-user reports need new visits and reporting time. Shopify notes that its performance reporting can be delayed by up to 36 hours.
Prioritize high-traffic pages with poor experiences, then repeat the process across other templates. Avoid comparing unrelated devices or different traffic periods as if they were a controlled experiment.
Common mistakes to avoid
- Chasing a perfect score while breaking product functionality.
- Installing another optimization app before identifying the bottleneck.
- Lazy-loading the main product image or hero banner.
- Delaying essential tracking or consent behavior without checking the consequences.
- Changing several unrelated features at once and losing track of what helped.
Frequently asked questions
How to improve Shopify store speed without coding?
Start with measurement, remove unnecessary visible features, review app embeds, simplify media, and upload appropriately sized images. Code changes are only needed when the theme or an integration requires them.
How to increase Shopify website speed on mobile?
Test mobile pages separately. Investigate oversized image requests, the main visible image, and scripts competing for processing time. Confirm the menu, filters, variants, and cart work well on a real phone.
Does Shopify gzip compression need manual setup?
Shopify already handles compression and other infrastructure optimizations, including its CDN and browser caching for cacheable resources. Merchants generally should not try to apply generic server configuration advice to a hosted Shopify storefront.
Will better Shopify site speed guarantee more sales?
No. Performance can remove friction, but sales also depend on demand, pricing, product information, trust, and traffic quality. Measure business outcomes separately from technical improvements.
Start with the bottleneck that affects customers
Measure first, fix one meaningful problem, and test the shopping journey again. Repeat that process instead of applying every speed tip to every page.
Need help finding what is slowing your store down? Contact Inamullah Zahoor to discuss a Shopify performance audit and the development work your store needs.
