Skip to content

10 Essential Shopify Speed Optimization Techniques for 2026

Ten Shopify speed optimization techniques for 2026, from a lightweight theme and correctly sized images to fewer apps, cleaner tracking and faster Liquid. Includes the Core Web Vitals targets (LCP, INP, CLS) to track.

10 Essential Shopify Speed Optimization Techniques for 2026

To speed up a Shopify store in 2026, start with a current, lightweight theme, compress and correctly size your images, and cut the apps and third-party scripts you do not need, because extra JavaScript is the most common reason Shopify stores feel slow. Then measure the result in Shopify's web performance report, which tracks the three Core Web Vitals (LCP, INP and CLS) from real visitors.

Here are the 10 techniques we use on client stores, in the order we usually apply them:

  1. Choose a fast, current theme: Shopify's Horizon themes or another well-maintained theme with minimal JavaScript.
  2. Compress and size images: upload 2048 px originals and let Shopify's CDN serve resized WebP versions.
  3. Lazy-load below the fold only: never the hero or first product image, which should load first.
  4. Limit third-party apps and scripts: remove what you do not use and move apps to theme app extensions.
  5. Let Shopify's caching and prefetching work: Shopify already caches files for a year and prefetches pages.
  6. Use Shopify's built-in CDN: do not add another CDN or a Cloudflare proxy in front of it.
  7. Tidy up tracking: use Shopify's customer events and audit your tag manager.
  8. Clean up theme code: remove unused JavaScript and CSS and fix slow Liquid loops.
  9. Fix redirects and broken links: avoid redirect chains and repair broken internal links.
  10. Run regular speed audits: check Core Web Vitals monthly and after every theme or app change.

Key metrics to track (Google's "good" thresholds, measured at the 75th percentile of visits):

  • Largest Contentful Paint (LCP): 2.5 seconds or less
  • Interaction to Next Paint (INP): 200 milliseconds or less
  • Cumulative Layout Shift (CLS): 0.1 or less

INP replaced First Input Delay as a Core Web Vital in March 2024. Shopify's web performance report uses the same three metrics and the same thresholds.

How do you increase your Shopify store speed?

Most speed problems on Shopify come from what is added on top of the platform: heavy themes, oversized images, apps and tracking scripts. Shopify handles hosting, the CDN and caching for you, so your work is about what each page loads. The sections below go through each technique step by step.

1. Use a fast and lightweight Shopify theme

Your store's speed starts with the theme. Speed affects revenue: Deloitte's Milliseconds Make Millions study (2020, commissioned by Google) found that a 0.1 second improvement in mobile site speed lifted retail conversions by 8.4%.

What to look for in a theme

When picking a theme, prioritize features that directly affect performance:

  • Mobile-first design: Google evaluates your mobile pages, and many shoppers browse on phones.
  • Minimal JavaScript and CSS: Shopify's own performance guidance says to avoid heavyweight frameworks when Liquid and CSS can do the same job.
  • Efficient image handling: the theme should use Shopify's image_tag filter for responsive images.
  • Regular updates: keeps your theme compatible with Shopify's latest features.

Shopify's free Horizon themes and other Online Store 2.0 themes are built with performance in mind. Every theme in the Shopify Theme Store must have an average Lighthouse performance score of at least 60 across the home, product and collection pages on desktop and mobile. Treat that as a floor, not a guarantee, and test a theme's demo store in PageSpeed Insights before you buy it.

Mistakes to avoid

Many store owners pick themes with heavy visual effects, then add more sections to every template. Shopify itself advises against adding too many sections to page templates. If your theme has page transitions or animations, compare performance with them on and off.

To keep your store running smoothly, check how your theme affects performance in Shopify's web performance report after every major change. If your current theme is the problem, our Shopify theme development team builds custom themes with performance budgets from the start.

2. Compress and optimize images

Unoptimized images are often the heaviest part of a page, usually because high-resolution product photos were uploaded without resizing. The largest image on screen is also typically the element Google measures for LCP.

Shopify does part of the work for you. It compresses JPEG images automatically, serves WebP to browsers that support it, and resizes images on its CDN when the theme requests them through image_url or image_tag. What it cannot fix is a theme or app that requests full-size images where a small one would do.

Tools for image optimization

These tools make it easier to compress images before or after upload:

  • TinyPNG: compresses PNG, JPEG and WebP files in the browser before you upload.
  • Crush: Speed & Image Optimizer: a Shopify app that compresses new and existing images in the background.
  • Tiny SEO Speed Image Optimizer (formerly TinyIMG): a Shopify app that combines compression with alt text and file name fixes.

Choosing the right upload format also makes a difference:

Image typeUpload formatNotes
Product photosJPEG or PNGShopify delivers WebP to supported browsers automatically.
Lifestyle shotsJPEGCompress before upload; 2048 px on the long side is enough.
Logos and iconsSVG or PNGSVG stays sharp at any size and is usually tiny.

Automating the process

Let the theme request the right size for each layout. With image_tag, Shopify generates a srcset so the browser picks the right width. For product galleries, typical requested widths are:

  • Thumbnails: 200 to 300 px wide
  • Product previews: 600 to 800 px wide
  • Zoom views: 1200 to 1500 px wide

This delivers sharp images without unnecessary weight. For the full process, see our Shopify image optimization checklist.

Mistakes to avoid

Skip GIFs for product demonstrations. A short compressed video looks better and weighs less.

3. Implement lazy loading for images

Lazy loading delays images that are not visible on the screen yet. It reduces the initial load and matters most on collection pages, which can show dozens of product images.

Built-in Shopify solutions

Every major browser supports native lazy loading with the loading="lazy" attribute. Shopify's image_tag filter sets it automatically on images in sections further down the page, and most current themes use it. To check your theme, inspect the HTML of a collection page and look for the attribute.

Do not lazy-load the LCP image

The most common lazy loading mistake is applying it to everything. Google's web.dev guidance and Shopify's theme performance docs both say the same thing: load images in the first viewport eagerly, especially the LCP image, and mark that image with fetchpriority="high". A lazy-loaded hero image delays LCP on every visit.

Mobile optimization and key metrics

Two tips for mobile:

  • Reserve space for every image with width and height attributes, so content does not jump as images load.
  • Use an accurate sizes attribute, so phones do not download desktop-width images.

To measure the impact, use PageSpeed Insights or GTmetrix and focus on LCP and CLS.

4. Limit third-party JavaScript and apps

Apps and third-party scripts add requests and JavaScript that compete with your own page. Shopify's help center puts it plainly: if your INP is poor, you most likely have too much JavaScript in your store, from the theme, apps or tag managers.

Managing apps without sacrificing speed

To keep the features you need while staying fast:

  • Use Shopify's built-in features before adding an app.
  • Replace several single-purpose apps with one that covers the same needs.
  • Remove apps you no longer use, and check the theme afterwards. Uninstalling an app does not always remove the code it added.

Keep an eye on these metrics to measure success:

Fine-tuning your code

Apps should load through theme app extensions (app embeds), not script tags. Shopify is retiring the ScriptTag API: script tags can't be created or updated after October 1, 2026, they stopped working on the Order status page on August 26, 2026, and they stop running on storefronts on March 1, 2027. Ask the developers of older apps how they plan to migrate.

For scripts you add yourself, use defer on non-critical scripts and async only for independent third-party scripts. For interactive components, load the code when the shopper actually uses them.

Review your apps every two to three months. Chat widgets, review carousels, pop-ups and tracking tags are common culprits, so check those first.

5. Enable browser caching and prefetching

Speed matters most for returning customers and for the second page of a visit. On Shopify, both caching and prefetching are largely handled for you.

Browser caching: what Shopify handles for you

Browser caching saves static files on your visitors' devices, cutting load times on repeat visits. On Shopify you don't configure it: Shopify sets browser caching for cacheable resources to one year and serves them from its CDN. What you control is how many files each page loads and whether they can be cached at all: reference assets through Liquid filters such as asset_url, which version the URL for you, don't add your own query strings to force a refresh, and inline only the CSS the first screen needs.

Don't put your own Cloudflare proxy in front of the store. Shopify doesn't support the Cloudflare proxy; if Cloudflare manages your DNS, set every record that points to Shopify to DNS only.

Prefetching: load before it's needed

Since June 2025, Shopify has enabled the Speculation Rules API on all Liquid storefronts. By default it prefetches a page when a shopper presses on a link, so the next page starts loading a moment earlier. Themes can add more aggressive rules, but prerendering runs every script on the page, including analytics, so test it carefully.

For resources the browser discovers late, such as a web font referenced in CSS, use rel="preload". Shopify recommends reserving it for one or two resources at most. For example:

<link rel="preload" href="{{ 'critical-font.woff2' | asset_url }}" as="font" type="font/woff2" crossorigin>

Host fonts on Shopify's CDN instead of an external font service, and use font-display: swap (the font_face Liquid filter supports it) so text appears while the font loads. For critical third-party domains you cannot avoid, a preconnect hint opens the connection earlier.

Tracking your progress

To see how caching and prefetching are working, use PageSpeed Insights and GTmetrix. Watch:

  • Time to First Byte (TTFB)
  • First Contentful Paint (FCP)
  • Largest Contentful Paint (LCP)

6. Use a content delivery network (CDN)

A content delivery network serves files from servers close to each visitor. On Shopify you already have one, and you cannot replace it.

How Shopify's CDN works

Every Shopify store is served through a CDN run by Cloudflare, included at no extra charge. A shopper in Europe visiting a US-based store gets files from a nearby server, not from across the ocean. Shopify notes that third-party advice to add a CDN usually doesn't apply to Shopify stores.

Getting the most from your CDN

Keep assets on Shopify: Upload images, videos, fonts and theme scripts to Shopify so they are served from the same CDN. Files hosted on other servers add extra connections and skip Shopify's caching.

Reduce what you load

  • Every external domain adds a new connection, so cut third-party hosts where you can.
  • Fewer, smaller files cache better and load faster on mobile networks.
  • Large and international stores benefit most from keeping everything on one CDN, which matters for Shopify Plus stores selling in several markets.

Tracking and fine-tuning

Check LCP and INP for visitors in your key countries. PageSpeed Insights shows real-user data for your pages when Google has enough of it.

Shopify's CDN serves every store, large or small, and you can't swap it for your own, so put your effort into what each page loads.

7. Move tracking codes to customer events and Google Tag Manager

Tracking scripts are one of the biggest sources of extra JavaScript on a Shopify store. Google Tag Manager (GTM) helps you manage them in one place, but it does not make them free: each tag still loads and runs its own code. The speed gain comes from removing tags you do not need.

What changed for Shopify tracking

Checkout tracking now runs through Shopify's customer events. The Additional scripts box in Checkout settings became view-only on August 28, 2025, and August 26, 2026 was the deadline for non-Plus stores to upgrade their Thank you and Order status pages. Old scripts placed there no longer run on the upgraded pages.

  • App pixels: official apps for Google, Meta and other channels connect through Shopify's customer events.
  • Custom pixels: for other tools, add code under Settings > Customer events. Custom pixels run in a sandbox and can collect events on checkout pages. Shopify has a tutorial for running GTM as a custom pixel.

Our guide to Shopify Checkout Extensibility in 2026 covers the checkout side in more detail.

How to get started

  1. List every tracking tag on the store and who uses its data.
  2. Remove tags nobody uses.
  3. Move the rest to app pixels, a custom pixel or a single GTM container.
  4. Test events in each platform before you remove the old code.

Tips for better speed

Avoid long custom HTML tags in GTM. Use built-in templates, triggers and variables instead, and fire tags only on the pages that need them.

Keeping an eye on performance

Review your GTM setup regularly. Shopify's own advice is to audit your tag manager and remove unused or low-value tags. Key areas to watch:

  • How scripts are loading.
  • The order in which tags fire.
  • The size of your GTM container.
  • Tags that fire on every page but are only needed on a few.

8. Clean up and optimize Shopify code

Clean, efficient theme code keeps a store fast as it grows. Leftover code from old apps and features is common on stores that have been running for a few years.

Remove unused code

Audit your theme files for unused JavaScript, CSS and orphaned snippets, especially code left behind by uninstalled apps. Every file you remove is one less thing each page has to download and run. Keep the number of separate stylesheet links low: Shopify notes that each extra stylesheet can trigger work that hurts INP.

Optimize your Liquid code

Liquid is Shopify's templating language. Slow Liquid shows up as a slow server response (TTFB). Shopify's performance docs point to a few common causes:

  • Nested loops: loops across products, variants or options grow quadratically with catalog size.
  • Pagination: use paginate for large arrays and keep pagination under 25,000 objects.
  • Repeated work: assign values you use often to a variable instead of recalculating them.

Shopify says these optimizations can save 25 to 50 ms of TTFB on complex themes. To find the slow parts, run shopify theme profile in Shopify CLI or use the Shopify Theme Inspector for Chrome. Both show how long each file takes to render.

Keep an eye on performance

Track JavaScript execution time and render-blocking resources to measure the impact of your changes. Lab scores are useful for testing, but the real-visitor data in Shopify's web performance report is what counts. Review the code whenever you add features.

Every redirect adds an extra round trip before the page starts loading, and redirect chains add several. Broken links waste crawl budget and frustrate customers.

How redirects affect performance

  • 301 permanent redirects: the right choice for moved products, collections and pages. Browsers and search engines cache them.
  • 302 temporary redirects: only for short-term changes, such as a temporary campaign page.
  • Meta refresh: avoid it entirely.

Spotting and fixing URL issues

Audit your URLs with Google Search Console and a site crawler. Look for:

  • Chained redirects (several redirects for a single URL).
  • Internal links that point to a redirect instead of the final URL.
  • Broken internal and external links.
  • Outdated links to discontinued products.

Managing redirects correctly

In the Shopify admin, URL redirects live under Content > Menus > View URL redirects. They only work for URLs that return a 404, so a redirect will not override a page that still exists. Most plans allow up to 100,000 redirects and Shopify Plus allows 20,000,000.

Simplifying links and URLs

  • Audit links monthly if you can, and point old product links to the closest current product or collection.
  • Update internal links to the final URL, so visitors skip the redirect.
  • Check third-party links, such as review or integration links, to make sure they still work.

Keep an eye on things

Google Search Console emails you when it finds new indexing issues, including 404 errors. Check its Page indexing report after every migration or large catalog change.

10. Perform regular speed audits

Speed slips over time as you add apps, sections and campaigns. Google recommends achieving good Core Web Vitals for success in Search, and real-world speed is what shoppers feel, so regular checks are part of running a store.

Key metrics to watch

  • Largest Contentful Paint (LCP): 2.5 seconds or less.
  • Interaction to Next Paint (INP): 200 milliseconds or less.
  • Cumulative Layout Shift (CLS): 0.1 or less.
  • First Contentful Paint (FCP) and TTFB: useful lab metrics for finding the cause of a slow LCP.

Tools to get the job done

Shopify's web performance report is the best starting point, because it uses real visitor data from the last 30 days. Find it under Analytics > Reports. Pair it with other tools for a fuller picture:

ToolPurposeFeatures
Shopify web performance reportReal-visitor Core Web VitalsLCP, INP and CLS at the 75th percentile, by page type
Google PageSpeed InsightsField and lab data per URLMobile and desktop testing, Core Web Vitals diagnostics
Google Search ConsoleSite-wide Core Web Vitals reportGroups of URLs that pass or fail
GTmetrixDeep technical analysisWaterfall charts, performance history
PingdomUptime and global checksMultiple test locations, monitoring

For a quick first check, you can also run any page through our free Shopify speed test.

When to audit your store

  • After major changes, such as adding apps or updating your theme.
  • Before busy shopping periods, such as Black Friday and the holidays.
  • When testing new third-party tools or integrations.

Addressing speed issues

  • Critical issues: fix anything that pushes a Core Web Vital into the "poor" range right away.
  • Major concerns: work on metrics stuck in "needs improvement".
  • Minor tweaks: smaller fixes that add up over time.

To measure the cost of a single app, duplicate your theme, turn the app off in the copy and compare the two in PageSpeed Insights. Remove any app that costs more speed than it earns.

Wrapping up

Shopify gives every store fast hosting, a global CDN, caching and prefetching. What slows stores down is what gets added on top: heavy themes, oversized images, too many apps and old tracking code. Work through the 10 techniques above, starting with the theme and apps, and revisit this guide whenever your Core Web Vitals slip.

Use Shopify's web performance report to set a baseline, fix the biggest problems first, and check again after every change. Real-visitor numbers matter more than a lab score, because they show what your customers actually experience.

FAQ

What is a good speed score for a Shopify store?

Focus on Core Web Vitals rather than a single score. A store is in good shape when LCP is 2.5 seconds or less, INP is 200 ms or less and CLS is 0.1 or less at the 75th percentile. Lighthouse scores are useful for testing changes, but Shopify's web performance report shows what real visitors experience.

Why is my Shopify store slow?

The most common causes are too many apps and third-party scripts, oversized or lazy-loaded hero images, a heavy theme with many sections, and old tracking code. Shopify's hosting and CDN are rarely the bottleneck.

Do Shopify apps slow down my store?

Apps that load code on the storefront can. Check each app's value against its speed cost, remove the ones you do not use, and confirm their code is gone from the theme. Apps should load through theme app extensions, because script tags stop running on storefronts on March 1, 2027.

Do I need Cloudflare or another CDN for Shopify?

No. Every Shopify store already runs on a CDN operated by Cloudflare at no extra cost. Shopify does not support putting your own Cloudflare proxy in front of the store, so set DNS records that point to Shopify to DNS only.

Does site speed affect Shopify SEO?

Yes, but it is one signal among many. Google says good Core Web Vitals align with what its ranking systems reward, and it recommends achieving them for success in Search. Speed will not outrank more relevant content, but a slow store loses both rankings and sales.

Need help shipping this on Shopify?

We've built 500+ Shopify and Shopify Plus stores. Talk to our team about your build.

The checklist we run before touching a client's code

Get it by email, plus a few short notes over the next two weeks: what we see most often on Shopify stores and what actually fixes it.

No spam. Unsubscribe anytime. Privacy Policy

Want more of our posts in your Google results? Add Codersy as a preferred source.

Add Codersy on Google(opens in a new tab)