Remove Unused JavaScript in Shopify: Complete Guide

Why Shopify Stores Have Unused JavaScript

Most Shopify stores accumulate unused JavaScript from:

• Deleted or inactive apps that left code behind
• Theme JavaScript loaded globally but only used on specific pages
• Third-party scripts loading full libraries when only small features are used
• Legacy code from previous theme versions

How to Find Unused JavaScript

Use Chrome DevTools Coverage tool to identify unused code:

1. Open Chrome DevTools (F12)
2. Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows)
3. Type "Coverage" and select "Show Coverage"
4. Click the record button and load your page
5. Red bars show unused JavaScript - these are optimization opportunities

Fix #1: Remove Unused Apps Completely

Simply uninstalling an app from Shopify admin doesn't remove its code. You need to:

1. Check theme.liquid for app script tags
2. Search snippets folder for app-related files
3. Remove any references to deleted apps
4. Test thoroughly after removal

Fix #2: Conditionally Load JavaScript

Only load JavaScript on pages that actually need it:

{% if template contains 'product' %}
  <script src="product-features.js" defer></script>
{% endif %}

{% if template == 'cart' %}
  <script src="cart-upsells.js" defer></script>
{% endif %}

Fix #3: Tree Shake Your JavaScript

If you're using a build tool, enable tree shaking to remove unused functions:

// Instead of importing entire library
import * as _ from 'lodash'

// Import only what you need
import { debounce, throttle } from 'lodash'

Fix #4: Lazy Load Non-Critical Features

Load feature JavaScript only when users interact with elements:

// Load chat widget only when clicked
document.getElementById('chat-button').addEventListener('click', () => {
  import('./chat-widget.js').then(module => {
    module.initChat()
  })
}, { once: true })

Expected Impact