Shopify Theme Cleanup: reducing JavaScript payload from 4.9MB to 2.3MB

The short version

This cleanup was not about redesigning the store.

It was about making the existing Shopify theme cleaner, lighter, and less fragile.

The work focused on:

• Auditing app and third-party script loading
• Moving hardcoded scripts into conditional, settings-controlled loading
• Reducing unnecessary JavaScript execution on pages that did not need it
• Remediating JavaScript errors that could affect storefront behavior
• Removing Shopify-generated assets from version control
• Consolidating duplicate Add-to-Cart behavior
• Improving the z-index stack across overlapping UI elements
• Increasing tap target sizes for better mobile usability
• Repositioning the chatbot widget so it did not interfere with key shopping UI
• Delaying Gorgias so support tooling did not compete with the storefront's initial load
• Cleaning up image delivery issues

The goal was not to remove every app or chase a perfect score. The goal was to reduce avoidable storefront weight and make the theme safer to work on.

Why theme cleanup matters

A Shopify theme can become heavy over time without anyone making one obviously bad decision.

A marketing script gets added. A chat widget gets installed. An app injects storefront code. A developer adds custom JavaScript to solve an urgent issue. A tracking script gets hardcoded. A sticky add-to-cart bar gets added. A page-specific fix becomes global. Another agency inherits the theme and works around what is already there.

Eventually, the store still works, but every change feels riskier than it should.

That is where theme cleanup becomes valuable.

Not because the store is bad, but because too many small layers have accumulated without a single owner of the whole storefront.

App script audit and remediation

One of the biggest parts of this cleanup was reviewing how third-party scripts were being loaded.

The storefront had scripts for tools like Klaviyo, Gorgias, and Bing/Microsoft tracking. Those tools can be useful and important, but they do not always need to load the same way on every page.

The cleanup moved third-party scripts away from hardcoded layout includes and toward conditional, settings-controlled loading.

That helped reduce unnecessary script execution on pages where those tools were not needed.

What I look for in this kind of audit

• Scripts hardcoded directly in theme.liquid
• App scripts loading globally when they only matter on some pages
• Marketing, chat, or tracking tools competing with the initial storefront load
• Duplicate script includes
• Old app code left behind after an app change
• Scripts that should be controlled by theme settings
• Scripts that can be delayed until after the critical storefront experience loads

The point is not that tools like Klaviyo, Gorgias, or Microsoft tracking are bad. The point is that storefront scripts should be loaded intentionally.

JavaScript payload reduction

The audited JavaScript payload changed substantially during cleanup.

That kind of reduction usually comes from a combination of changes, not one magic fix.

In this case, the cleanup focused on reducing unnecessary third-party script execution, removing or consolidating theme behavior, and making sure scripts were not loading globally without a reason.

Why this matters

Large JavaScript payloads can make a storefront harder to maintain and slower to interact with, especially on mobile.

Even when the visual page loads, too much JavaScript can affect:

Payload reduction is not only a performance task. It is also a maintainability task.

Delaying Gorgias without breaking support

Chat and support tools are useful, but they do not always need to be part of the first critical load.

For this cleanup, Gorgias loading was delayed so the storefront could prioritize the shopping experience first.

The goal was not to remove chat. The goal was to keep support available without letting the chatbot compete with product, cart, and layout behavior during the initial page experience.

This kind of change has to be handled carefully because support widgets often inject markup, styles, iframes, launchers, and event listeners into the page.

What I check before delaying a chat widget

Consolidating duplicate Add-to-Cart behavior

Another part of the cleanup involved consolidating duplicate Add-to-Cart behavior.

The theme had overlapping Add-to-Cart logic that needed to be unified. This required JavaScript updates, theme layout adjustments, and CSS refinements to support the final UI.

Duplicate Add-to-Cart logic is one of those issues that can create confusing bugs because multiple pieces of code may try to control the same buying action.

Symptoms this can create

For a Shopify store, Add to Cart is too important to leave duplicated or unclear.

Z-index and overlapping UI cleanup

The cleanup also included a z-index stack audit.

This matters because modern Shopify storefronts often have a lot of overlapping UI:

When the stacking context is inconsistent, customers may see UI elements covering each other, buttons becoming hard to tap, drawers appearing behind overlays, or chat widgets blocking important controls.

The cleanup established a more consistent stacking context so overlapping elements had clearer priority.

Tap target optimization

Mobile UX was another part of the cleanup.

Tap target improvements were added to increase the usable click/touch area of interactive elements.

This type of work is not flashy, but it matters. A customer should not have to precisely tap a tiny control to select an option, open a drawer, close a modal, or interact with product UI.

Small mobile UX problems can create real shopping friction.

Chatbot repositioning

The chatbot widget also needed repositioning.

The initial work adjusted the widget globally, and a follow-up refinement extended the cleanup to the product page. This likely addressed conflicts with PDP-specific UI such as a sticky Add-to-Cart bar or important product controls.

Chat widgets are a common source of small storefront conflicts on ecommerce sites. They are useful, but if they cover product options, sticky buttons, cart controls, or mobile navigation, they become part of the problem.

Image delivery fixes

The cleanup also included image delivery fixes.

Image delivery problems can show up in different ways: oversized images, inconsistent loading behavior, layout shifts, image quality issues, or images that are not being served in the most appropriate way for the page.

For a home decor brand, image quality matters, but so does delivery.

The goal is not to make images tiny at the expense of the product experience. The goal is to deliver the right image at the right size, in the right context, without making the storefront heavier than it needs to be.

Common problems this kind of cleanup can uncover

A Shopify theme cleanup like this can surface issues such as:

• Third-party scripts hardcoded into the theme
• Apps loading globally when they only matter on certain pages
• Chat widgets competing with critical page load
• Add-to-Cart behavior duplicated across multiple scripts
• Sticky cart UI conflicting with product page layout
• Z-index values scattered across theme files
• Mobile buttons or controls that are too small to tap comfortably
• JavaScript errors that interrupt other storefront behavior
• Old app or Shopify-generated assets sitting in version control
• Image delivery that adds unnecessary weight
• Theme files that have become hard to reason about after multiple rounds of fixes

These are not always obvious from a quick visual review. The store may look normal until you inspect how much the browser is being asked to load and execute.

What I would check before calling this cleanup done

For a cleanup like this, I would want to check:

The goal is not perfection. The goal is a storefront that is lighter, cleaner, and safer to maintain.

The bigger lesson

Performance work and cleanup work are often the same thing.

Reducing JavaScript payload is not only about load time. It is also about reducing complexity, removing unnecessary execution, and making it easier to understand which scripts are responsible for which storefront behaviors.

For this home decor brand, the cleanup reduced the audited JavaScript payload from about 4.9MB to 2.3MB, but the more important outcome was a theme that was less cluttered and easier to work on.

A cleaner theme makes future launches, app changes, design updates, and bug fixes less risky.

How Storefront Detox can help

Shopify Detox Scan is a lightweight first step if you are not sure how much script clutter or technical debt your storefront is carrying.

It can flag app bloat, console errors, cart/PDP risk, tracking clutter, keyboard and focus barriers, reflow or touch-target issues, and consent/privacy behavior before you commit to a deeper cleanup.

If the scan shows deeper risk, the next step may be a Shopify Rehab, Cleanup Sprint, or monthly reliability plan.