Shopify Reduce Unused JavaScript: Fix Code Bloat

What PageSpeed Is Really Flagging

Lighthouse reports unused JavaScript when a script contains a meaningful amount of code that is not used during the initial page load. Chrome's guidance points developers to DevTools Coverage for line-by-line investigation. On Shopify, this often exposes one large theme bundle that powers every template, plus app scripts for reviews, popups, subscriptions, personalization, chat, analytics, and product recommendations.

The warning is easy to misunderstand. A product-gallery script may be unused on a collection page but required on a product page. A popup script may be unused for the first few seconds but needed after a delay. A tracking script may not affect layout but still consume network and main-thread time. The fix is not blind deletion. The fix is loading less code earlier.

Unused JavaScript connects directly to Shopify INP optimization, JavaScript execution time, long main-thread tasks, and Total Blocking Time. Even if the bytes are cached, the browser may still parse, compile, and run code before the shopper can tap a button.

Common Shopify Sources of Unused JavaScript

One theme bundle for every template

Many themes ship a single theme.js file that includes carousels, accordions, product media, predictive search, localization, cart drawers, sticky headers, and animations. That is convenient for development but expensive for first load when only a small subset is needed.

App snippets left after uninstall

Apps can leave snippets, script tags, theme app extension blocks, metafields, and global code after uninstall. If a removed app's JavaScript still appears in DevTools, treat that as low-risk cleanup after testing. This overlaps with unused CSS and JavaScript cleanup.

Pixels and tags loaded too early

GTM, Meta Pixel, TikTok Pixel, Pinterest Tag, and attribution tools can all add unused JavaScript during first load. Keep business-critical tracking, but do not load every experiment, legacy tag, and duplicate pixel on every page.

Manual Step-by-Step: Reduce Unused JavaScript on Shopify

1. Measure by template, not just homepage

Test homepage, product page, collection page, cart, and high-traffic landing pages separately. A script that is unused on the homepage may be essential on product pages. Use Chrome DevTools Coverage and the free Shopify speed test to compare templates.

2. Inventory theme scripts

In a duplicate theme, search layout and section files for JavaScript includes. Look for global files that could be conditionally loaded only where needed.

<!-- Before: loads product media code everywhere -->
{{ 'product-media.js' | asset_url | script_tag }}

<!-- Better: load only on product templates -->
{% if template.name == 'product' %}
  {{ 'product-media.js' | asset_url | script_tag }}
{% endif %}

3. Defer code that is not needed for first render

JavaScript that powers reviews, recommendations, chat, video controls, newsletter popups, or below-the-fold sections often does not need to block the first screen. Use defer for local scripts that do not need to run before HTML parsing finishes.

<script src="{{ 'theme.js' | asset_url }}" defer></script>

4. Lazy initialize below-the-fold features

Some code must load eventually, but not immediately. Initialize sliders, videos, recommendation widgets, or comparison tables when their section approaches the viewport.

const sections = document.querySelectorAll('[data-lazy-module]');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(async (entry) => {
    if (!entry.isIntersecting) return;

    const section = entry.target;
    const moduleName = section.dataset.lazyModule;
    const module = await import('/assets/' + moduleName + '.js');
    module.init(section);
    observer.unobserve(section);
  });
}, { rootMargin: '300px' });

sections.forEach((section) => observer.observe(section));

5. Remove app leftovers carefully

Check theme layout files for old includes, then check Shopify app embeds. Disable one suspect at a time on a duplicate theme and test add-to-cart, variant selection, cart drawer, tracking, and checkout handoff. For app-heavy stores, read the Shopify app speed optimization guide before cutting code.

6. Retest user actions, not only scores

After each cleanup, test the core purchase path on mobile. Tap variant selectors, size charts, accordions, quick add, cart drawer, discount boxes, pickup options, and checkout buttons. A cleaner PageSpeed report is not a win if it breaks revenue behavior.

Manual Fix vs Thunder Fix

What to Fix After Unused JavaScript

If JavaScript cleanup helps but the page still fails PageSpeed, continue with main-thread work, third-party facades, third-party JavaScript fixes, and the full Shopify speed optimization guide. JavaScript is usually one layer in a bigger stack that includes images, CSS, fonts, layout stability, and app governance.

For stores that cannot afford a week of manual theme surgery, Thunder gives you a faster path to a cleaner baseline. Review Thunder pricing, install it on the store, and keep manual code removal for the old snippets and template-specific logic that an app should not guess about.

FAQ