Performance

Code Splitting

Code splitting is a technique where JavaScript bundles are divided into smaller chunks that are loaded only when needed — rather than forcing browsers to download all JavaScript upfront. It allows the critical path JavaScript to load first while deferring non-essential functionality.

Why It Matters for Shopify Stores

Large JavaScript bundles are a major performance bottleneck for Shopify themes with many features. A theme with 500KB of JavaScript forces the browser to download, parse, and execute all of it before the page becomes interactive — even the parts only used on specific pages. Code splitting (usually handled by the theme developer) ensures that, for example, checkout-related JavaScript doesn't load on the homepage. For merchants, this manifests as choosing lighter themes and limiting apps.

How to Check Your Store

Google PageSpeed Insights 'Reduce unused JavaScript' diagnostic shows how much JS is loaded but not used on each page. If you see 100KB+ of unused JS, code splitting could help.

Use the free shopify app bloat calculator tool

How to Fix It

For merchants: reduce the number of apps (each app typically adds its own JS bundle). Choose themes that use ES modules for better code splitting. For developers: implement dynamic imports and route-based code splitting.

Related Terms

Check your store's Code Splitting with our free tools

Get a full audit across all 6 performance categories — including performance — in under 60 seconds.

Run a Free Store Audit