Shopify Speed Optimisation: What Actually Makes Your Store Faster?

How do you measure Shopify store speed?

Run representative URLs through Google PageSpeed Insights and distinguish its real-user data from its Lighthouse laboratory test. Field data describes observed visitor experiences over a reporting window. A lab test exercises a page in controlled conditions and helps diagnose individual issues.

A small or new store may not have enough field data for a particular URL. PageSpeed may show origin-level data instead, or no field assessment. Read the label before assuming the figures describe that exact product page. Google explains the distinction in its PageSpeed Insights documentation.

Google assesses these targets at the 75th percentile, considering mobile and desktop separately. The thresholds and metric definitions above are documented in Google’s Core Web Vitals guidance. They are diagnostic targets, not promises of a particular commercial result.

Translate the metrics into storefront behaviour

LCP often points you towards a hero or product image that is discovered late or takes too long to render. INP can reveal that a variant selector waits behind a long JavaScript task. CLS captures a page jumping when a banner or review widget appears without reserved space. Follow the evidence rather than treating all three as an image-compression problem.

1. Optimise images without sacrificing quality

Serve images through Shopify’s image CDN and use the theme’s image_url and image_tag filters with appropriate responsive sizing. A small product card should not need the same image dimensions as a full-width desktop banner. Check the generated srcset and sizes against the actual layout, not just the file uploaded to the admin.

Shopify’s delivery pipeline can serve modern formats supported by the browser. Correct dimensions and compression still matter, especially for detailed product photography. Inspect the downloaded resource and its displayed size before deciding that a file format alone will solve the delay.

• Provide intrinsic dimensions or a stable aspect ratio so space is reserved before the image arrives.
• Lazy-load images below the initial viewport where appropriate.
• Load the critical visible image eagerly; do not apply lazy loading indiscriminately to the hero.
• Use high fetch priority selectively for the main image rather than making every image a priority.
• Check mobile art direction and cropping so the useful part of a photograph remains visible.

A smaller file can still render late if JavaScript inserts it after other work, CSS hides it behind an animation or the browser discovers it too late. Shopify’s theme performance recommendations are a useful starting point for reviewing those decisions.

2. Audit third-party Shopify apps

Inventory the scripts, widgets and network requests on each important template. Record what each integration does and who uses it. Reviews, subscriptions and delivery information can be commercially useful; removing them solely to improve a test score may make the store less useful.

Look for overlapping features, inactive campaigns that still load scripts and widgets present on templates where they are not used. Compare a controlled preview with an integration disabled where it is safe to do so, then check that the intended feature really stopped loading.

Uninstalling an app does not always remove historical theme edits. Shopify’s app removal guidance recommends checking for additional cleanup steps. Do not delete unfamiliar snippets simply because they contain an old app name: first establish whether other features still depend on them.

For a feature that several apps appear to provide, compare native settings, an existing app and a focused code change. Our custom development versus apps guide explains the maintenance trade-offs.

3. Reduce unnecessary JavaScript

The cost of JavaScript includes downloading, parsing and executing it. A compact script can still cause sluggish interaction if it repeatedly scans a large page, measures layout inside a loop or attaches duplicate listeners every time a section is re-rendered.

• Load a product-specific feature on relevant product templates instead of every page.
• Remove duplicate libraries and check whether the theme already provides the required behaviour.
• Defer non-essential work without delaying the controls customers need immediately.
• Batch DOM reads and writes where repeated layout calculations are causing long tasks.
• Ensure section re-initialisation does not add the same event listener repeatedly.
• Use native browser behaviour when it meets the interaction and accessibility requirements.

Use the browser’s performance tools to trace a slow interaction before rewriting it. If opening the cart drawer is delayed, check the work triggered by the cart action and any scripts listening to it. Removing all interactivity is not the goal; making necessary interactions efficient is.

4. Review fonts and visual effects

Every additional font family or weight adds resources and another loading decision. Keep the set intentional, provide suitable fallbacks and check whether text changes size when the final font arrives. A layout that looks stable once fully loaded can still shift during that swap.

Review reveal animations, carousels, video backgrounds and effects on ordinary mobile devices. Essential product content should not remain invisible while an animation waits to start. Respect reduced-motion preferences and check that stopping an effect does not hide information or disable navigation.

Reserve space for promotional bars and embedded widgets instead of allowing them to move the product controls after someone starts reading. Review how the store behaves with a fresh session as well as after scripts and fonts have been cached.

5. Optimise the pages that matter

A fast homepage does not prove the buying journey is fast. Product pages may load reviews, subscriptions, recommendations and a complex selector. Collection pages can combine large image grids with filtering scripts. Search has its own requests, result states and interactions.

Choose representative URLs and actions: open a heavily merchandised product, change its variant, add it to the cart, filter a collection and refine a search. Include an unusual template and a page with long or missing content. Record the chosen URLs so subsequent tests compare like with like.

If an older theme makes these changes hard to isolate, assess whether a carefully tested theme upgrade is worthwhile. Do not assume replacing the theme will automatically remove every bottleneck; app and integration work can remain.

Why a perfect PageSpeed score is not the goal

A laboratory score is a useful signal, but it is one test under particular conditions. It can vary between runs, and some of the most important customer interactions happen after the initial load. A store can score well while an app makes variant changes frustrating.

Prioritise problems with a clear customer impact and verify improvements across relevant pages. Do not trade an accessible, dependable buying journey for a higher number, or claim a conversion increase unless it has actually been measured with an appropriate method.

A practical Shopify optimisation workflow

1. Measure a baseline: record URLs, device assumptions, test conditions and the symptoms customers or staff see.
2. Diagnose the bottlenecks: use network and performance traces to separate image delivery, script execution and layout issues.
3. Implement targeted changes in a preview theme, keeping a record of what changed and why.
4. Retest the same pages and interactions, then check cart behaviour, apps, accessibility and responsive layouts for regressions.

Retest lab behaviour after a change, but allow field reporting time to reflect new visitor experiences. Keep useful findings in the development backlog so that subsequent campaigns do not quietly reintroduce the same problems.

Performance optimisation is engineering work grounded in the store’s actual behaviour. Explore our Shopify performance and development services or talk to Simply Bold about a slow storefront if you need help deciding what to fix first.