How to make a Shopify store fast: themes, apps, images and Core Web Vitals

Google measures page experience with three Core Web Vitals. Shopify's help centre lists the targets as an LCP within 2.5 seconds, INP under 200 milliseconds and CLS under 0.1, and says the 75th percentile of page loads should meet them. That means three out of four visits need to be good, not the average.

For our own builds, the Custom package includes a speed budget of product pages under 2.5 seconds LCP on mobile. Pick a number like that for your own store before you start, so every decision about a new app or a bigger hero image has something to be tested against.

Use two kinds of data and know which is which. Field data comes from real visitors. Lab data comes from a test run in a controlled setup. Field data tells you whether you have a problem. Lab data helps you find the cause.

Shopify's web performance report

Shopify's Web Performance dashboard shows how your storefront scores on the three Core Web Vitals, using data from real users. You need the Reports staff permission to see it, and a summary also appears on the Themes page. The line chart shows how changes such as app installs and theme updates affected each metric, which makes it the best way to catch a regression.

• If your store is password protected, there is no real-user traffic, so there is no data. Remove the password page to collect it.
• Core Web Vitals are a Google measure and are collected from Chromium-based browsers only.
• The reports show the 75th percentile. If traffic is low, switch to a weekly or monthly view to smooth the swings.

PageSpeed Insights

Google's PageSpeed Insights tool at pagespeed.web.dev tests a single URL. Test the home page, a top collection and a top product, on the mobile tab, because most of your shoppers will be on phones. Read the real-user section first if it appears, then use the diagnostic list to see what is slowing the page. Re-run it a few times, because lab scores vary from run to run.

Shopify says your theme and the apps you install are the biggest factors in web performance. It recommends Online Store 2.0 themes built by Shopify as optimised for performance. Premium themes from the Theme Store can also be fast, but they often come with many features you will never turn on, and the code for those features can still load.

• Pick a theme for the layout you need, not the longest feature list.
• Turn off sections and features you do not use, and delete the ones you will never use.
• Ask your developer whether features load immediately or only when needed. Shopify suggests asking exactly this.
• Be careful with carousels, mega menus, social feeds and autoplay video on the home page. Shopify lists carousels and social media feeds among features that can affect Core Web Vitals.
• Test the theme demo on a phone with PageSpeed Insights before you buy.

A custom theme can be faster than a template because it contains only what your store uses. It costs more to build. See what a Shopify website costs in Australia for how the options compare. If a rebuild is on the table, our custom Shopify themes service covers what we build and how.

Shopify's advice is to install only apps that add clear value, and remove the ones you do not need, because each added feature can affect your Core Web Vitals. In our experience an uninstalled app can leave snippets behind in the theme, so check for scripts that still load.

1. Step 1

   List every installed app

   Write down what each one does, what it costs, and who owns it. If nobody can say why an app is there, it is a candidate for removal.

2. Step 2

   Measure before and after

   Note your Core Web Vitals from the web performance report, remove one app, and watch the line chart. This shows the real cost of each app.

3. Step 3

   Replace apps with native features

   Many jobs that needed an app a few years ago, such as discounts, bundles, B2B price lists and basic sorting, now exist in Shopify. Check before you install anything new.

4. Step 4

   Clean the theme code

   After uninstalling, ask your developer to remove leftover snippets and script tags from the theme. Uninstalling an app does not always remove its code.

5. Step 5

   Defer what is not urgent

   Shopify recommends loading what shoppers need first, such as branding, featured images and the cart, and deferring analytics and product reviews until visitors scroll down.

Third-party scripts count too. Shopify's guidance names analytics libraries and third-party services as factors. Every tracking pixel, chat widget and heat map has a cost. Keep the ones you use to make decisions, and remove the rest. Our apps and integrations service includes this kind of audit.

Images are usually the largest items on a page and the usual cause of a slow LCP. Shopify's guidance is to reduce the number of images and videos on key pages and to compress their file sizes. It also asks whether a heavy home page video is worth its cost.

• Upload images at the size you need, not the size your camera produced. Huge originals still have to be processed.
• Do not lazy-load the hero image or the first product image. They are the likely LCP element, so they need to load first. Lazy-load images further down the page.
• Give every image a width and height, or an aspect ratio, so the page does not jump when it loads. This is the most common CLS fix.
• Limit the number of products and images in collection grids. Use pagination or a load more button.
• Replace autoplay background video with a still image and a play button, unless the video is the point of the page.
• Write alt text as you go. It helps accessibility and search, and costs nothing in speed.

Custom fonts can delay text and make it jump when the real font replaces the fallback. Shopify's overview does not give font-specific rules, so treat this as practical advice we apply in our own builds rather than a Shopify requirement.

• Use one or two font families, and only the weights you use. Each weight is another file.
• Choose a fallback font close in size to your custom font, so the swap barely moves the layout.
• Preload the main heading font if your theme allows it.
• Reserve space for announcement bars, cookie banners and app widgets, so they do not push content down after the page loads.
• Check CLS on mobile, because that is where late-loading banners cause the worst jumps.

INP measures how long the page takes to respond when someone interacts. A slow INP is almost always too much JavaScript. Each app, tracking script and heavy theme feature adds code that competes with the shopper's taps. The fix is the same as for app bloat: load less, and load it later. Test the actions that matter, such as opening the menu, picking a variant, and adding to cart, on a mid-range Android phone, not just a new iPhone.

If speed is part of a larger conversion project, see our conversion rate optimisation service and our Shopify SEO checklist. Care plan clients get app and theme updates checked as part of the service, and the Growth plan adds a monthly improvement.