Shopify Speed Optimisation: Apps, Themes and Core Web Vitals

Speed up a Shopify store by fixing the largest real bottleneck first: measure real-user Core Web Vitals by device and template, correlate slowdowns with theme changes and app installs, remove low-value scripts, simplify heavy sections, serve correctly sized media and retest the buying journey.

Do not begin by installing another speed app.

Shopify already provides hosting, a CDN, image optimisation, compression and asset minification. The store-specific problems are more often the theme, apps, third-party code, tags, media and the amount of work each page asks the browser to do.

Checked: 14 July 2026 · Based on current Shopify Web Performance and Core Web Vitals guidance

The Shopify speed plan in one table

Performance optimisation is a product decision. Every feature spends some customer time. Keep it only when the value exceeds the cost.

Measure the three Core Web Vitals

Shopify's current Web Performance reports use real-user data for:

Largest Contentful Paint (LCP)

How quickly the main visible content loads. Shopify uses 2.5 seconds or less as the “good” threshold at the 75th percentile.

Common Shopify causes:

• oversized or late-discovered hero media;
• render-blocking CSS or fonts;
• slow third-party scripts competing for bandwidth or main-thread time;
• a complex theme above the fold;
• server or app-proxy dependencies in custom storefronts.

Interaction to Next Paint (INP)

How responsive the page feels after a user interacts. 200 milliseconds or less is good.

Common causes:

• large JavaScript bundles;
• several apps attaching listeners and executing on every page;
• expensive variant or cart logic;
• overloaded tag managers;
• third-party widgets initialising before they are needed.

Cumulative Layout Shift (CLS)

How much content moves unexpectedly. 0.1 or less is good.

Common causes:

• images, embeds or banners without reserved dimensions;
• late-loading fonts;
• app blocks injected above existing content;
• price, review or payment widgets changing height;
• consent and promotional bars pushing the layout after load.

Shopify's Web Performance reports show these metrics over time, by page URL and by page type, split by device where configured. The data can be delayed and covers the previous 90 days, so it is diagnostic history rather than an instant test.

Field data and lab data answer different questions

Field data

Real User Monitoring reflects actual customers, devices, networks and sessions. Use it to decide whether a problem is material and which templates or devices suffer.

Limitations:

• a new or low-traffic store may not have enough data;
• changes take time to appear;
• marketing campaigns and audience mix affect the experience;
• the 75th percentile is not every visit.

Lab data

PageSpeed Insights and browser tools run controlled tests. Use them to diagnose request waterfalls, blocking resources, main-thread tasks, image sizing and code behaviour.

Limitations:

• one synthetic run is not the customer population;
• logged-in, geographic and third-party conditions differ;
• a high Lighthouse score does not prove that cart and checkout interactions feel fast;
• a homepage result does not represent product, collection and search templates.

Use field data to choose the problem and lab tools to investigate it.

Step 1: segment the problem

Do not say “the store is slow”. Identify:

• metric: LCP, INP or CLS;
• device: mobile or desktop;
• template: product, collection, home, search, article or cart;
• cohort: region, traffic source or customer type where evidence permits;
• change date: when the metric moved;
• commercial importance: traffic, cart use, revenue and campaign dependency.

A poor product-page INP on mobile usually deserves priority over a slow editorial archive with little traffic.

Step 2: audit apps by value and cost

Create an app register:

Check reviews, chat, upsells, subscriptions, search, loyalty, tracking, pop-ups, personalisation and accessibility overlays.

For each app:

1. Does the feature still serve a current objective?
2. Is it used on every page or only where needed?
3. Can Shopify or the theme now perform the job natively?
4. Does the app duplicate another tool?
5. What breaks if it is removed?
6. Did performance change around installation?
7. Can it load after interaction or on selected templates?

Shopify notes that uninstalling an app may not remove all code added to the theme. After removal, inspect snippets, app embeds, theme blocks and requests, following the vendor's instructions.

Never remove revenue or compliance functionality solely for a score. Test the commercial route and keep a rollback.

Step 3: audit tags and third-party scripts

Tag managers often contain years of experiments, pixels and duplicate analytics.

Inventory:

• analytics and advertising pixels;
• heatmaps and session recording;
• affiliate and marketplace tags;
• chat and customer-service widgets;
• consent-dependent scripts;
• A/B testing;
• embedded social feeds;
• review, finance and payment messaging;
• scripts hard-coded outside the tag manager.

Record owner, purpose, last-used date, consent category, pages and loading rule. Remove orphaned tags and prevent duplicates between Shopify pixels, apps and a tag manager.

Defer non-essential work where it remains accurate and compliant. A delayed tag that misses the event it exists to measure is not an optimisation.

Step 4: simplify the theme before rewriting it

Shopify recommends an up-to-date, performance-oriented theme, limiting excessive template sections and comparing performance before and after enabling animations.

High-value theme checks:

• remove unused sections and legacy snippets;
• load template-specific assets only where required;
• reduce global JavaScript;
• avoid several carousel libraries or animation systems;
• paginate large collections;
• render essential product information without waiting for client-side code;
• reserve space for media and dynamic blocks;
• keep the mobile header and product action light;
• split long tasks and reduce expensive event handlers;
• test variant and cart behaviour under slower conditions.

Do not start a full replatform because a few theme features are poorly governed. Repair or replace the theme first when it can meet the customer need.

Step 5: treat images and video as page components

Shopify's image CDN already resizes, compresses and serves suitable formats. You still need to request and place media sensibly.

• upload source files large enough for intended display, not unbounded originals;
• use responsive image sizes;
• do not lazy-load the likely LCP image;
• lazy-load below-the-fold media;
• reserve width and height to prevent shifts;
• use a poster image for video;
• avoid autoplaying large hero video on mobile without a clear return;
• crop for the actual aspect ratio instead of sending invisible pixels;
• compress product-detail media while preserving buying evidence;
• remove hidden duplicate images loaded by responsive layouts.

Photography that helps a customer choose is valuable. A 12 MB decorative background is not proof.

Step 6: control fonts and visual effects

Fonts can delay text and cause layout shifts.

• use fewer families and weights;
• subset character sets where the licence and tooling permit;
• preload only genuinely critical files;
• set an appropriate font-display strategy;
• choose fallback metrics that reduce shifting;
• avoid icon fonts when small SVGs or existing theme icons suffice.

Motion should clarify hierarchy or state. Test page transitions, parallax, marquees and scroll animation on mid-range phones. Remove effects whose only measurable outcome is main-thread work.

Step 7: improve LCP, INP and CLS deliberately

LCP checklist

• identify the LCP element on key templates;
• make the asset discoverable early;
• remove competing render blockers;
• reduce above-the-fold DOM and styling complexity;
• check server and app-proxy timings;
• verify CDN and cache behaviour available to the architecture.

INP checklist

• find long main-thread tasks;
• attribute JavaScript to theme, app and tag owners;
• reduce global listeners and repeated work;
• delay non-essential widgets;
• simplify variant, filter and cart interactions;
• test clicks, typing, menus and option changes, not only initial load.

CLS checklist

• reserve media and embed dimensions;
• stabilise promo, consent and app banners;
• avoid inserting content above the user's position;
• handle font fallback;
• give review, price and payment widgets predictable space.

Step 8: protect conversion while optimising

For every change, record a guardrail:

Run test orders and analyse a sensible period. Performance is a customer outcome, not a contest to delete the store's useful features.

Step 9: add a performance budget

Agree limits for:

• mobile LCP, INP and CLS at the 75th percentile;
• total and route-specific JavaScript;
• above-the-fold image weight;
• number of third-party origins;
• new app approval;
• tag ownership and expiry;
• representative template checks before release.

Annotate app installs, theme updates and campaigns. Shopify's over-time report can then help connect field changes to releases.

When should you consider headless?

Not as the first speed fix.

Consider a custom storefront when:

• a proven, valuable journey cannot be delivered well inside the theme architecture;
• content and product discovery need deeper control;
• the team can own a separate frontend and release process;
• the business case survives the headless Shopify cost;
• performance requirements are paired with feature and third-party governance.

Headless gives control. It does not prevent teams from adding too much JavaScript.

Frequently asked questions

What is a good Shopify speed score?

Prioritise real-user Core Web Vitals: LCP at or below 2.5 seconds, INP at or below 200 milliseconds and CLS at or below 0.1 at the 75th percentile are current good thresholds. Use lab scores for diagnosis, not as the sole outcome.

Do Shopify apps slow down a store?

Apps can add scripts, styles, network requests and dynamic blocks. Some provide more value than their performance cost. Audit each app by pages, customer value and measured impact instead of deleting by count.

Will removing an app remove its code?

Not always. Shopify warns that uninstallation may leave theme code behind. Follow vendor removal instructions and inspect the theme and live requests afterwards.

Does Shopify already optimise images?

Shopify provides an image CDN that can resize, compress and serve efficient formats. Theme code and content editors still need to request suitable sizes, reserve layout space and avoid loading unnecessary media.

Is a headless Shopify store always faster?

No. Headless can give stronger control but can also ship large JavaScript and third-party code. Architecture creates the opportunity; performance budgets and implementation create the result.

Make every feature justify the delay it adds

The fastest store is not the one with nothing on it. It is the one where product evidence, search, reviews and checkout work quickly—and everything that does not help the decision has been challenged.

Related: Headless Shopify development · Shopify website cost UK · The real cost of a slow website · Choose a Shopify agency