Shopify Speed Optimization Guide: 15 Fixes That Actually Move Core Web Vitals

Most slow Shopify stores aren't slow because of Shopify. The platform already handles hosting, the CDN, caching and file compression. What slows a store down is what gets added on top: a 3 MB hero image, twelve app scripts, a tag manager nobody has cleaned in two years, and a homepage with nineteen sections.

That's good news, because it means Shopify speed optimization is mostly about removing things, not buying things. It also pays. In a Google-commissioned study by Deloitte, a 0.1 second improvement in mobile speed lifted retail conversions by 8.4% and spend per order by 9.2%.

This guide shows you how to measure your store the way Google does, which numbers to aim for, and 15 fixes grouped by the Core Web Vital they improve, so you work on the metric that's actually failing.

Key takeaways

• Measure real-user Core Web Vitals in Shopify's web performance reports, not a single lab score.
• Aim for LCP under 2.5 seconds, INP under 200 ms and CLS under 0.1 on mobile.
• Shopify already runs a Cloudflare CDN, image CDN, caching and minification. Don't pay for them twice.
• Your theme, apps and third-party tags cause most slowdowns, so start there
• Never lazy-load the hero image; it's usually the element Google times for LCP. 

How fast should a Shopify store be?

A fast Shopify store passes all three Core Web Vitals for at least 75% of real visits: Largest Contentful Paint at 2.5 seconds or less, Interaction to Next Paint at 200 milliseconds or less, and Cumulative Layout Shift at 0.1 or less. Check mobile first, since that's where most shoppers are and where scores are worst.

Thresholds from Google's Web Vitals documentation, measured at the 75th percentile. INP replaced First Input Delay as a Core Web Vital in March 2024, so older guides that mention FID are out of date.

How to check your Shopify store speed

Start with Shopify's own web performance reports. Go to Online Store > Themes and open the performance summary, or go to Analytics > Reports and search for web performance. Shopify's web performance reports show your three Core Web Vitals from real visitors over the last 30 days, rated Good, Moderate or Poor, and you can break them down by page type and URL.

Then use these to dig deeper:

• PageSpeed Insights: the top section ("Discover what your real users are experiencing") is field data from Chrome users; the score below it is a lab test on a throttled phone. Fix what the field data says is failing.
• Google Search Console > Core Web Vitals: groups slow URLs by template, so you can see if it's every product page or just one collection.
• Chrome DevTools Performance panel: shows which element is your LCP and which script blocks interactions.

Two things confuse almost every merchant. First, the old 0-100 Shopify speed score has been replaced by these real-user reports, so stop chasing it. Second, a password-protected store has no real visitors, so the reports stay empty until you launch.

Pro tip: Write down your mobile LCP, INP and CLS before changing anything. Field data takes a few weeks to reflect a fix, and without a baseline you won't know which change worked.

Let’s work together to build your store

We are one of the world’s most trusted and experienced Shopify Plus Partners.

Get in touch

What Shopify already optimizes for you

Before you install a "speed booster", know what's already done. According to Shopify's performance documentation, every store gets:

• A global CDN run by Cloudflare, served over HTTP/2
• An image CDN that resizes, compresses and often serves WebP automatically
• Browser caching for one year on cacheable files
• Gzip compression and automatic minification of CSS and JavaScript

So when an outside tool tells you to "add a CDN" or "enable compression", ignore it. This built-in infrastructure is one of the reasons Shopify suits growing ecommerce brands in the first place. Shopify names the three things that really decide your speed: your theme, your apps, and any third-party code you've added, including tag managers. That's where the 15 fixes below focus.

Fixes for slow loading (LCP)

LCP(Largest Contentful Paint) is usually the hero banner on the homepage and the main product image on product pages. These six fixes get that element on screen faster.

1. Never lazy-load the hero image

Lazy loading delays images until they're near the viewport. That's perfect below the fold and a disaster for the hero, because the browser waits before fetching the very image Google is timing. In your theme, make sure the first image section uses loading="eager" and, ideally, fetchpriority="high", and keep loading="lazy" for everything further down. Many themes do this automatically for the first section only, so moving a slideshow below a text banner can quietly break it.

2. Size images for the slot, not the camera

Shopify's image CDN picks the format, but it can't guess how big your image needs to be unless the theme asks for the right widths. A 4,000-pixel photo shown in a 600-pixel product card wastes most of its bytes. Use the image_url and image_tag Liquid filters with a widths list so the browser gets a srcset and downloads only what the screen needs. For uploads, roughly twice the largest display width is plenty for sharp retina screens.

3. Replace autoplay GIFs and heavy hero videos

A 6-second GIF can outweigh the rest of the page. Convert it to a short MP4 or WebM, or replace it with a still image. For hero videos, show a lightweight poster image first and start the video after the page loads. If you embed YouTube or Vimeo, use a click-to-play preview (a "facade") rather than the full player iframe, which pulls in a lot of third-party script before anyone presses play.

4. Cut sections and sliders above the fold

Shopify's own guidance warns that a high number of sections on a template lowers performance, and that page transitions and animations can slow pages. Every section is more HTML, CSS and often JavaScript. A homepage with three focused sections above the fold almost always beats one with a carousel, a countdown, a marquee and an Instagram feed.

5. Paginate big collections

If a collection loads 200 products at once, every card brings an image, a price and often a review badge. Turn on pagination or load-more so the first page shows 24 to 48 products. Shopify's documentation recommends this for collections with large product counts.

6. Use fewer font files

Each custom font weight is a separate download. Stick to two families and the weights you actually use, prefer fonts from Shopify's font library (served from Shopify's CDN), and use font-display: swap so text shows immediately. If a font is purely decorative, a system font stack costs nothing to load.

Fixes for slow interactions (INP)

Poor INP (Interaction to Next Paint) means the store feels laggy: a tap on "Add to cart" or a size swatch takes a beat to respond. Shopify's documentation is direct about the cause: too much JavaScript from the theme, apps or third-party and tag manager code.

7. Audit apps by cost, not by count

Ten light apps can be faster than two heavy ones. Open DevTools, go to the Network tab, filter by JS, reload a product page and sort by size. Group the files by domain and you'll see which apps load the most code, and on which pages. Then ask the question Shopify suggests: does this app earn enough to justify its cost in speed? Reviews, upsells and chat widgets are the usual heavyweights. Our app stack audit walks through this decision app by app.

8. Remove leftover code from apps you've uninstalled

Shopify warns that uninstalling an app doesn't automatically remove its code from your theme. Older apps often pasted snippets into theme.liquid or product templates, and those keep loading after the app is gone. Search your theme code for the app's name or domain, check the app's removal instructions, and test on a duplicate theme before publishing. Newer apps that use app embeds and app blocks can be switched off in the theme editor instead, which is one reason to prefer them.

9. Clean up your tag manager

Google Tag Manager often becomes a junk drawer: pixels for campaigns that ended, three analytics tools doing the same job, heatmaps nobody opens. Shopify lists tag managers among the biggest performance factors. Export the container, list every tag with its owner and purpose, and remove anything that can't be justified. Where possible, move tracking to Shopify's customer events, which run sandboxed from your storefront code.

10. Defer scripts that aren't needed on first load

Chat widgets, review carousels, quizzes and pop-ups rarely need to load before the shopper sees the product. Load them with defer, after the first interaction, or only on the pages that use them. A chat bubble that appears two seconds later costs you nothing; one that blocks the Add to cart button costs you sales.

11. Simplify heavy Liquid

Slow Liquid shows up as a slow server response (high Time to First Byte), which delays everything else. Common culprits are nested loops over every product in a collection, mega menus that loop through hundreds of links, and filters run inside loops. The free Shopify Theme Inspector for Chrome profiles your Liquid render and shows which snippets take the longest. This is developer work; if you'd rather hand it over, our Shopify theme customization team does it regularly.

Let's Build Your Custom Shopify Store

We help you build a Shopify store that fits your brand perfectly.

Get in touch

Fixes for layout shift (CLS)

CLS is the page jumping while it loads: you go to tap a product and a banner pushes it down. It's usually the easiest metric to fix.

12. Give every image and embed a size

Set width and height (or a CSS aspect-ratio) on images, videos and iframes so the browser reserves the space before they load. Shopify's image_tag filter adds width and height automatically, so most CLS from images comes from custom sections or apps that inject raw <img> tags.

13. Reserve space for banners, badges and widgets

Announcement bars, cookie banners, review stars and "Buy now, pay later" messages often load late and push content down. Give their containers a fixed minimum height, or overlay them instead of inserting them above content. Show pop-ups as overlays, never as blocks that shove the page.

14. Stop fonts from jumping

When a custom font swaps in with different spacing, every line of text can shift. Choose a fallback font with similar proportions, or use size-adjust on the fallback, so the swap is barely visible. Fewer font files (fix 6) also means fewer swaps.

Fix 15: Choose a theme built for speed

If your theme is several years old, heavily modified, or built on jQuery-era code, the other fixes will only take you so far. Shopify says its Horizon family and Online Store 2.0 themes are optimized for web performance, and it publishes a theme performance data table comparing real-user results across themes. Check where your theme sits before you spend months patching it. Switching themes is a bigger project, but it's often cheaper than the third round of speed fixes.

What to fix first

Start with the fixes that are quick and hit the metric that's failing in your web performance report.

Shopify speed myths to ignore

Add an external CDN. Shopify already runs one through Cloudflare. A second layer adds cost and complexity, not speed.

Get your score to 100. The PageSpeed lab score is a simulation on a throttled phone. Passing Core Web Vitals for real visitors is what matters for shoppers and for Google.

Install a speed booster app. Some of these defer or lazy-load everything, including the hero and key scripts, which can hurt LCP or break features. Measure before and after, and remove it if field data doesn't improve.

Always host videos on YouTube. A full YouTube or Vimeo iframe loads a lot of third-party script. A poster image with Shopify-hosted video, or a click-to-load fcade, is usually lighter.

Compress images before uploading. Shopify's image CDN compresses and converts on the fly. Resizing oversized uploads still helps; running everything through a compressor first rarely does.

Speed problems during big sales are another source of panic. Shopify notes that third-party monitoring tools can report a store as slow during peak traffic because real shoppers are prioritised over bots. Check your own customer experience before you react, and run through our BFCM checklist well ahead of the season.

What we see in Crawlapps speed audits

Speed work rarely happens on its own. When we reworked Ikiru's Shopify store, the project combined a redesign, speed optimization and CRO, and the case study reports a 22% lift in conversion rate.

FAQs about Shopify speed optimization

Q: Why is my Shopify store so slow?

Usually because of what's been added on top of Shopify: oversized images, app scripts (including code left by uninstalled apps), tag manager bloat and an older or heavily customized theme. Shopify's hosting and CDN are rarely the problem.

Q: What is a good speed for a Shopify store?

Pass all three Core Web Vitals for at least 75% of real visits: LCP of 2.5 seconds or less, INP of 200 milliseconds or less and CLS of 0.1 or less. Check mobile first.

Q: Does site speed affect Shopify SEO?

Yes. Core Web Vitals are part of Google's page experience signals. They won't outrank better content on their own, but a slow store loses on close calls and loses shoppers who bounce.

Q: Do Shopify speed optimization apps work?

Some help with specific tasks such as image resizing. Apps that promise instant speed by deferring everything can hurt your hero image or break features. Judge any app by your real-user data before and after.

Q: Does Shopify Plus make a store faster?

Not by itself. Plus stores run on the same infrastructure. Speed depends on the theme, apps and scripts, which are the same levers on every plan.

Q: Should I host product videos on YouTube or Shopify?

For speed, a Shopify-hosted video with a poster image, or a click-to-load YouTube facade, is usually lighter than an always-loaded YouTube or Vimeo iframe.

Q: How long until my Core Web Vitals improve after a fix?

Shopify's reports and Google's field data look back about a month, so expect two to four weeks before a fix shows fully. Lab tests in PageSpeed Insights show the change immediately.

Your next step

Open your web performance report today and note which of the three metrics is failing on mobile. Then pick the two quickest fixes for that metric from the table above and measure again in a month. Most stores we audit have at least one easy win in images or leftover app code.

If you'd rather have experts find and fix it, get a free Shopify audit or see our Shopify SEO and speed optimization services. For the on-page side of rankings, our Shopify SEO checklist is the natural companion to this guide.