Shopify site speed optimisation

Shopify site speed optimisation is one of the highest-leverage upgrades you can make to an ecommerce store because it improves how quickly shoppers can browse, search, and checkout. If your PageSpeed Insights score feels stubborn or your store “just feels slow,” the fix is rarely one magic setting. It is usually a practical checklist: theme cleanup, app audits, image settings, and a few targeted Core Web Vitals fixes that stick.

The good news is Shopify already handles a lot for you at the platform level (hosting, CDN delivery, SSL, and much of the infrastructure). The not-so-good news is the part you control, your theme code, apps, images, and third-party scripts, is often where performance problems pile up. This guide stays tightly focused on what you can actually change on Shopify to improve site speed in a durable way.

What “site speed” means on Shopify (and what you can realistically control)

When store owners talk about site speed, they usually mean a mix of “how fast pages load” and “how responsive the site feels.” For SEO and user experience, Google’s Core Web Vitals are a common yardstick, but they are also a useful diagnostic framework for Shopify performance work.

The Core Web Vitals you’ll run into most often

• LCP (Largest Contentful Paint): How long it takes the main content (often a hero image or product image) to appear.
• INP (Interaction to Next Paint): How responsive the page feels when a user clicks, taps, opens a menu, changes a variant, or adds to cart.
• CLS (Cumulative Layout Shift): Whether the page jumps around while loading (often caused by images without dimensions, late-loading banners, or injected app widgets).

What Shopify handles vs what you handle

Shopify generally handles:

• Global CDN delivery and caching behavior for many assets
• Reliable hosting and TLS/SSL
• Modern theme architecture patterns (especially with Online Store 2.0 themes)

You (and your theme/apps) generally handle:

• Theme optimization: code quality, unused sections, heavy JavaScript, and render-blocking assets
• App bloat: extra scripts, trackers, widgets, and duplicate functionality
• Image settings: file size, dimensions, formats, and lazy loading behavior
• Third-party scripts: chat widgets, A/B testing, heatmaps, review tools, and pixels

How to diagnose Shopify performance issues without guessing 🔎

Before you change anything, identify what is actually slow. Many stores waste time compressing images when the real issue is a bundle of third-party scripts or a theme feature you do not use.

Start with three views of the same problem

• PageSpeed Insights: Good for Core Web Vitals signals and common “what to fix” hints.
• Chrome DevTools (Lighthouse + Performance): Helpful for seeing main-thread blocking, long tasks, and which scripts are costly.
• Real device testing: Open your home page, a collection page, and a product page on a mid-range phone on mobile data. This reveals issues synthetic tests can underplay.

Pick the right pages to test

Shopify stores often have very different performance profiles by template. Test at least:

• Home page (often heavy due to sliders, video, and multiple sections)
• Top collection page (filtering, infinite scroll, product cards, badges)
• Top-selling product page (reviews, upsells, sticky ATC, variant logic)
• Cart page or drawer (scripts that run at interaction time)

Common patterns behind “bad scores” on Shopify

• LCP is slow because the hero image is too large, not prioritized, or blocked by CSS/JS.
• INP is poor because of heavy theme JavaScript, variant scripts, or multiple apps reacting to clicks.
• CLS is high because app widgets inject content after load, images lack dimensions, or fonts swap late.

Theme cleanup: the fastest wins for Shopify site speed optimisation

Your theme is the foundation of Shopify performance. Even with a good theme, stores accumulate extra sections, snippets, and scripts over time. The goal is not to make the theme “minimal,” it is to make it intentional.

Choose performance-friendly defaults (especially if you are re-theming)

If you are selecting or upgrading a theme, prioritize themes that:

• Rely more on native Shopify features and less on bundled custom JavaScript
• Avoid heavy sliders, animation libraries, and “kitchen sink” feature packs
• Support modern image practices (responsive images, sensible lazy loading)
• Have clean section architecture so unused sections do not ship extra assets

Remove unused sections and features (they often still cost you)

In many cases, merchants disable a section in the Theme Editor but the theme still loads its CSS/JS globally. Ask your developer (or review theme files carefully) to ensure unused features are not included site-wide. Common culprits:

• Homepage sliders and video background modules
• Animation-on-scroll features
• Multiple menu systems (mega menu + drawer + sticky header scripts)
• Product page add-ons you do not use (size chart popups, tabs, accordions, sticky ATC)

Reduce render-blocking CSS and JavaScript

On Shopify, it is common to see a single, large CSS file and multiple JavaScript files loaded on every page. You usually want to:

• Load CSS efficiently: keep critical styles small, and avoid shipping styles for sections that are not used.
• Defer non-critical scripts: especially scripts that do not need to run before the page is interactive.
• Scope assets by template: product-only scripts should not load on collection pages, and vice versa.

Be careful with “performance” edits that break Shopify UX

Some optimizations can backfire if they break key storefront features. For example:

• Removing variant scripts can cause wrong prices or images on selection.
• Delaying cart scripts can make add-to-cart feel laggy.
• Over-aggressive lazy loading can delay the LCP image.

When in doubt, make one change at a time and re-test the same pages.

App audit: control app bloat without losing revenue features

Apps are one of the most common reasons Shopify performance degrades over time. Many apps inject JavaScript, CSS, and network calls on every page, even when the feature is only used on product pages or in the cart.

How to run a practical app audit

1. List every installed app and what business purpose it serves (reviews, bundles, subscriptions, analytics, etc.).
2. Identify duplicates (for example, multiple apps adding badges, multiple upsell tools, multiple pixels).
3. Check where it runs: does it load on all pages or only where needed?
4. Measure impact: compare speed tests with and without the app where possible (some apps provide toggles, or you can temporarily disable).
5. Decide: keep, replace, or remove based on value vs performance cost.

Common app categories that tend to be heavy

• Upsell and cross-sell widgets that listen to many user events
• Review platforms with large scripts and multiple API calls
• Chat and helpdesk widgets that load early
• Tracking and attribution tools layered on top of existing pixels
• Popups and personalization tools that run complex logic on page load

What to do after uninstalling an app (critical for speed)

Uninstalling an app does not always remove its code from your theme. After removing apps, check for leftover:

• Snippets added to theme.liquid
• App-related scripts in the theme’s assets
• App blocks embedded in templates and sections

This cleanup alone can noticeably improve Shopify site speed optimisation efforts because it prevents “ghost scripts” from loading.

Image optimisation on Shopify: file size, dimensions, and lazy loading done right

Images are often the biggest contributor to slow load times on Shopify, especially on mobile. Good image optimisation is less about making everything tiny and more about serving the right image for the layout, at the right time, in the right format.

Set image dimensions intentionally (avoid oversized assets)

A common mistake is uploading a massive image and letting the browser scale it down. Instead:

• Upload images that match your theme’s real display sizes (especially for collection cards and product galleries).
• Keep consistent aspect ratios for product imagery to reduce layout shift.
• Ensure images have width and height defined (this helps reduce CLS).

Compress images before upload (and keep quality consistent)

Compression reduces file size without changing your layout. Commonly, stores do best when they:

• Compress large marketing images (home page banners, lifestyle photos) aggressively enough to load fast but still look sharp.
• Keep product images consistent in quality so pages do not feel “mixed.”

Use modern formats where possible, but focus on outcomes

Modern formats can help, but the main goal is fewer bytes and fewer layout issues. If your theme and Shopify image pipeline serve modern formats automatically in some situations, you still need to upload sensible source files and dimensions.

Lazy loading: helpful, but do not lazy-load your LCP image

Lazy loading is great for images below the fold, like lower product gallery images or collection grids. But for the main hero image (often the LCP element), lazy loading can delay when it appears. A practical approach:

• Do not lazy-load the first, above-the-fold hero image on home page and key landing pages.
• Do lazy-load images that are clearly below the fold (product recommendations, footer imagery, long blog pages).

Core Web Vitals fixes that usually “stick” on Shopify

Core Web Vitals improvements tend to stick when they reduce recurring costs: less JavaScript work, fewer third-party calls, smaller assets, and more predictable layouts. Below are the most reliable levers for Shopify performance.

Improve LCP: prioritize the main content and reduce blocking

• Make the hero/media smaller: right-size and compress the main image on templates that matter.
• Reduce above-the-fold clutter: too many badges, announcements, and scripts delay the main render.
• Delay non-essential scripts: especially chat, popups, and experiments that do not need to load immediately.

Improve INP: reduce JavaScript work at interaction time

INP often suffers when multiple scripts compete on click, scroll, and change events. Common improvements include:

• Remove duplicate functionality: one upsell tool, one reviews tool, one analytics layer where possible.
• Simplify product pages: variant selectors, sticky add-to-cart, and bundles can be heavy together.
• Avoid loading product scripts globally: scope them to product templates only.

Reduce CLS: reserve space for elements that load late

• Set image dimensions and keep consistent ratios in grids.
• Reserve space for app widgets (reviews summary, delivery estimates, trust badges) so they do not push content down when they appear.
• Be careful with announcement bars that appear after load or change height on scroll.
• Use stable font loading: sudden font swaps can cause shifting, especially in headers and price blocks.

A practical Shopify performance checklist you can run monthly

Shopify performance is not “set and forget.” Themes get updated, apps get added, and marketing tags accumulate. A lightweight monthly routine keeps site speed from drifting.

Monthly checklist (15 to 45 minutes)

• App audit quick scan: did you add anything new, and does it load site-wide?
• Homepage section review: remove or simplify sections that are not actively driving conversions.
• Image spot check: any new banners or campaign images that are unusually large?
• Core Web Vitals sanity test: re-check key templates (home, collection, product) in PageSpeed Insights.
• Script creep review: confirm pixels and tracking tools are not duplicated.

When to do a deeper cleanup

If you recently migrated themes, ran multiple campaigns, or tested several apps, plan a deeper review. In many cases, that is when leftover snippets and redundant scripts stack up and quietly slow everything down.

Common Shopify speed traps (and what to do instead)

These are issues that repeatedly show up in Shopify speed work, even on well-run stores.

Trap: Installing apps for one-time campaigns and forgetting them

Do instead: remove apps after the campaign ends, then clean up leftover code and confirm scripts stop loading.

Trap: Overbuilt homepages

Do instead: keep above-the-fold simple and fast, push heavy sections (UGC, video, large carousels) lower or onto dedicated landing pages.

Trap: Popups, chat, and personalization loading immediately

Do instead: load these tools after a short delay or on interaction where possible, so the initial render stays light.

Trap: Lazy loading everything

Do instead: lazy-load below-the-fold content, but prioritize the LCP image and critical above-the-fold elements.

Putting it all together: a reliable workflow for Shopify site speed optimisation

If you want improvements that last, follow a simple order of operations:

1. Measure key templates and identify the biggest bottleneck (images, apps, theme scripts, layout shift).
2. Theme cleanup to remove unused features and reduce global assets (this is often the best “base layer” fix).
3. App audit to remove duplicates and stop site-wide script loading where it is not needed.
4. Image optimisation to reduce LCP and bytes transferred, especially for hero images and product galleries.
5. Re-test and repeat, one change at a time, so you know what actually helped.

If you want a structured way to keep this process organized, SEOBoss-style content and technical checklists work best when they are paired with a monthly cadence: measure, fix, verify, and document. That approach keeps shopify performance from slipping as your store grows.