How to Remove Unused CSS & JavaScript on Shopify (2026)

Fix Unused CSS & JS Warnings in 60 Seconds

Run a free speed test on your store — look for "Reduce unused CSS" and "Reduce unused JavaScript" in the Opportunities section. These warnings show you exactly how many kilobytes of dead code are blocking your page render. Thunder Page Speed Optimizer addresses both automatically:

• Defers non-critical CSS so it loads after the page renders
• Defers non-critical JavaScript (apps, analytics, widgets)
• Inlines critical CSS for above-the-fold content
• Optimizes script execution order to reduce main thread blocking

One click install. The warnings may not disappear completely (Shopify's core scripts can't be deferred), but Thunder reduces the impact by 60-80% for most stores.

Why Shopify Stores Have So Much Unused Code

Every Shopify store loads unused CSS and JavaScript. It's not a bug — it's how Shopify's architecture works. Understanding why helps you know what you can fix and what you can't.

1. Global Theme CSS

Shopify themes compile all CSS into one or two files (like base.css or theme.css) that load on every page. This file contains styles for the homepage, product pages, collection pages, cart, blog, account pages — everything. When someone visits your product page, they download cart drawer styles, collection grid styles, blog post styles, and account page styles they'll never use on that page.

A stock Dawn theme loads ~60KB of CSS. After customizations and additional CSS, that grows to 100-200KB. Premium themes can hit 200-400KB. On any single page, typically only 30-50% of this CSS is actually used.

2. App-Injected Code

Every Shopify app you install can inject JavaScript and CSS into your theme. Most apps inject their code globally — on every page — even if the app only does something on product pages or the cart. A review app loads its CSS on your About page. A cart upsell app loads its JS on blog posts. Each app typically adds 50-300KB of CSS/JS.

With 10 apps installed, you might be loading 500KB-3MB of app code on every page, with each page using only a fraction of it. See our analysis of apps that slow down your store for specific examples.

3. Orphaned Code from Uninstalled Apps

When you uninstall a Shopify app, it removes its backend functionality but often leaves behind code in your theme. Script tags in theme.liquid, Liquid snippets in the snippets/ folder, and inline CSS all persist after the app is removed. This is dead code that loads on every page for zero benefit.

4. Shopify's Own Scripts

Shopify injects its own JavaScript on every storefront page — for analytics, cart functionality, customer accounts, and the checkout. These scripts total 100-200KB and cannot be removed or deferred without breaking core functionality.

How to Find Unused CSS & JavaScript on Your Shopify Store

Before removing anything, you need to identify what's unused and where it comes from. Chrome's Coverage tool is the best free option.

Step 1: Open Chrome DevTools Coverage

1. Open your store in Chrome
2. Press F12 (or Cmd+Option+I on Mac) to open DevTools
3. Press Ctrl+Shift+P (Cmd+Shift+P on Mac) to open the command palette
4. Type "Coverage" and select "Show Coverage"
5. Click the reload button (⟳) in the Coverage panel
6. Wait for the page to fully load

Step 2: Read the Results

The Coverage panel shows every CSS and JS file with a red/green bar:

• Green = code that was executed/applied on this page
• Red = code that was loaded but never used on this page
• Total Bytes = full file size
• Unused Bytes = wasted bandwidth that blocks rendering

Click any file to see line-by-line usage. Red lines are unused CSS rules or JavaScript functions. For a typical Shopify store, you'll see:

• base.css or theme.css — 50-70% unused (theme global styles)
• vendor.js or theme.js — 40-60% unused (theme JavaScript)
• App-specific files — 70-90% unused per page (most app code isn't needed)
• Shopify's own scripts — 30-50% unused (core platform code)

Step 3: Identify the Biggest Offenders

Sort by "Unused Bytes" (click the column header). The files with the most unused bytes are your highest-impact targets. Typically: theme CSS, 1-2 large app bundles, and Shopify's analytics scripts. For the JavaScript side specifically, our JavaScript optimization guide covers deeper analysis.

What Unused Code You Can Actually Remove on Shopify

Let's be realistic: you can't eliminate all unused CSS/JS on Shopify. But you can make meaningful reductions. Here's what's actionable:

{% comment %} Only load review CSS on product pages {% endcomment %}
{% if template contains 'product' %}
  {{ 'review-styles.css' | asset_url | stylesheet_tag }}
{% endif %}

{% comment %} Only load collection JS on collection pages {% endcomment %}
{% if template contains 'collection' %}
  <script src="{{ 'collection-filters.js' | asset_url }}" defer></script>
{% endif %}

Why Deferring Beats Removing for Shopify Unused Code

On a static site, removing unused CSS is straightforward — each page has known, fixed content. On Shopify, it's dangerous because:

• Dynamic content — Liquid templates add CSS classes conditionally. A product with 5 variants loads different CSS than one with 2. PurgeCSS can't detect Liquid-generated classes.
• JavaScript-added elements — cart drawers, quick view modals, and AJAX add-to-cart create DOM elements dynamically. Their CSS looks "unused" until user interaction triggers them.
• Cross-page dependencies — CSS that's unused on your homepage is critical on your product page. Removing it from the global stylesheet breaks other pages.
• App updates — apps can change their CSS class names in updates. If you've purged their "unused" CSS, the update breaks the styling.

Deferring is the safe alternative. Deferred CSS/JS still loads and works — it just loads after the page renders instead of blocking it. The visitor sees the page faster, all functionality still works, and nothing breaks on updates.

This is exactly what Thunder does with render-blocking resources. It identifies which CSS and JavaScript isn't needed for the initial paint and defers it, while inlining the critical CSS needed for above-the-fold content.

Step-by-Step: Clean Up Orphaned App Code

This is the one cleanup you should do manually — it's free, safe, and gives immediate results. Here's how to find and remove code from apps you've uninstalled:

1. Backup your theme — Go to Online Store → Themes → Actions → Duplicate. Always have a fallback.
2. List your current apps — Go to Settings → Apps and sales channels. Note every installed app.
3. Open the theme editor — Go to Online Store → Themes → Edit Code.
4. Check theme.liquid — Open layout/theme.liquid and look for <script> tags and <link> tags that reference external domains. If you see a domain that doesn't match any installed app, it's likely orphaned code.
5. Check snippets/ — Browse the snippets folder. Files with app names (e.g., bold-options.liquid, loox-reviews.liquid) that don't match installed apps are orphaned. Delete them and remove the corresponding {% render %} or {% include %} calls.
6. Search for known patterns — Use the code editor search (Ctrl+F) across all files for:
   • App names you previously used
   • ScriptTag references
   • External domains in script src attributes
7. Test thoroughly — Preview the theme, test add-to-cart, checkout flow, and all page types before publishing.

Common cleanup wins: removed review app snippets (50-100KB), old analytics scripts (20-50KB), and abandoned popup/banner code (30-80KB). Not huge individually, but cumulatively significant. For a full theme audit, see our Shopify speed audit guide.

Realistic Expectations: How Much Can You Reduce?

The "Reduce unused CSS/JS" warning in PageSpeed Insights will never fully disappear on a Shopify store. Here's what's realistic:

The highest-impact move is almost always removing apps you don't actively need. Each app removal eliminates both its code and its HTTP requests. For a deep dive into optimizing your remaining JavaScript, see our JavaScript optimization guide. For CSS specifically, our CSS optimization guide covers critical CSS, minification, and advanced techniques.

Frequently Asked Questions

Stop Unused Code from Slowing Your Shopify Store

You can't eliminate unused CSS and JavaScript on Shopify entirely — the platform's architecture loads global styles and scripts by design. But you can make a meaningful difference with three steps: clean up orphaned app code (free, immediate), reduce installed apps to only what you need (free, high impact), and defer everything else with Thunder Page Speed Optimizer (60 seconds, highest impact).

The "Reduce unused CSS/JS" warnings in PageSpeed Insights may never fully disappear. That's normal for Shopify. Focus on the real metrics: LCP under 2.5 seconds, CLS under 0.1, and fast perceived loading.

Test your store now and check how much unused code is blocking your render. For the full speed optimization strategy, see our complete Shopify speed optimization guide.