Shopify Store Speed Optimization: How to Improve Performance, SEO, and Conversions

Your Shopify store can have beautiful photography, strong products and a polished design, and still lose visitors before they see any of it.

It happens quietly. A shopper taps an ad on their phone, waits for the page, and waits a little longer. The banner jumps as it loads. The menu does not respond on the first tap. They go back to their search results and try the next store.

Slow Shopify stores rarely have one single problem. Performance is usually dragged down by a mix of:

• Large, uncompressed images
• Heavy themes with features you do not use
• Apps you installed and forgot about
• Too much JavaScript
• Third-party tracking scripts
• Autoplay videos and complex animations
• Poorly optimized custom code
• Long homepages packed with sections
• External integrations that load on every page

Shopify store speed matters because it shapes almost every part of the shopping journey. It affects how the store feels on a phone, how easily people browse from collection to product to cart, and how search engines assess the page experience. Faster pages do not guarantee sales, but slow pages create friction at exactly the moments you want shopping to feel easy.

Shopify speed optimization is the process of finding the bottlenecks that slow your store down and reducing them without breaking functionality or damaging your design. It is not about deleting everything that moves. It is about keeping what earns its place and removing what does not.

The ten steps below walk through where to look and what to do, in plain English.

1. Understand What Is Making Your Shopify Store Slow

Before changing anything, find out what is actually causing the slowdown. Guessing leads to deleted features that were never the problem.

The usual suspects are:

• Theme code: how your theme is built and how much it loads on every page
• Images: file size, dimensions and how many load at once
• Shopify apps: the scripts, styles and widgets each one adds
• JavaScript: the code behind menus, sliders, popups and tracking
• CSS: the styling rules, including rules for features you no longer use
• Fonts: how many custom fonts and weights the store loads
• Tracking scripts: analytics, ad pixels and heatmaps
• Embedded videos: especially ones that load before anyone presses play
• Third-party services: chat, reviews, personalization and recommendation tools
• Custom integrations: code added over the years to connect external systems

In most stores the answer is not one big problem. It is ten small ones that add up.

Tools that help you diagnose

• Google PageSpeed Insights tests a page and shows two kinds of data. Lab data is a single simulated test. Field data, when available, shows how real Chrome users actually experienced your page.
• Lighthouse runs the same kind of lab test from inside Chrome and lists specific issues, such as oversized images or unused code.
• Chrome DevTools lets a developer see every file a page loads, how large it is and how long it takes.
• Shopify's web performance report in the admin shows Core Web Vitals based on real visits to your store, which is often more useful than a one-off lab score.

Treat scores as diagnostic signals, not as the goal. A page scoring 60 can feel fast to real customers, and a page scoring 95 can still have a confusing layout. Use the tools to find specific problems, then judge fixes by how the store performs for real shoppers.

Always test the same key pages each time: the homepage, a busy collection page and your best-selling product page.

2. Optimize Oversized Images

Images are one of the most common reasons Shopify pages feel slow. They are often the largest files on the page, and many stores upload them straight from a camera or design tool.

A typical example: a homepage banner displays at about 1,500 pixels wide, but the merchant uploaded a 5,000-pixel image weighing several megabytes. Every visitor downloads far more image than the screen can show. On a phone, that can be the difference between an instant banner and a blank space.

Practical Shopify image optimization steps:

• Upload at sensible dimensions. Size images close to the largest size they will actually display, rather than at full camera resolution.
• Compress before uploading. Tools like Squoosh or TinyPNG can reduce file size significantly with little visible change.
• Let Shopify serve modern formats. Shopify's image CDN can deliver formats such as WebP to browsers that support them. Well-built themes take advantage of this automatically.
• Use responsive images. Good themes serve smaller versions to phones and larger ones to desktops, instead of one giant file for everyone.
• Lazy load below the fold. Images further down the page should load as the visitor scrolls, not all at once.
• Do not lazy load the main hero image. The first large image visitors see should load right away, or it will appear late.
• Limit gallery images above the fold. A product page does not need ten full-size images loading before the customer scrolls.

The goal is to remove unnecessary file weight while keeping images sharp. Product photos sell products, so check quality on a real phone after compressing.

3. Review Your Shopify Theme

Your theme is the foundation every page is built on, and themes vary a lot in how efficiently they are built. Two stores with similar products can perform very differently because of theme choices alone.

Common theme performance problems include:

• Excessive animations that run on scroll or on every hover
• Large JavaScript bundles that load every feature on every page, even pages that do not use them
• Too many homepage sections, each adding its own images, scripts and styles
• Unused theme features that are switched off in the editor but still load code
• Poorly implemented customizations added quickly and never cleaned up
• Legacy theme code from older Shopify versions or earlier redesigns
• Unused CSS and JavaScript left behind by old features and apps

The good news: switching themes is not always necessary. In many cases a developer can optimize the existing theme by removing dead code, loading scripts only where they are needed, and simplifying heavy sections. That keeps your design and avoids a full rebuild.

Shopify theme optimization usually starts with the homepage. Many homepages grow section by section until they hold a dozen carousels, banners and embedded feeds. Ask which sections customers actually engage with, and consider moving the rest to a dedicated page.

When Should You Consider Rebuilding or Replacing a Theme?

Sometimes optimizing the current theme costs more than starting fresh. Signs a rebuild or replacement may be worth considering:

• The theme is outdated and no longer supported or updated by its developer
• Years of modifications have accumulated, and nobody is sure what is safe to remove
• Multiple developers have added conflicting code with different approaches
• Performance stays poor after an app cleanup and image optimization
• The mobile experience is hard to improve without fighting the theme's structure
• Important features require extensive workarounds that the theme was never built for

A rebuild is a bigger project, so treat it as a business decision rather than a performance fix alone. Compare the cost against the ongoing cost of maintaining a fragile theme.

4. Remove or Replace Unnecessary Shopify Apps

Apps are one of the best things about Shopify. They are also one of the most common reasons stores slow down over time.

Many storefront apps add something to your pages, such as:

• Scripts that run in the visitor's browser
• Extra CSS styling
• Tracking code
• Widgets like review stars, badges or countdown timers
• Popups and banners
• Requests to the app's own servers

One app rarely makes a big difference. Fifteen apps, each loading a little code on every page, often do.

There is also a hidden problem. Uninstalling an app does not always remove every trace of it. Newer apps built on Shopify's theme app extensions are generally removed cleanly. Older integrations that edited theme files directly can leave snippets behind that keep loading after the app is gone.

A simple app audit

Review your apps at least a couple of times a year. For each installed app, ask:

1. 1Is the app still being used?
2. 2Does it provide measurable business value? Look at revenue, time saved or conversions it supports.
3. 3Could Shopify's native functionality replace it? Shopify has added many features over the years that once required apps.
4. 4Could one app replace several others? Overlapping apps for reviews, upsells or popups are common.
5. 5Could the functionality be built more efficiently with custom development? This matters most for features used on every page.

5. Reduce Excessive JavaScript

JavaScript is the code that makes a page interactive. On a Shopify store it powers things like:

• Navigation menus
• Image sliders
• Popups
• Product option selectors
• Analytics
• Chat widgets
• Review sections
• Tracking pixels
• Animations

The browser has to download, read and run this code. On a fast laptop that happens quickly. On an average smartphone it can take noticeably longer, and while the phone is busy running code, the page may not respond to taps.

That is why a store can look fully loaded but feel sluggish when someone opens the menu or picks a size.

Shopify JavaScript optimization usually involves:

• Removing unused JavaScript from old features and past apps
• Reviewing third-party scripts and keeping only the ones you need
• Loading scripts only where they are required. A size guide script belongs on product pages, not the blog.
• Deferring noncritical scripts. "Deferring" means telling the browser to load a script after the main content, so it does not hold up the page.
• Reducing duplicate libraries. Several apps sometimes load their own copy of the same code library.
• Cleaning up abandoned app code left in the theme

These changes are usually made by a Shopify developer, because removing the wrong script can break a feature. The payoff is a store that responds faster, especially on mobile.

6. Improve Shopify Core Web Vitals

Core Web Vitals are three measurements Google uses to describe how a page feels to real visitors: how fast it loads, how quickly it responds, and how stable it looks while loading. They are measured from real Chrome users, which makes them a useful reality check on Shopify store speed.

Google assesses these at the 75th percentile of visits, so most of your visitors need a good experience, not just the ones on fast devices.

Largest Contentful Paint (LCP)

LCP measures how long it takes for the biggest visible element, usually a hero image, banner or product photo, to appear. It is the moment the page looks loaded to a shopper.

Common causes of slow LCP:

• Oversized hero images
• Slow server responses, often from heavy theme logic or many app requests
• Render-blocking scripts: code the browser must finish before it can show the page
• Heavy custom fonts that delay text from appearing

Interaction to Next Paint (INP)

INP measures how responsive the page feels. When someone taps "Add to cart" or opens the menu, how long before something visibly happens? INP replaced an older metric, First Input Delay, in 2024.

Common causes of poor INP:

• Too much JavaScript running at once
• Complicated app widgets, such as bundles, personalization or reviews
• Heavy "event handlers," the code that runs every time a visitor clicks, scrolls or types

Cumulative Layout Shift (CLS)

CLS measures how much the page jumps around while loading. You have seen it when a button moves just as you go to tap it.

Common causes:

• Images without set dimensions, so the space they need is not reserved
• Late-loading announcement bars or banners that push content down
• Popups and injected app widgets
• Fonts that swap in and change the size of the text

Why Core Web Vitals matter

Core Web Vitals matter first for usability: they describe friction your customers actually feel. Google also uses page experience signals, including Core Web Vitals, in its ranking systems. Google has been clear, though, that relevant, helpful content matters more. Good scores will not rank a thin page, and a great page can rank with imperfect scores. Treat them as part of your Shopify SEO performance, not the whole of it.

7. Focus on Mobile Performance

For many Shopify stores, most visitors arrive on a phone. Yet stores are often designed, reviewed and approved on a large desktop monitor over office Wi-Fi.

A store can feel fast on a powerful computer and still feel slow on an average smartphone over a mobile connection. Phones have less processing power, so heavy JavaScript hurts more. Connections vary, so large images hurt more. And small screens make layout problems more obvious.

Shopify mobile speed depends on:

• Mobile navigation that opens instantly and is easy to use with a thumb
• Image size, with phones served appropriately smaller files
• Videos that do not autoplay large files on mobile data
• Sticky widgets like chat bubbles and "add to cart" bars that cover content
• Popups that appear before the visitor has seen anything
• JavaScript workload, which phones process more slowly
• Product page usability, including easy variant selection
• The path to checkout, which should feel smooth from cart onward
• Readable font sizes without zooming
• Tap targets, meaning buttons and links large enough and far enough apart to tap accurately

Mobile test checklist

Once a month, test your store on an actual mid-range phone, ideally on mobile data rather than Wi-Fi:

• Open the homepage from a Google search. Does the main content appear quickly?
• Open the menu. Does it respond immediately?
• Browse a collection and scroll. Is it smooth, or does it stutter?
• Open a product. Can you choose a size or color easily?
• Add to cart. Does the button respond on the first tap?
• Does any popup, banner or chat bubble block what you are trying to do?
• Does anything jump around while the page loads?
• Can you read the text without zooming?
• Go through to checkout. Does anything feel slow or confusing?

8. Optimize Fonts, Videos, and Visual Effects

Design choices affect speed. Every font, video and animation has a cost, and those costs add up quietly.

Common culprits:

• Multiple custom fonts. Each one is an extra download.
• Too many font weights. Light, regular, medium, semibold, bold and italic versions are each separate files.
• Autoplay video, which starts downloading before anyone chooses to watch
• Large background videos on the homepage, especially on mobile
• Sliders and carousels that load every slide up front
• Complex animations and scroll effects
• Parallax effects, where backgrounds move at a different speed while scrolling
• Extra visual libraries loaded to power a single effect

Optimization does not mean making the store boring. A strong brand experience matters. The goal is to keep the visual moments that matter and cut the ones that cost more than they add.

Practical changes that preserve the brand:

• Use one or two font families and only the weights you actually use.
• Replace an autoplay hero video with a strong image and a play button.
• Use a short, compressed video on desktop and a still image on mobile.
• Keep one or two meaningful animations instead of animating every section.
• Reconsider homepage sliders. Many visitors never see past the first slide.

If a redesign is on the table anyway, it is worth building speed in from the start. That is the approach behind our AI-ready web design work.

9. Clean Up Tracking and Third-Party Scripts

Most stores collect tracking scripts the way closets collect clothes. Each one was added for a good reason, and few are ever removed.

Common third-party scripts include:

• Analytics tools
• Advertising pixels for search and social platforms
• Heatmap and session recording tools
• Chat widgets
• Personalization tools
• Social media feeds and share buttons
• Affiliate and influencer tracking

Each external script usually means extra requests to another company's servers, plus more JavaScript for the visitor's device to run. You also do not control how fast those servers respond.

A practical review:

• List every tracking service loading on your store and who uses its data.
• Remove tools nobody has opened in months, such as a heatmap from last year's redesign.
• Remove duplicates, like the same analytics tag installed twice through different methods.
• Use Shopify's built-in customer events and pixel settings where your tools support them, rather than pasting code into the theme.
• Load chat widgets on demand where possible, so the full widget loads when someone opens it.

Be careful not to break what the business depends on. Analytics, ad attribution and consent requirements all matter. Removing a pixel can quietly damage ad performance reporting, and changing how scripts load can affect cookie consent. Check with whoever runs your marketing before removing anything, and confirm reporting still works afterward.

10. Optimize Shopify Product and Collection Pages

Product pages are where buying decisions happen, so they deserve the most attention. They are also where apps tend to pile up.

Things to review on product pages:

• Product images: properly sized, with the first image loading immediately
• Product videos: load when the customer chooses to watch, not before
• Review widgets: some load all reviews and photos up front
• Recommendation apps: "You may also like" sections that call external servers
• Variant selectors: complex swatch or option apps can slow interaction
• Subscription widgets: third-party subscription options on the page
• Personalization tools: engraving, custom text or configurators
• Related products and upsells: often handled by more than one app
• App blocks: each block can add its own scripts and styles

On collection pages, watch for:

• Too many products loading at once
• Heavy filtering apps
• Hover effects that load a second image for every product

The goal is not to strip out conversion features. Reviews build trust, and recommendations help customers find more. Instead, ask how each feature loads. Reviews can load as the customer scrolls toward them. Recommendations can appear below the main product details. One well-built upsell feature is better than three competing ones.

If your product page needs a smart shopping assistant, a lightweight AI chatbot that loads on demand can answer sizing and stock questions without a heavy widget on every visit.

Shopify Speed Optimization Checklist

Use this as a working list. You can handle the first several items yourself; the later ones usually need a developer.

• Compress large images and resize them close to their display size
• Audit Shopify apps with the five questions from step 4
• Remove unused app code left in the theme after uninstalling
• Review theme JavaScript for features you no longer use
• Reduce third-party scripts, keeping the ones your marketing depends on
• Optimize fonts by limiting families and weights
• Limit autoplay videos, especially on mobile
• Test Core Web Vitals in PageSpeed Insights and Shopify's performance report
• Test mobile performance on a real phone using the checklist in step 7
• Check product pages for stacked widgets and heavy media
• Review homepage sections and remove ones customers ignore
• Remove outdated integrations connected to tools you no longer use
• Test changes before deployment on a duplicate theme, never directly on the live one

Shopify Apps vs Custom Development

Merchants install apps because they are quick, affordable and require no code. That is often the right call. As a store grows, though, a long list of apps can create:

• Overlapping features doing the same job
• Rising monthly costs
• Performance overhead on every page
• Design inconsistencies between widgets
• Integrations that are hard to understand and maintain

Liquid is Shopify's template language: the code your theme uses to build pages. An API is a structured way for other software to read and update your store's data.

Custom development is not automatically better. The best choice depends on how complex the need is, your budget, how much performance matters for that feature, and who will maintain it. Many well-run stores combine all six.

When Custom Shopify Development Is Needed

Custom Shopify development may make sense when:

• Multiple apps are being used to accomplish one workflow, each adding its own code and cost
• The store requires unique product functionality, like complex configurators or bundles
• Theme performance suffers from years of modifications that cannot be cleaned up piece by piece
• Existing apps cannot support the required business process
• Shopify needs to connect with a CRM, ERP, database or external system
• You need a custom checkout-related workflow that Shopify supports through its checkout extensibility options, which are available based on your plan and Shopify's current rules
• Advanced automation is required, such as order routing or inventory syncing across systems. This is where AI automation and workflow tools come in, and our guide to Shopify automation covers ten tasks worth automating.
• You need better control over how and when scripts load

Custom development should solve a real business or performance problem. If an existing app does the job well without slowing the store, keep it. Adding custom code just to have custom code only creates more to maintain.

If you are weighing that kind of work, our guide to Shopify development pricing breaks down what drives the budget.

How Shopify Speed, SEO, and Conversions Are Connected

Speed does not directly create sales or rankings. What it does is remove friction, and friction affects both.

Faster, more stable pages can contribute to:

• A better overall user experience
• Easier browsing between collections and products
• Less frustration, especially on slow connections
• Better mobile usability
• Stronger engagement, as visitors view more pages when browsing feels easy
• Healthier technical SEO, including page experience signals

But performance is one factor among many. Other things matter just as much, or more:

• Content quality and how well pages answer what shoppers search for
• Search intent: whether the page matches what the searcher wanted
• Product-market fit and pricing
• Trust: reviews, policies and brand credibility
• Usability and clear navigation
• Shipping costs and delivery times
• Product descriptions and photography
• Checkout experience

A fast store with weak products, confusing pricing or poor content will still struggle. A great store held back by slow pages is leaving performance on the table. Shopify speed optimization helps the rest of your work pay off; it does not replace it.

What Should You Optimize First?

Start with changes that give the biggest improvement for the lowest risk. Save complex code work for later.

Priority 1: Extremely large images and videos

Often the fastest win. Resizing and compressing media rarely breaks anything.

Priority 2: Unused or unnecessary Shopify apps

Removing apps you do not use is low risk and can cut both scripts and monthly costs.

Priority 3: Heavy third-party scripts

Review tracking and widgets with your marketing team, then remove or delay what is not needed.

Priority 4: Theme and JavaScript issues

Cleaning up theme code and script loading usually needs a developer and careful testing.

Priority 5: Advanced custom-code optimization

Rebuilding sections, replacing apps with custom code, or rebuilding the theme. Highest effort, and only worth it once the easier steps are done.

Measure before and after every major change. Record your Core Web Vitals and test results for your key pages first. Then change one thing at a time and test again. Without a baseline, you cannot tell which fix worked, or whether a change made something worse.

Common Shopify Speed Optimization Mistakes

Frequently Asked Questions

Conclusion

Shopify speed optimization is not about reaching a perfect score. It is about building a store that:

• Loads efficiently
• Responds quickly when customers tap and scroll
• Works well on mobile
• Supports your SEO
• Keeps the features your business depends on
• Gives customers a smoother path from browsing to checkout

Most slow stores do not need a full redesign. They need a clear diagnosis and a sensible order of fixes.

The approach that works is simple: Measure → identify bottlenecks → prioritize → optimize → test again.

To see how Flasin handles theme, app and performance work, explore Shopify Development & Optimization.