Shopify speed optimization means improving the parts of your store that Shopify doesn’t manage for you: the theme, the apps, images, fonts, third-party scripts and your Liquid code. Hosting, the CDN, compression and caching are already handled by the platform, so a lot of generic “speed tips” simply don’t apply. Start with real-user data from Shopify’s web performance dashboard, find which Core Web Vital fails, then fix the cause behind that metric.
That order matters more than any single trick in Shopify speed optimization. I’ve watched store owners spend a weekend compressing images when the real problem was a chat widget blocking every tap on mobile, and the images were never the issue in the first place.
This guide stays on the Shopify layer. The metric mechanics already have their own homes on this site, so I link to them instead of repeating them: how to improve INP, how to fix CLS and what a failed Core Web Vitals assessment means.
What Can You Control on Shopify, and What Can’t You?
Shopify’s web performance guide lists what the platform already does: a Cloudflare CDN, HTTP/2, long browser caching, gzip compression, minified CSS and JavaScript, and images served as WebP where the browser supports it. You can’t change any of that. Good news, honestly, because it’s the layer where I find most WordPress speed problems.
| Shopify handles it | You control it |
|---|---|
| Servers, hosting and bandwidth | Which theme you run and how many sections each template has |
| Global CDN (Cloudflare) | Which apps you install and what they inject |
| HTTP/2, compression, minification | Leftover code from apps you uninstalled |
| Browser caching | Image sizes, which images lazy-load, the LCP image |
| WebP delivery through the image CDN | Fonts and how they load |
| Tracking pixels, tag managers, chat and review widgets | |
| Liquid code in custom sections and snippets |
The same guide has a section on third-party recommendations that don’t apply. When a scanner tells you to “add a CDN” or “enable compression,” Shopify says those are already in place. I tell clients to skip those lines of a report entirely and look at what’s left, which is almost always apps, theme weight and images.
Where Do You Read Your Store’s Real Speed?
Two sources. Use both, in this order.
Shopify’s web performance dashboard. The dashboard help page says a summary sits on the Online Store page of your admin, with LCP, INP and CLS at the 75th percentile, and the full reports live in Analytics > Reports (type a colon in the report search to list all of them). The data comes from real visitors, covers only the last 90 days and can lag by up to 36 hours. Shopify labels its middle band “Moderate” where Google says “needs improvement,” but the thresholds match: LCP 2,500 ms, INP 200 ms and CLS 0.1 for “good.”
My favourite part is the event annotations. The over-time reports mark app installs, theme updates and new code on the chart, so when INP jumps the week you installed an upsell app, you can see it without guessing. Two conditions: the store must be out of private mode, and new or low-traffic stores may show no data or noisy swings.
PageSpeed Insights. Google’s PageSpeed Insights documentation says its field data comes from the Chrome User Experience Report (CrUX) over the previous 28 days, reported at the 75th percentile, while the lab section is a single Lighthouse run. The field part is what Google’s Core Web Vitals assessment uses. The lab score is a diagnostic, and my post on page speed vs Core Web Vitals explains why a low score with passing field data is not an emergency.
The Main Path: Find the Failing Metric, Then the Cause
Once you know which metric fails and on which page type, the fix narrows fast. Shopify’s reports split data by device, page URL and page type, so look at product pages on mobile first. In my experience, that’s where most Shopify stores struggle.
If LCP fails, the usual suspects are the hero or main product image, a slideshow at the top of the home page, or render-blocking scripts from apps. Go to Branch 2 below.
If INP fails, it’s almost always JavaScript: apps, tracking scripts and chat widgets competing for the main thread when someone taps a variant or the add-to-cart button. Go to Branch 1, then the phase-by-phase diagnosis in my INP guide.
If CLS fails, look at things that appear after load: review stars, announcement bars, currency switchers, cookie banners and web fonts swapping in. My CLS guide covers reserving space for them.
If everything passes, stop optimizing for speed and put the hours into content and collections. Chasing a 100 lab score on a store with green field data is the most common wasted speed budget I see.
Branch 1: App Bloat and Leftover Code
Apps are the biggest variable on most Shopify stores. Not the theme. Shopify’s own guide says to check whether each app’s value offsets the performance cost, and to audit your tag manager for unused or low-value tags.
When I need to know what an app really costs, I duplicate the live theme, open the copy in preview and switch off one app embed at a time in the theme editor’s App embeds panel, then run the same product URL through PageSpeed Insights. It’s a lab test, so I only trust big, repeatable differences, but it tells you which app to question first.
Then the part most people miss. Shopify’s performance guide says it plainly: “Uninstalling an app doesn’t automatically remove its code from your theme.” Apps built on theme app extensions add blocks and embeds you can switch off in the editor, while older apps often pasted snippets straight into theme.liquid or product templates. After an uninstall, I search the theme code for the app’s name and for script URLs pointing at its domain, and I remove what’s left on a duplicate theme first.
If an app is essential but heavy, ask the developer whether it can load only on the templates that need it. A size chart doesn’t need to load on the blog. Neither does a wishlist.
If two apps do overlapping jobs, like two review widgets or two popup tools, keep one. I’ve never seen a store where the second one earned its scripts.
Branch 2: Images and the LCP Image
Shopify’s image_tag Liquid filter does a lot of the image work for you. According to its developer documentation, it adds width and height attributes from the image’s dimensions, builds a srcset with sensible default widths, and sets loading="lazy" automatically for images further down the page unless you use its preload option. Themes can override that logic with section.index.
That automatic lazy loading is good for the rest of the page. It’s a problem if it lands on your LCP image. Google’s web.dev team, in a study by Felix Arntz and Rick Viscomi, found that pages using lazy loading had a median 75th percentile LCP of 3,546 ms against 2,922 ms for pages without it, based on HTTP Archive and CrUX data. That’s a correlation, not proof for your store, but their lab tests pointed the same way, and their advice is simple: don’t lazy-load images above the fold.
If your hero or main product image is lazy-loaded, make it eager. Shopify’s theme performance best practices also say to mark the LCP image with fetchpriority="high" and to remove fade-in animations on it, since the animation delays LCP even after the file has downloaded.
If your images are huge uploads, Shopify will still resize and convert them, but a theme that requests the largest width for a small slot wastes bytes. Check the sizes attribute your theme uses on product grids.
If the home page opens with a five-slide slideshow, the first slide is your LCP element and the other four are dead weight on mobile. One strong image usually beats a carousel. I say that as a preference, not a rule, but I rarely see a slideshow that pays for itself.
Is Your Theme the Problem?
Sometimes, yes. Shopify’s help center recommends an up-to-date, optimized theme and names its free Horizon family and Online Store 2.0 themes as optimized options. It also warns against themes with heavy animations and templates stuffed with sections.
For context, Shopify’s developer docs say a theme needs a minimum average Lighthouse performance score of 60 across the home, product and collection pages to be accepted into the Theme Store. That’s a lab floor for a demo store with no apps. Your real store, with twelve apps and forty sections, will score differently.
If your theme is several years old and heavily customized, updating is often cheaper than patching. If it’s current but slow, the cause is usually what’s been added to it, so go back to Branch 1 before blaming the theme.
Fonts and Third-Party Scripts
Fonts cost more than people expect. Every weight is a file. Shopify’s theme best practices suggest system fonts to avoid a download entirely, or fonts hosted on Shopify’s CDN with fallback metrics adjusted so the swap doesn’t shift the layout. I’d keep it to one family in two weights unless the brand genuinely depends on more.
Third-party scripts are the long tail: analytics, ad pixels, heatmaps, chat, affiliate trackers. Each one felt small when it was added. My rule is that every script needs an owner who can say what decision it informs; if nobody can, it goes. Scripts you keep should load with defer or async, which Shopify’s best practices also recommend for anything not needed to render the page.
Liquid Performance Basics
Liquid runs on Shopify’s servers before the page is sent. Nobody sees it. Everyone waits for it, though, so slow Liquid shows up as a slow Time to First Byte. Shopify’s theme docs warn that nested loops can grow quadratically with catalog size, and suggest pulling metafield lookups out of loops and flattening nested render calls.
In practice, the slow Liquid I find sits in custom sections: a “related products” block looping through every product in a collection, or a mega menu looping through collections inside collections. Shopify’s free Theme Inspector for Chrome shows Liquid render time as a flame graph, which is the quickest way to see which snippet is the problem. This is developer work, and I’d never edit a live theme’s Liquid without a duplicate to test on.
Edge Cases That Change the Plan
- No data in the dashboard or CrUX: low-traffic stores may not have enough visits. Use PageSpeed Insights lab data on key templates as a guide, and recheck once traffic grows.
- Headless storefronts: on Hydrogen or a custom front end, theme advice doesn’t apply and performance is your developers’ build.
- Markets subfolders: check a translated URL too. Currency and language apps can add scripts that only run for international visitors.
- Sale periods: a sudden change during a campaign is often a new popup or countdown app. Check the annotations before touching the theme.
Shopify Speed Optimization Decision Matrix
| If the failing metric is | And the likely cause is | Then |
|---|---|---|
| LCP on product pages | Main image lazy-loaded or faded in | Load it eagerly, add fetchpriority="high", drop the fade |
| LCP on the home page | Slideshow or oversized hero | One hero image, correct sizes |
| INP on mobile | Apps and tracking scripts | Test app embeds on a duplicate theme, remove or defer |
| INP after an uninstall | Leftover app snippets | Search theme code, remove on a duplicate first |
| CLS | Late widgets or font swap | Reserve space, adjust fallback font metrics |
| Slow TTFB | Heavy custom Liquid | Profile with Theme Inspector, fix loops |
| Nothing fails in field data | Low lab score only | Stop, work on content instead |
When Should You Bring In a Developer?
Removing apps and fixing image settings is owner work. Editing Liquid, rewriting how a theme loads scripts or rebuilding a template is not, and a mistake on the product template can break add-to-cart, which costs far more than a slow page.
If the store needs a cleaner theme rather than more patches, that’s the work behind our Shopify store design service. If speed is one symptom of wider crawl and indexing issues, our technical SEO service covers it, and the rest of the setup lives in my Shopify SEO checklist. Not sure which metric is failing yet? Start with the free SEO audit.
Frequently Asked Questions
Where Is the Web Performance Dashboard in Shopify?
A summary of LCP, INP and CLS sits on the Online Store page of your Shopify admin. The full reports are in Analytics > Reports; search with a colon to list every web performance report. Data covers the last 90 days, may lag up to 36 hours and needs the store out of private mode.
Does Uninstalling a Shopify App Remove Its Code?
Not always. Shopify’s own performance guide says uninstalling an app doesn’t automatically remove its code from your theme. Check the App embeds panel in the theme editor, search the theme files for the app’s name, and remove leftovers on a duplicate theme before publishing.
Should I Lazy Load All Images on Shopify?
No. Lazy-load images below the fold, but load the main above-the-fold image eagerly. Shopify’s image_tag filter lazy-loads images further down the page by default, so check that your hero or main product image isn’t caught by it.
Do I Need a Speed Optimization App for Shopify?
Usually not. Shopify already handles the CDN, compression, caching and WebP delivery, which many speed apps advertise. Most gains come from removing scripts, not adding another app that loads its own.
Last updated: September 2026 by Mizanur Rahman
