Shopify Speed Optimization: Apps, Images and Theme Code

Your ads bring traffic, but visitors on a mid-range Android phone leave before the product page finishes loading. Shopify speed optimization is the work of finding what delays that page and removing it, one cause at a time, without breaking the store.

This guide is written for store owners and marketers who need to brief a developer or judge a quote. It covers how to read your real performance data, then the three areas that usually matter most: apps, images and theme code. For Liquid-level fixes, see our deeper guide to a slow Shopify theme fix.

What is Shopify speed optimization, and what should you measure?

Shopify speed optimization is the process of improving how quickly your storefront loads, responds and stays visually stable for real shoppers. The numbers that describe this are the Core Web Vitals, which Google defines at web.dev.

Google judges these at the 75th percentile of real visits, so one fast test on your office Wi-Fi proves little.

Where do you see your real Shopify speed data?

Open Analytics, then Reports, then Online Store Speed in your Shopify admin, or use the performance summary on the Themes page. Shopify's web performance reports show LCP, INP and CLS from real visitors and rate each as Good, Moderate or Poor.

Keep three details in mind:

• The data can be delayed by up to 36 hours and covers the last 90 days, so a fix will not show up the same afternoon.
• You need the Reports staff permission to view it.
• Rated metrics reflect the 75th percentile, so three in four visitors had a better experience than the figure shows.

Use Lighthouse and PageSpeed Insights to debug, not to grade yourself. Shopify's own testing guidance says lab scores can differ significantly from real-user data, and recommends running each URL three times and using the median.

Which pages should you fix first?

Fix collection and product pages before the home page. Shopify's testing for performance guidance weights its Lighthouse score at 17% for the home page, 40% for the product page and 43% for the collection page.

That matches how Indian D2C traffic behaves. Paid clicks from Meta and Google land mostly on collections and products, so a heavy collection grid costs more than a slow About page. Test your three highest-traffic URLs, one of each type, and keep a baseline before you change anything.

What usually makes a Shopify store slow?

Most slow stores suffer from a handful of recurring causes, and they differ in effort and payoff.

Rank your own store against this list using the data from your report. A store with a poor LCP needs image work first, and a store with a poor INP needs a script and app audit first.

How do you audit Shopify apps for speed?

Audit apps by asking what each one adds to the page and whether anyone uses it. Reviews widgets, chat bubbles, pop-ups, loyalty tools and currency converters are common sources of extra scripts.

Follow this checklist on a duplicate theme:

1. List every installed app and write down its owner and purpose.
2. Remove apps nobody checks. Old A/B test tools and abandoned pop-ups are frequent culprits.
3. Search the theme code for leftovers. Uninstalling an app does not always delete its snippets or script tags.
4. Defer what is not needed at first paint. Shopify's page on removing render-blocking apps explains how to load widgets later.
5. Replace simple apps with theme features. An announcement bar or a size-chart pop-up rarely needs a paid app.
6. Re-test the three baseline pages after each removal.

Shopify's performance guide also says to disable A/B test anti-flicker snippets when no test is running, because they delay rendering.

How should you handle images on Shopify?

Shopify's CDN already does the format work for you, so your job is dimensions and loading. According to Shopify's image upload guidance, it automatically picks the best format your customer's browser supports, including WebP and AVIF, and converts GIFs to animated WebP.

That leaves these decisions with you:

• Upload at the right size. For square product images, Shopify recommends 2048 x 2048 px. Uploading a 5000 px camera file for a small thumbnail wastes bandwidth.
• Keep a consistent aspect ratio across product images, so collection grids do not shift as they load.
• Load the main image eagerly. Never lazy-load the hero or first product image, and add fetchpriority="high" to it.
• Lazy-load everything below the first screen, such as lower product rows and footer banners.
• Replace autoplay video banners with a still image and a play button on mobile, if the video is your largest element.
• Avoid text baked into images. Banners with embedded offers cannot be translated or resized cleanly and often need larger files.

Image fixes are usually the quickest win for LCP, which is why we put them ahead of code changes.

What about fonts, tracking tags and third-party scripts?

Trim these next, because they often grow quietly during campaigns. Every pixel, tag manager container and heatmap tool adds work on the shopper's phone.

• Audit your tags. Remove pixels for platforms you no longer advertise on. If you rely on Meta, a clean server-side setup, as in our Meta Pixel and Conversions API guide, can reduce duplicate browser events.
• Limit font families and weights. Two weights of one family are usually enough. Fewer files mean fewer requests and less text shifting.
• Remove unused theme features. Sliders, mega-menus and animation libraries that your design no longer uses still ship code to every visitor.

Do not remove tracking that your ad accounts depend on without agreeing it with whoever runs your campaigns. Our Shopify SEO fixes guide covers the other checks to make before paid traffic arrives.

When does theme code need rewriting?

Rewrite theme code when apps and images are clean and the server response is still slow, or when the theme has been patched for years. Heavy Liquid loops, repeated lookups and dead sections slow every page request and cannot be fixed from the admin.

Signs that point to theme code:

• A high Time to First Byte in PageSpeed Insights, even on a plain page.
• A theme that is not an Online Store 2.0 theme, which makes sections harder to manage.
• Years of copied code snippets from different developers.

At that point, a developer should profile Liquid and rebuild the slow modules. Shopify's performance best practices rate each recommendation by metric and impact, which makes a good briefing document. If the interaction problem is on the browser side, our INP optimization guide explains the cause in more detail.

What is the right order to optimise a Shopify store?

Work in this order, because it puts the cheapest, highest-impact changes first.

1. Record a baseline. Save your real-user report and three PageSpeed Insights runs for the home, top collection and top product pages.
2. Duplicate the live theme. Do all work on the copy.
3. Remove unused apps and leftover code.
4. Fix the main images: correct size, eager load and fetchpriority on the LCP image, and lazy load the rest.
5. Trim tags, fonts and unused theme features.
6. Fix slow theme code if the server response is still high.
7. Test on a real phone, including cart, filters and the checkout entry.
8. Publish in a quiet period and keep the previous theme for rollback.

Avoid large changes in the weeks before Diwali or another sale. A fix that saves 200 milliseconds is not worth a broken cart.

How Arham Technology approaches Shopify speed optimization

Arham Technology treats speed as part of our Shopify development services, not as a separate cleanup at the end. Our service data lists an app stack audit as a standard deliverable, and the process below follows from it.

1. Baseline and audit. We read your real-user Core Web Vitals, list apps and scripts, and map the pages that bring paid and organic traffic.
2. Prioritised fix list. You get a ranked list of changes with effort and expected impact, so you can approve work in stages.
3. Theme and media work. We rework hero and product image loading, remove leftover app code and rebuild heavy sections as lean custom sections where needed.
4. Checkout and operations dry run. Test orders confirm that payments, shipping and tax settings still work after the changes.
5. Hand-over. We document what changed, how to add apps safely and which metrics to watch.

If you also need deeper template work, our Shopify Liquid development team handles code-level rebuilds. For budgeting a wider store project, see our Shopify store development cost guide for India.

What is the next step?

Open Online Store Speed in your Shopify admin today and note which of the three Core Web Vitals is rated Poor or Moderate. Then list your installed apps and mark any that nobody uses. Those two checks tell you whether to start with scripts or images.

If you would like a developer to review your store, contact Arham Technology with your store URL and your top three landing pages, or read about our Shopify development services.