Shopify speed optimization: what speeds up a store and what cannot be changed

Shopify speed optimization comes down to four things you control: the apps that add scripts to every page, the size and loading of your images, the theme and its Liquid code, and fonts. Shopify handles hosting, the CDN, the HTTP protocol, compression and the checkout for every store, so there is no server to tune. In practice, removing unused apps and fixing the hero and product images brings back most of the speed a store has lost.

This guide is for store owners and the developers or agencies who work on their themes. It gives the steps in the order that pays off, how to measure before and after, and what not to waste time on. For a finding-by-finding sort of a full report into "yours", "Shopify's" and "ignore", read Shopify: what you can fix and what you cannot; for page speed on any platform, see the page speed guide.

Quick answer

1. Measure a product page and a collection page, logged out, with Shopify's Web performance report and a speed test.
2. Audit apps and app embeds: turn off embeds you do not use, uninstall dead apps and remove the code they left in the theme.
3. Fix the hero image: export at 2,000–2,500 px, never lazy-load it, give it fetchpriority="high".
4. Check product and collection images: served through image_url with srcset, lazy-loaded below the fold.
5. Move tracking pixels to Customer events instead of theme.liquid.
6. Trim fonts to two families, or use the system fonts in the theme's typography settings.
7. Profile slow Liquid (mega menus, loops over products) if the first byte is slow on one template.
8. Be wary of "speed booster" apps: each one is another script.

What Shopify already does, and what it leaves to you

Every Shopify store runs on the same infrastructure, and that infrastructure is fast: pages are served through Shopify's CDN over HTTP/2 or newer, text is compressed, theme assets get long cache lifetimes, and the CDN resizes images and serves modern formats such as WebP to browsers that accept them. None of that is configurable, and none of it needs to be.

What makes one Shopify store slow and another fast is what sits on top:

So Shopify speed optimization is not about servers or caching plugins. It is about sending less to the browser.

Step 1: measure the right pages

Test the pages that carry traffic and weight, not only the home page: one product page and one collection page at least.

Shopify's own Web performance report sits on the Online Store → Themes page and shows your store's LCP, INP and CLS from real shoppers' visits at the 75th percentile, rated good, moderate or poor, with charts over time. It replaced the old single "speed score" in 2024. Use it to see whether the store passes and whether a change moved the numbers.

It does not tell you why. For that, run a lab test on individual pages:

The speed test runs Lighthouse through Google's PageSpeed Insights on mobile and desktop and shows real-visitor Core Web Vitals from the Chrome UX Report where the store has enough traffic. On a Shopify store, read three findings first: the LCP element (usually a hero or product image), third-party weight (where apps show up by domain) and render-blocking resources.

Test in a private window. When you are logged in to the admin, Shopify adds a preview bar and admin scripts that shoppers never load. For many product or collection URLs at once, the bulk tool tests up to 50 pages and puts the results in one table:

Step 2: audit apps and app embeds

Apps are the biggest lever on most stores. Each app that touches the storefront typically adds at least one script, often a stylesheet and requests to its own servers, on every page, whether or not that page uses the feature.

1. App embeds. Online Store → Themes → Customize → App embeds. Each toggle injects code into every page. Turn off the ones whose feature you do not use on the storefront; some apps work fully from the admin.
2. Unused apps. Settings → Apps and sales channels. Uninstall apps nobody has used in months: a reviews app with no reviews, an upsell app with no offers, a pop-up nobody sees.
3. Leftover code. Older apps pasted snippets into theme.liquid or sections, and uninstalling does not remove them. After each uninstall, view the source of a product page, search for the app's name or domain, and delete the snippet in Edit code (keep a copy of the theme first).
4. Overlapping apps. Two review widgets, two currency converters, three pixels for the same ad network. Keep one.

Re-test after each batch of changes. The third-party finding should list fewer domains and less main-thread blocking time. If one app remains heavy and is essential, ask its developer whether it can load on the pages that need it only, or after the page is interactive. The general method for any script that survives is in third-party scripts: tag managers, chat and ads.

Step 3: the hero image and the LCP

On home and landing pages the LCP element is usually the first banner or slideshow image; on product pages, the first product image.

• Upload at a sensible size. The CDN resizes, but a 5,000 px, 8 MB original still produces heavy large variants. Export heroes at 2,000–2,500 px wide.
• Do not lazy-load the first image. Many slideshow sections lazy-load every slide, including the first, which delays LCP. In the section's Liquid, render the first image with loading: 'eager' and fetchpriority: 'high' through the image_tag filter, and keep lazy loading for the rest. Shopify: what you can fix has an example for a Dawn-based image banner.
• Prefer one static hero over a slideshow. Carousels load several large images and scripts for a banner most visitors see one slide of.
• Video heroes need a poster. An autoplaying background video is heavy; a poster image shown first keeps LCP fast. See video on landing pages without killing LCP.

Step 4: product and collection images

Collection pages load a grid of product images, and product pages a gallery. Current themes handle this well when their image code is intact:

• Images are output with the image_url filter and image_tag, which asks Shopify's CDN for sized copies and writes srcset, sizes, width and height, so phones download small files and the layout does not jump.
• Images below the first screen are lazy-loaded; the first row of a collection and the first gallery image are not.

Customised or older themes sometimes print the full-size image URL in a plain <img> tag, which sends a 2,000 px file to every phone. The image sizing finding lists images much larger than they are shown. Ask your developer to switch them to image_url with widths. Core Web Vitals for e-commerce product and category pages covers the gallery, variant pickers and filters in detail.

Step 5: move tracking pixels out of the theme

Pixels for ad networks and analytics pasted into theme.liquid load early, compete with your own content and ignore the customer's consent choice. Shopify's Customer events (Settings → Customer events) runs custom pixels in a sandbox, respects the privacy settings under Settings → Customer privacy, and keeps them off the critical path. Many ad networks also have an official app that uses the same mechanism. Once a pixel runs there, delete the old snippet from the theme.

Step 6: fonts

Theme settings → Typography. Each font family and weight is a separate download before text in that font can appear. Two families in two weights is a reasonable limit. The system fonts offered in the font picker download nothing at all. Current Shopify themes load fonts with font-display: swap, so text appears in a fallback first; older or custom themes may need that added. Web fonts without layout shift explains how to stop the swap from moving the text.

Step 7: theme code and Liquid

Shopify renders Liquid on its servers, and heavy Liquid shows up as a slow first byte on specific templates, which no app or image fix can help. Signs: TTFB is fine on the home page and much slower on collection pages, or slow on every page that has the mega menu.

Common causes are loops over large collections (for example building a mega menu or filters by iterating over every product), nested loops, and sections that render many products the visitor never sees. Shopify's Theme Inspector for Chrome extension profiles Liquid rendering on a page and shows which files and tags take the time. Paginate large collections, limit the number of products a section renders, and move rarely used content behind a click.

On the browser side, a theme's own JavaScript can be heavy too, especially themes with many features switched on. The render-blocking and unused JavaScript findings list the theme files; disabling features you do not use in the theme settings often removes their scripts.

Step 8: choose a fast theme, if you are choosing

Themes in the Shopify Theme Store must meet Shopify's performance requirements, including a minimum average Lighthouse performance score of 60 across the home, product and collection pages on desktop and mobile. That is a floor, not a guarantee: the same theme with twelve apps and a heavy slideshow is slow.

Switching themes to fix speed rarely works on its own, because apps and images come along. Fix steps 2 to 6 first; if the theme itself is still the heaviest thing on the page, compare candidate themes' demo stores with the speed test before you switch.

What not to do

• Install a "speed booster" app first. Apps that promise to speed up a store add their own scripts. Some defer or lazy-load everything, including the hero image, which can make LCP worse, and some break other apps. Remove before you add.
• Chase the Lighthouse score. Google ranks with real-visitor Core Web Vitals, which Shopify's report and the field row of the speed test show. How important page speed is for SEO explains why the lab score is not the target.
• Try to fix what Shopify controls. Server location, the CDN, the checkout and Shopify's own scripts are the same for every store. Why is my website slow? helps you tell whether the cause is on your side.

How to verify

• The third-party finding lists only the apps you decided to keep, with less blocking time than before.
• The LCP element on the product and home page is an image without loading="lazy", and lab LCP on mobile is under 2.5 s.
• Collection pages show no oversized images in the image findings.
• After about four weeks, Shopify's Web performance report and the field data in the speed test show LCP, INP and CLS in the good range.

The comparison tool puts your store next to up to four competitors on the same device, which is a useful check on whether the store is now in line with its market.

Common mistakes

• Testing while logged in to the admin, which adds the preview bar and admin scripts.
• Uninstalling an app but leaving its snippet in theme.liquid.
• Testing only the home page. Collection and product pages carry most of the weight.
• Uploading camera-size images because "the CDN resizes".
• Lazy-loading the first slide of a slideshow.
• Adding pixels to the theme instead of Customer events.

Questions people ask

How do I speed up my Shopify website?

Start with apps: turn off unused app embeds in the theme editor, uninstall apps you no longer use and remove the snippets they left in the theme. Then fix the hero image (export at about 2,000 px and do not lazy-load it), make sure product images use responsive sizes, move tracking pixels to Customer events and limit fonts. Test a product and a collection page before and after each step.

Why is my Shopify store slow when Shopify hosts it?

Because Shopify's hosting only covers delivering files quickly; what the page asks the browser to download and run is up to the store. Most slow stores carry many app scripts, large or lazy-loaded hero images, tracking pixels in the theme and several web fonts. The third-party finding in a speed test lists app scripts by domain, which usually shows where the time goes.

Do Shopify speed optimization apps actually work?

Some help a little, and many add their own scripts and risks. Apps that defer or lazy-load everything can delay the hero image and make Largest Contentful Paint worse, and some interfere with other apps. The reliable gains come from removing what is not needed: unused apps, leftover snippets, oversized images and extra fonts. Try those first, measure, and only then consider an app, testing before and after.

Can I improve TTFB on Shopify?

Only indirectly. Hosting, the CDN and caching are Shopify's and cannot be changed. What you control is the Liquid your theme runs: loops over large collections, heavy mega menus and sections that render many products make the server take longer on those templates. Shopify's Theme Inspector for Chrome shows which Liquid is slow. Redirects in front of a page are also yours to remove.

Does switching to a new Shopify theme make the store faster?

Not by itself. Apps, app embeds, images and fonts come with you to the new theme, and they are usually the heaviest part of the page. A lean, current theme does start faster than an old or heavily customised one, so it can help once those are cleaned up. Compare the candidate theme's demo store with a speed test before switching.