Key takeaways
- Shopify automatically minifies CSS and JavaScript from theme files — you don’t need to do this manually for most code.
- Shopify’s CDN serves all assets with gzip or Brotli compression enabled.
- Manual minification is needed for: inline scripts in theme.liquid and custom code blocks added directly to the HTML.
- Tools: CSS Minifier (cssnano), Terser for JavaScript.
Minification removes whitespace, comments, and shortens variable names in code files to make them smaller. Smaller files transfer faster, which improves page load time. The good news for Shopify store owners: most of this happens automatically.
How to minify JavaScript and CSS in Shopify
Short answer: Shopify does it for you.
When you upload or edit CSS and JavaScript files in your Shopify theme, Shopify’s platform automatically minifies them when serving to visitors. The version you see in the code editor is the readable, unminified source — the version sent to browsers is minified.
Additionally, Shopify’s CDN (powered by Fastly) serves all assets with gzip or Brotli compression enabled. This reduces transfer size for all text-based files — HTML, CSS, JavaScript — regardless of whether they’re already minified.
What Shopify minifies automatically
Theme CSS files (e.g., assets/base.css, assets/theme.css) — minified on Shopify’s CDN.
Theme JavaScript files (e.g., assets/theme.js, assets/global.js) — minified on Shopify’s CDN.
Section {% javascript %} blocks — Shopify bundles and minifies these automatically as part of its section rendering pipeline.
Section {% stylesheet %} blocks — similarly handled automatically.
When you need to minify manually
Inline scripts added directly to theme.liquid
If you add a <script> block inline inside theme.liquid (not in an asset file):
<!-- theme.liquid -->
<script>
// This code is NOT automatically minified by Shopify
var myStoreConfig = {
currency: 'USD',
theme: 'Dark'
};
</script>This code is part of the HTML response, not a separate asset file — Shopify doesn’t minify it. For small configuration objects, this is usually fine. For larger inline scripts, minify before pasting.
Third-party scripts you host yourself
If you copy a third-party script into your assets/ folder rather than loading it from an external CDN, Shopify’s CDN will serve it with compression but not minify it if it wasn’t already minified. Use the minified version from the library (library.min.js instead of library.js).
Custom code blocks in the Theme Editor
Some themes let you add custom HTML in a “Custom HTML” section block. JavaScript pasted here is not minified by Shopify.
Tools for manual minification
CSS:
- cssnano.co — paste your CSS, get minified output
- cssminifier.com — simple online tool
JavaScript:
- Terser REPL — the same tool Webpack and Vite use internally, available as an online tool
- javascript-minifier.com — quick online minifier
For production-grade minification (e.g., if you’re developing a theme), use these tools as part of a build pipeline (Webpack, Vite, or Rollup) rather than manually.
Does minification significantly improve Shopify performance?
For theme files — no, because Shopify handles it. For overall performance: image optimization, reducing unused app scripts, and fixing render-blocking resources have far greater impact than minifying the remaining code.
A 30KB CSS file minified to 22KB saves 8KB. Removing a single unused app script that’s 200KB saves 200KB. Focus there first.
What actually moves the needle on Shopify performance
If you’re investigating minification, you’ve probably already hit your performance ceiling on the easy wins. Here’s where the real gains are:
1. Image optimization. Uncompressed product images are the #1 cause of slow Shopify stores. Use WebP format. Compress images before uploading. Target under 200KB per hero image. Under 100KB for product images.
2. Removing unused app scripts. Each external app script is an HTTP request to a third-party server. Even if the script is small, the connection overhead adds latency. Remove scripts from apps you no longer use.
3. Fixing render-blocking scripts. Scripts in <head> without async or defer delay page paint. See our guide on optimizing render-blocking scripts.
4. Using a fast base theme. Dawn (Shopify’s official theme) consistently scores 90+ on mobile PageSpeed. Heavily customized or older themes often score 50-70. Starting from a fast theme is more impactful than optimizing a slow one.
Checking your current minification status
Open Chrome DevTools (F12) → Network tab → filter by CSS or JS → click on a file → look at the response body. If it’s minified, you’ll see compressed, hard-to-read code. If it has whitespace and comments, it’s not minified at the CDN level (unusual for Shopify theme files).
For your actual page performance, use PageSpeed Insights — it will flag specific opportunities including any un-minified files it detects.
