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

> Shopify speed optimization is mostly apps, images, the theme and its Liquid: Shopify runs the hosting, CDN and checkout for you. The steps in order, how to measure, and what to leave alone.

Updated 2026-09-26 · Other platforms · HTML version: https://getreport.app/guides/shopify-speed-optimization

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](https://getreport.app/guides/shopify-what-you-can-and-cannot-fix); for page speed on any platform, see the [page speed guide](https://getreport.app/guides/page-speed).

## 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:

| Area | Who controls it | Typical effect |
| --- | --- | --- |
| Hosting, CDN, TLS, HTTP protocol, compression | Shopify | Already good; not a lever |
| Checkout | Shopify | Separate from your theme; not part of storefront tests |
| Apps and app embeds | You | The largest source of extra JavaScript on most stores |
| Images: upload size, hero loading, galleries | You and the theme | The usual LCP element |
| Theme code and Liquid | You or your developer | Server time on heavy templates, render-blocking files |
| Fonts | You, in theme settings | Extra downloads, text appearing late |

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:

> **Free tool:** [Free website speed test and page speed check](https://getreport.app/tools/speed-test): Free website speed test for any page: Lighthouse lab results and real-user Core Web Vitals on mobile and desktop, with a fix for each slow part. No sign-up.

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.

> **Check: Third-party code weight.** Tags, widgets and embeds from other companies run on your visitors' phones at your page's expense. Over 250 KB or 250 ms of blocking is a sign they dominate the load.
>
> 1. List what each third party gives you; remove the ones nobody looks at.
> 2. Load the rest after interaction or with a facade (a static thumbnail for YouTube, a click-to-load chat button).
> 3. Move tags into a tag manager that fires them late, not in <head>.

> **Check: Largest Contentful Paint.** LCP is when the biggest thing on screen — usually the hero image or headline — finishes loading. Visitors judge "is this site slow?" on it, and Google uses it for ranking.
>
> 1. Find the LCP element (named in your report) and make it lighter, earlier or both — a compressed WebP/AVIF, sized to the screen, without lazy loading.
> 2. Preload it with <link rel="preload" as="image"> or add fetchpriority="high" on the <img>.
> 3. Cut what comes before it — render-blocking CSS/JS and slow server responses push LCP back.

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:

> **Free tool:** [Bulk PageSpeed Insights: test 50 URLs at once](https://getreport.app/tools/bulk-pagespeed): Free bulk PageSpeed Insights: run Google's Lighthouse test on up to 50 URLs at once, with Core Web Vitals, LCP, TBT and CLS in a sortable table and CSV.

## 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](https://getreport.app/guides/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](https://getreport.app/guides/shopify-what-you-can-and-cannot-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](https://getreport.app/guides/video-on-landing-pages-without-killing-lcp).

> **Check: Offscreen images are lazy-loaded.** Images far below the fold compete for bandwidth with the ones visitors see first. Lazy loading defers them until they scroll into view.
>
> 1. Add loading="lazy" to images below the fold — but never to the hero/LCP image.
> 2. WordPress adds it by default since 5.5; check your theme or slider has not removed it.

## 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](https://getreport.app/guides/core-web-vitals-for-e-commerce-product-and-category-pages) covers the gallery, variant pickers and filters in detail.

> **Check: Images are sized for how they are displayed.** Sending a 2000 px photo to a 400 px slot wastes most of the bytes. Responsive images let the browser pick the right size for each screen.
>
> 1. Add srcset and sizes to <img> so phones get small versions; most CMSs generate the sizes for you.
> 2. Resize the originals to the largest size you actually display.

## 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](https://getreport.app/guides/web-fonts-without-layout-shift) explains how to stop the swap from moving the text.

> **Check: Web fonts show text while loading.** Without font-display, browsers show blank text for up to 3 s while a web font downloads. Visitors stare at empty headings.
>
> 1. Add font-display swap (or optional) to every @font-face rule.
> 2. For Google Fonts, append &display=swap to the stylesheet URL; self-hosted fonts get it in the @font-face block.
> 3. Preload the one or two fonts used above the fold.

## 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.

> **Check: No render-blocking resources delay the first paint.** Stylesheets and scripts in <head> stop the browser from drawing anything until they have downloaded. Each one adds a round trip before the visitor sees the page.
>
> 1. Add defer or async to scripts that are not needed before the first paint, or move them to the end of <body>.
> 2. Inline the CSS needed for the first screen and load the rest asynchronously (WordPress: "Optimize CSS delivery" in WP Rocket / LiteSpeed Cache).
> 3. Remove unused plugin CSS/JS from pages that do not need it.

> **Check: Little unused JavaScript is downloaded.** JavaScript is the most expensive thing a page loads — it must be downloaded, parsed and run. Code that never executes still costs all of that on a phone.
>
> 1. Delay third-party scripts until interaction (WP Rocket "Delay JavaScript", Shopify: audit installed apps).
> 2. Code-split large bundles so each page loads only its own code.
> 3. Remove plugins, apps and tags you no longer use.

## 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](https://getreport.app/guides/page-speed-and-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?](https://getreport.app/guides/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.

> **Free tool:** [Website speed test comparison: up to 5 sites](https://getreport.app/tools/compare-speed): Free website speed test comparison: put your site next to up to four competitors on PageSpeed score, real-user Core Web Vitals, page weight and requests.

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.