Slow Shopify stores tend to be slow for the same few reasons. Shopify hosts the store and serves theme assets from its own CDN. In the stores we review, the extra weight usually comes from code added on top of the theme over the years.
This guide covers how to measure speed properly, the causes we see most, and the order we fix them in.
Start with the right numbers
Google measures page experience with three Core Web Vitals. Each one has a good threshold. A page passes when it meets all three at the 75th percentile of real visits, measured separately for mobile and desktop.
- Largest Contentful Paint (LCP) measures loading. Good is 2.5 seconds or less.
- Interaction to Next Paint (INP) measures how fast the page responds to taps and clicks. Good is 200 milliseconds or less.
- Cumulative Layout Shift (CLS) measures how much content jumps around. Good is 0.1 or less.
Focus on field data from real visitors. A lab test runs once, on one simulated device and one connection. It helps you find causes. Field data tells you what customers actually get.
How to check your store
- Shopify's web performance reports. In the admin, go to Analytics, then Reports, and search for the web performance reports. They show LCP, INP and CLS from real visits, with breakdowns by page type, page URL and device. Data can lag by up to 36 hours, and the reports keep the last 90 days.
- The same charts mark events such as app installs, theme updates and new code. When a line jumps, you can see what changed that day.
- PageSpeed Insights at pagespeed.web.dev. The top section shows field data from the Chrome User Experience Report (CrUX). The lab test sits below it. Read the field section first.
- CrUX and the Core Web Vitals report in Google Search Console. CrUX only includes pages and sites with enough traffic, and Google does not publish the exact threshold. Smaller stores may see no field data here, so rely on Shopify's reports.
The usual causes
- Leftover app code. Shopify's own speed guide says uninstalling an app does not automatically remove its code from your theme. Old snippets keep loading scripts and styles for apps you removed months ago. Apps built with theme app extensions avoid most of this, because nobody has to edit theme code to add them.
- Too many apps and scripts. Every app that adds JavaScript to the storefront adds work for the browser. Shopify notes that a poor INP most likely means too much JavaScript, from the theme, apps or tag manager.
- Large images. Product photos uploaded at full camera size and shown in a small card waste bandwidth. Shopify advises resizing images to match their display size. Using image_tag with srcset and sizes lets each device download a file that fits.
- Render-blocking theme code. Synchronous scripts in the head hold back the first paint. Shopify's theme guidance is to use defer on non-critical scripts and async only for independent third-party scripts. Heavy sections, carousels and page transitions add more work.
- Third-party tags. Chat widgets, review widgets, heatmaps and ad tags often load from other domains. Each new domain needs its own connection. Tag managers make tags easy to add and easy to forget.
What to fix first
Start with the metric that fails, on mobile, on your busiest page types. Then work down this list.
- Remove what you do not use. List every installed app and ask whether each one still earns its place. Then search the theme for code from apps you already removed. Our app, Store Health, scans for this leftover app code.
- Fix the LCP image. On many home, collection and product pages the LCP element is a large image near the top. Do not lazy-load it. Give it fetchpriority high, and lazy-load images further down the page.
- Defer scripts. Add defer to scripts the first view does not need. Load chat and review widgets after the page renders where the vendor supports it.
- Clean the tag manager. Remove tags for tools you stopped using, and tags that duplicate events an app already sends.
- Reserve space. Set width and height on images, videos and embeds so content does not shift as they load. This prevents many layout shifts.
- Review the theme. An older theme with years of edits can cost more to patch than to replace. Shopify recommends an up-to-date theme and warns against too many sections on one template.
Make one change at a time. After each change, watch Shopify's reports for a few days. The event markers on the chart show when the change went live, so you can see whether it helped.
If you want a second pair of eyes, we can help. We offer a free store review that looks at speed and leftover code, or a free call to go through your reports together.
Sources
- Web Vitals (web.dev)
- Optimize Largest Contentful Paint (web.dev)
- Web performance reports (Shopify Help Center)
- Improving your online store performance (Shopify Help Center)
- Theme performance best practices (Shopify developer docs)
- Theme app extensions (Shopify developer docs)
- CrUX methodology (Chrome for Developers)
- PageSpeed Insights