Shopify Speed Optimization: 8 Ways to Speed Up Your Store

Quick Summary: Shopify Speed Optimization improves store loading, responsiveness, and visual stability by addressing Core Web Vitals, images, apps, third-party scripts, theme code, fonts, and Liquid. The most effective approach is to measure real-user performance first, identify the failing metric, fix its underlying cause, and verify the improvement with field data.

Shopify speed optimization is the process of cutting your store’s load time and improving its Core Web Vitals so pages load and respond without delay. Google’s “good” thresholds are LCP less than 2.5 seconds, INP less than 200 milliseconds, and CLS less than 0.1.

Most delays come from heavy apps, large images, bulky themes, and third-party scripts rather than Shopify’s hosting. When theme code is part of the problem, a Shopify development service can help identify and fix the underlying issue. This guide shows how to measure your store, address the biggest causes first, and keep performance from slipping. 

What Is a Good Shopify Page Speed?

A good Shopify page speed means passing all three Core Web Vitals for most of your visitors. Largest Contentful Paint (LCP) measures how fast the main content loads. Interaction to Next Paint (INP) measures how fast the page reacts to taps and clicks. Cumulative Layout Shift (CLS) measures how much the layout jumps while loading.

Core Web Vitals Thresholds for Shopify Stores

Start with these three Core Web Vitals. Shopify’s reports classify each metric as Good, Moderate, or Poor, while Google’s terminology for the middle range is “Needs Improvement.” 

Metric	Good	Moderate	Poor	Common Cause When it Fails
LCP	2.5 sec or less	2.5 to 4 sec	Over 4 sec	Oversized or late-loading hero or product image
INP	200 ms or less	200 to 500 ms	Over 500 ms	Too much JavaScript from the theme, apps and tag manager
CLS	0.1 or less	0.1 to 0.25	0.25 or more	Images without set dimensions, widgets that load late

Each metric is judged at the 75th percentile of real visits, so a store rates Good only when at least three in four visitors get a good result. Mobile and desktop are scored separately.

Also, INP replaced First Input Delay (FID) on March 12, 2024. Shopify points to too much JavaScript from theme, app and third-party code as the usual reason for poor INP.

How Page Speed Affects SEO and Conversions

Core Web Vitals are part of Google’s page experience signals, but good scores do not guarantee higher rankings. Relevant, useful content still matters more than any single performance metric. Shopify speed optimization should support SEO rather than be treated as a shortcut to page one.

The conversion case is also worth considering. A Google-commissioned study by Deloitte found that a 0.1-second improvement in mobile site speed was associated with an 8.4% increase in retail conversion and a 9.2% increase in average order value. The study is from 2020 and measured a specific set of speed improvements across the customer journey, so use these figures as directional evidence rather than a forecast. 

To improve Shopify site speed for either goal, first find out which of the three metrics your store fails.

How to Measure Your Shopify Store Speed

Use field data to identify real-world performance problems and affected page types. Use lab tests to reproduce the issue and investigate likely causes.

Start with the page types Shopify identifies as problematic, then test representative URLs from your home, product, collection, and cart templates. Check mobile first, record the starting LCP, INP, and CLS, and use those values as your baseline for later comparisons.

Shopify’s Web Performance Reports

Shopify’s Web Performance reports are the first place to check because they use real visitor data. Open the performance summary under Online Store > Themes to review LCP, INP, and CLS. For the full set of reports, go to Analytics > Reports and search for (:).

The Over Time reports mark events such as app installations and theme updates, helping you compare performance changes with changes made to the store. The Page Type and Page URL reports show which template or page is failing.

Four limits apply. You need the Reports staff permission. Password-protected stores have no real-user data. Data can lag by up to 36 hours. Shopify keeps only the last 90 days. This report replaced the old Shopify speed score, which averaged Lighthouse lab results rather than real visits.

PageSpeed Insights and Google Search Console

PageSpeed Insights reports LCP, INP and CLS from real Chrome users over the previous 28 days. That field data sits at the top of the report. Below it is a Lighthouse lab test, and the overall score at the top comes from lab data. Read the field block first. When a page lacks enough traffic, PageSpeed Insights cannot assess it, so fall back to origin-level data.

Lab and field results often differ because they represent different testing conditions. Field data reflects real devices, networks, and interactions, while a lab test uses a controlled environment. Lighthouse does not report field INP; it uses Total Blocking Time (TBT) as a lab measure of responsiveness.

For site-wide status, use Google Search Console. Its Core Web Vitals report groups URLs by status (Poor, Need improvement, Good), metric and URL group, and shows “No data available” when real-user samples are too few. Field data is aggregated over 28 days, so fixes show up slowly.

GTmetrix and Other Shopify Analyzer Tools

There is no official Shopify analyzer. Shopify’s own testing guidance points to its Web Performance reports and PageSpeed Insights. Third-party scanners often suggest changes Shopify already applies or that don’t fit Shopify stores.

Don’t spend time on server, CDN, or compression changes that Shopify already handles at the platform level. Focus your optimization work on images, apps, scripts, theme code, and storefront content.

• GTmetrix: Its waterfall chart shows every request in load order, which helps you spot a slow app script or heavy image. Check current plan limits for test locations.
• WebPageTest: It runs tests from a chosen location, so use it to check how your store loads for shoppers far from you or on slow connections.
• Shopify Theme Inspector for Chrome: This is a developer tool. It shows a flame graph of Liquid render time and cannot profile development stores.
• Chrome DevTools Performance panel: Shopify’s performance team suggests it for confirming the root cause after the dashboards flag a problem.

Example: If Shopify’s reports show that product pages have poor LCP on mobile, start with a representative product URL. Use PageSpeed Insights to identify the LCP element, then use DevTools to check when that resource is requested and what delays it. If the hero image is discovered late, fix its markup or loading priority before changing unrelated parts of the page. 

Once you know which metric fails and on which template, check what Shopify already handles for you before you change anything.

What Shopify Already Optimizes for You

Shopify speed optimization starts with knowing what is already done. Shopify hosts the servers and the database, so server tuning and database cleanup advice written for WordPress or Magento does not apply. You don’t need to optimize Shopify’s infrastructure. These are built in:

Built in	What you usually don’t need to optimize manually
A global CDN backed by Cloudflare	CDN apps. Shopify also advises against placing a reverse proxy in front of your storefront, because proxies add latency and distort metrics
Brotli and gzip compression, HTTP/3 and TLS 1.3	Compression plugins and protocol settings
Early Hints and streamed HTML responses	Server timing tweaks
Browser caching of static assets	Cache-header fixes. Caching warnings on third-party files can’t be changed by you
Minified CSS and JavaScript in theme assets	Minification apps
Image resizing and modern formats such as WebP through the image CDN	Format conversion tools

Your speed work sits in four places: your theme, your apps and scripts, your images and layout, and any custom Liquid code. Everything left sits in your theme, apps, scripts and media, and that is where the fixes start.

How to Speed Up a Shopify Website: 8 Fixes in Order of Impact

Shopify calls auditing and removing third-party scripts the highest-impact optimization, so that comes first.

1. Remove Unused Shopify Apps and Leftover Code

Apps are the most common reason a store slows down over time. A merchant installs an app, stops needing the feature, and the code keeps running.

• List every installed app and note what it does and who uses it.
• Measure each script. Lighthouse Treemap shows all JavaScript grouped by origin with file sizes, and the DevTools Coverage tab shows unused code. Run Coverage on the home, collection and product pages, because a script unused on one template may be needed on another.
• Cut duplicates and heavy offenders. A/B testing tools, chat widgets, review apps and email popups often load on every page.
• Check for leftover code. Uninstalling an app doesn’t always remove its code from your theme. Search layout/theme.liquid and the snippets folder for the app’s name or script domain, and delete any {% render %} tags that point to removed snippets. Do this on a duplicate theme first.

2. Control Third-Party Scripts and Tag Manager

Some scripts have to stay. Limit where and when they run. Shopify says to check with marketing before removing a script, so agree on what each tag is for first.

• Audit the tag manager. Tag managers that inject extra resources create dependency chains that delay rendering. Remove dead pixels and tags that duplicate Shopify’s built-in analytics.
• Load by template. A review widget only needs to load on product pages:

liquid
{% if template.name == 'product' %}
  <script src="https://reviews.example.com/widget.js" defer></script>
{% endif %}

• Defer the rest. Use defer on non-critical scripts, and async only for independent third-party scripts where execution order doesn’t matter.
• Delay what visitors don’t need yet. A chat widget can wait until the first scroll. Never delay scripts the page needs to work. Deferring a theme’s own variant selector until interaction may improve a lab metric while making the page less usable.
• Remove A/B test snippets when no test is running.
• Protect useful functionality. Don’t remove analytics, reviews, personalization, chat, or other scripts solely to improve a score. First confirm what the script does, who depends on it, and whether its business value justifies its performance cost.

3. Choose a Speed-Optimized Shopify Theme

Shopify’s Horizon and other modern Online Store themes are designed with web performance in mind, but the theme alone does not determine the final result. Your sections, apps, scripts, images, and customizations still affect performance. Before you switch, check three things.

• Animations. If your theme offers page transitions or other animations, compare performance before and after turning them on.
• Section count. High numbers of sections on a page can lower performance.
• Review CSS: Remove unused styles and avoid loading large stylesheets for sections that are not used on the page. Keep styles needed for above-the-fold content available early so rendering does not wait on unnecessary CSS.
• Keep the DOM lean: Avoid duplicate desktop and mobile navigation structures, oversized mega menus, and unnecessary hidden elements. A large DOM increases the amount of work the browser must do, especially on mobile.
• Your own catalog. Shopify requires Theme Store submissions to maintain an average Lighthouse performance score of at least 60 across home, product, and collection pages. Treat that as a minimum requirement, not a guarantee that the theme will be fast with your catalog, apps, and customizations. A theme that is fast with 10 products can be slow with 100, so test it with your real products.

A new theme will not remove the apps and scripts you carry over, so finish fixes 1 and 2 first.

4. Optimize Images and the LCP Element

This fix targets LCP. The LCP element is usually a hero or product image. Find it in the PageSpeed Insights diagnostics, then apply these settings.

The problem is not always image size. If the browser discovers the LCP resource late, improving its format or compression alone may not solve the delay. 

• Use image_url and image_tag. They generate srcset, add width and height, and serve images from the CDN. Don’t build CDN URLs by hand.
• Set sizes explicitly on images in the first viewport, so the browser doesn’t wait for JavaScript to pick a source.
• If the LCP image is discovered late or receives low priority, consider fetchpriority=”high” to encourage earlier fetching. Use it only for genuinely critical resources rather than adding it broadly.
• Use an <img> tag, not a CSS background. The browser’s preload scanner can’t find background images early.
• Don’t hide it behind a fade-in. Reveal animations delay the LCP event even after the image downloads.
• Use preload only for resources that are critical and discovered too late. Too many preload hints can compete with the browser’s normal prioritization and slow other important resources.
• Render essential content in Liquid and HTML, not JavaScript.

5. Lazy Load Below-the-Fold Images and Video

Use native loading=”lazy” for images outside the first screen.

• Check your theme’s default first. image_tag can automatically choose eager or lazy loading based on the image’s section position. Check the theme’s generated markup before overriding the loading behavior manually.
• Never lazy load the LCP image. It delays the download until after the browser processes a hidden IntersectionObserver event.
• Remove JavaScript lazy loaders. Libraries like lazysizes replace src with data-src, which hides the image URL from the preload scanner. To migrate, swap data-src back to src, add loading=”lazy” to below-the-fold images, and remove the library script.
• Product grids: load the first few cards eagerly, such as the first four, and lazy load the rest.
• Video: replace animated GIFs with short MP4 or WebM files. For videos below the fold, add a poster image and preload=”none”.

6. Fix Layout Shifts

CLS fixes are mostly about reserving space.

• Images: always include width and height, or use image_tag, which adds them automatically.
• App widgets: star ratings, trust badge rows, and shipping estimate widgets are the usual causes. Reserve their space with a min-height on the app block:

css
.product__info-container .shopify-app-block {
  min-height: 28px;
}

• Pick the height from the real widget. Inspect the rendered widget in DevTools, use its height, and check mobile, because heights differ.
• Cookie banners and chat bubbles: they shift layout only when they render in normal flow, so use position: fixed.
• Verify with Layout Shift Regions in the DevTools Rendering tab.

7. Simplify Fonts

Web fonts can delay text rendering or cause layout shift when the fallback and web font have different metrics. Reduce their cost in this order.

• Use system fonts. They need no download before text can render.
• Host web fonts on Shopify’s CDN instead of Google Fonts. This removes the extra DNS and connection step.
• Limit families and weights to the ones you use.
• Match the fallback font. Use size-adjust and override descriptors on the fallback so the swap causes less shift.

8. Reduce Liquid Rendering Time

This fix needs a developer. Shopify renders Liquid on the server for every request, and slow Liquid raises Time to First Byte. Client-side tweaks don’t shorten that wait.

• Nested loops can become expensive as catalog size grows because their work can multiply across iterations.
• Other causes: metafield access inside loops, iterating through more variants than necessary, nested render calls, and large pagination ranges. Shopify limits Liquid pagination to 25,000 objects.
• Diagnose with Shopify Theme Inspector for Chrome. Shopify can stream HTML, so a TTFB measurement may reflect when the initial response begins rather than when all Liquid-rendered content is available.

How to Verify Shopify Speed Improvements

Don’t judge a speed fix by one PageSpeed score. Run the same lab test before and after the change, compare several runs, and use the median result. After deployment, monitor Shopify’s field data until enough real visits show whether the improvement holds for shoppers.

How to Keep Your Shopify Store Fast Over Time

Treat performance as an ongoing process. New apps, scripts, content, and theme changes can introduce regressions, so someone should own performance monitoring and review changes before they go live.

What Usually Causes the Slide

• New apps add third-party JavaScript that competes for the main thread.
• Tracking pixels pile up. In Shopify’s example, a store reached 15 third-party scripts within six months and LCP got 2 seconds slower.
• Campaign scripts stay live. A countdown timer, pop-up and chat widget added for a sale keep loading on every page after it ends.
• Redesigns add heavy images, such as a 3 MB hero image replacing a 200 KB one that looks identical.

How to Stay Ahead of it

• Review field data on a schedule. Shopify suggests weekly or biweekly reviews against your baseline. Watch for slow upward trends, sudden jumps after a change, and drops in one segment, such as mobile product pages.
• Test every change before it goes live. Run lab tests, compare the median of several runs, and after launch wait days to weeks for enough field data to confirm real visitors see the gain. Do the lab test on a duplicate theme.
• Name one owner. Shopify says someone needs the time and authority to track metrics and raise regressions, and on small teams that can be a senior developer. Marketing, design and development all add weight, so new scripts should need that person’s approval.
• Count the cost of each new app. Shopify’s App Store performance requirements limit the Lighthouse impact of an app, but an individual app can still add JavaScript, network requests, or rendering work to your storefront. Several small costs can accumulate, so evaluate the actual impact of each app on your templates.

If no one on your team can own this, that is the point to bring in outside help.

When to Use Shopify Speed Optimization Services

Professional Shopify speed optimization becomes useful when the remaining issues require theme or Liquid changes, custom script work, or technical diagnosis that your team cannot handle internally. Shopify’s own guidance for a third-party theme is to contact the theme developer, hire a Shopify web performance expert, or hire a Shopify Partner.

What Shopify Speed Optimization Services Include

A solid Shopify speed optimization service covers four things:

• Baseline audit: Real-user data from Web Performance reports, split by template and device.
• App and script cleanup: Unused apps and leftover code removed, and the remaining scripts controlled.
• Theme code fixes: LCP, layout shift and Liquid rendering work on a duplicate theme.
• Verification: Before-and-after field data once enough visitor data has built up.

DIY or Developer: How to Decide

Use a simple rule: if the fix changes a theme setting, app configuration, or media asset, you can usually test it yourself. If it changes Liquid, JavaScript, CSS, resource loading, or checkout extensions, involve a developer.

Merchants can usually handle app removal, disabling unnecessary animations, reducing sections, replacing oversized media, and reviewing Web Performance reports. Hand off changes involving Liquid loops, LCP markup, script loading, CSS, fonts, or checkout extensions.

If a metric still fails after app and media cleanup, investigate theme code and other storefront customizations before making further changes.

What to Ask Before You Hire

A higher Lighthouse score does not necessarily mean visitors experience a faster store. Before hiring a speed optimization provider, check how they measure real-user performance, what code they change, how they test the work, and whether they work on a duplicate theme first.

• Ask for real-user before and after data from Shopify Web Performance reports or CrUX, not only PageSpeed screenshots. Compare field results with lab results because a large gap can reveal issues that a controlled test does not reproduce.
• Run PageSpeed Insights and Lighthouse in Chrome DevTools using consistent testing conditions. Repeat the tests several times and compare the median results rather than judging the store from a single score.
• Ask what code they add to theme files. Code that checks for tools like Lighthouse or GTmetrix, or injects a transparent full-screen element, is a red flag.
• Ask for all work on a duplicate theme so you can roll back if something breaks.

Whoever you choose, judge the work by real-user data, not by a score screenshot.

Conclusion

Shopify speed optimization works best when it starts with real data. Find the Core Web Vitals metric your store fails, fix the cause behind it, and confirm the change in your field data before you move on. Speed slips back as apps, scripts and campaigns pile up, so a faster store comes from steady habits, not a single audit.

If the remaining issues require theme-level changes, Liquid work, custom scripts, or deeper performance fixes, hire Shopify developers to identify the root cause, implement the changes, and validate the results with real-user data. 

FAQs on Shopify Speed Optimization