How to Remove Unused JavaScript and Instantly Speed Up Your Shopify Store

📌 Table of Contents

• Why Unused JavaScript kills your Conversions

• What Counts as “Unused” JavaScript?

• How Unused JS Hurts Page Speed, SEO & Revenue

• How to Find and Measure JavaScript Bloat

• How to Remove Unused JavaScript – Step by Step

• Case Study: Increase Shopify Store Speed by reducing unused javascript

• Future-Proof: Best Practices for Managing JavaScript

• FAQs

• Watch: Full Walkthrough Video

• Need Help? Get Expert Optimization

Why Unused JavaScript kills your Conversions

Every extra byte of unused code slows down your eCommerce store. That means fewer conversions, worse SEO, and frustrated users - especially on mobile.

Here’s what the data says:

• A 100ms delay reduces conversions by 7%

• 53% of users abandon mobile sites that take longer than 3 seconds

• Each extra second can drop conversions by 12%

By removing unused JavaScript, you instantly boost speed, Core Web Vitals, and ultimately sales.

What Counts as “Unused” JavaScript?

Unused JavaScript refers to scripts that are loaded by the browser but never executed. These scripts increase download size, CPU usage, and memory consumption - without any benefit.

🔍 Common Culprits

• Old features left behind after redesigns

• Third-party scripts loading excess code

• Libraries where you only use 1% of functionality

• Plugins and apps running unused functionality

• Conditional code triggered rarely (or never)

Example in Chrome DevTools Coverage

Use DevTools' "Coverage" tab to visualize this. Red = unused code.

How Unused JavaScript Hurts Your Store

⚡Performance

• Slows First Input Delay (FID) and Time to Interactive (TTI)

• Creates render-blocking issues

  
  

📉 Core Web Vitals and SEO

• Poor Core Web Vitals (LCP, FID, CLS)

• Wasted crawl budget

• Decreases indexing efficiency

  
  

  Want a deeper dive into improving Core Web Vitals specifically for Shopify? Check out my blog post How to Improve Your Shopify Store's Core Web Vitals Score and Boost Sales or my video tutorial on how to improve your Shopify store's Core Web Vitals score - packed with actionable tips.

🧠 UX & Security

• Laggy interactions = higher bounce rates

• Larger attack surface = higher vulnerability

• Instability = poor user trust

How to Find Unused JavaScript on Your Site

🔧 Tools to Use

1. Chrome DevTools → Coverage tab

2. Google Lighthouse / PageSpeed Insights

   • Look for: Remove unused JavaScript

3. WebPageTest (advanced resource waterfall and CPU time)

How to Remove Unused JavaScript in Shopify Step-by-Step (Without Breaking Your Store)

“Remove unused JavaScript” - this is one of the most common speed test errors you'll get with any Shopify store. But what does it actually mean? And why would your store load JavaScript that it doesn't even need?

Google’s PageSpeed Insights gives a full explanation of this error. It also tells you to check the Coverage tab in your browser’s developer tools, where you can see how much of a script file is actually used. But here’s the thing: going line by line to identify unused portions is overly simplistic.

In many cases, you won’t even have access to those files.

Why This Error “Remove unused JavaScript” is So Hard to Fix

Many app scripts are hosted externally - on the app’s own servers. And for the scripts you can edit, you’d need to fully understand the code and its role before making any changes. That’s a risky and time-consuming task.

So what can you do without breaking your theme’s functionality?

Let’s go through it, step by step, starting with the easiest fixes.

1. Remove Leftover Code from Uninstalled Apps

If you’ve ever uninstalled a Shopify app, chances are it left behind some code. Some apps inject dependencies directly into your theme files - JavaScript, CSS, snippet includes, and more.

To remove them:

• Open your theme.liquid file.

• Search for any mentions of old app scripts.

• For example, if you uninstalled Yotpo but still see a Yotpo script, you should remove it.

• Not sure if an app is still installed? Go to the Apps section in your Shopify admin and check.

• Some scripts might belong to apps listed as Sales Channels, so check there too.

2. Lazy Load App Scripts (When Possible)

Even if all the scripts are in use, Google may still flag them as “unused” because they weren’t needed at the exact moment the test ran.

Remember: Google cares about how fast core content loads. And from a user’s perspective, that’s a good thing. You want your site to load quickly and be usable right away - even if some scripts finish loading later.

So how do we optimize for that?

First, pick your apps wisely. If an app doesn’t create value (read: more sales), ditch it.

But if you do need it, ask yourself:

• Does its widget need to show immediately?

• Can it load after the store’s main content?

In many cases, the answer is yes. That’s where lazy loading comes in.

How to Lazy Load a Script

1. Open theme.liquid.

2. Search for the app script.

3. Add a defer attribute to the <script> tag.

Example:

htmlCopyEdit<script defer src="https://example.com/app.js"></script>

The defer attribute tells the browser: “Load this script after the page content loads.”

Check your site. If the app still works, you’re good. If not, try using the async attribute instead.

htmlCopyEdit<script async src="https://example.com/app.js"></script>

async loads the script in parallel with the rest of the page - without blocking rendering.

By default, Shopify doesn’t lazy load app scripts - so they load right away, whether they’re needed or not. This slows down your First Contentful Paint (FCP) and tanks your PageSpeed score.

That’s why I built a simple copy-and-paste Lazy Loading code - it automatically lazy loads the app scripts that are holding down your store speed.

You can learn more or grab the code here: 👉 shopioso.com

Still getting errors in your speed test? Move on to the next step.

3. Manually Inject App Scripts on User Interaction

If the script isn’t visible in theme.liquid, it’s probably being injected automatically by the app.

Here’s what to do:

1. Open theme.liquid.

2. Find the {% content_for_header %} tag.

3. Use Liquid logic to:

   • Capture content_for_header

   • Remove the unwanted script

   • Save the modified version

How to find the script URL:

• Go to your store

• Right-click → Inspect

• Look inside the <head> tag

• Expand inline scripts

• Look for an async function and locate the script URL

Once you’ve removed the script, the app should stop working. If not, check if the app has a toggle switch in the Customize → Apps dashboard. Disable it.

Now you can manually inject the script upon user interaction (like scroll, click, or keypress). This ensures the script only loads after the user starts engaging with your site.

4. Lazy Load Shopify's Own Scripts

It’s not just third-party apps - even Shopify itself injects scripts that may be flagged as unused.

One example: the dynamic checkout button script. If you enable dynamic buttons under the “Add to Cart” button, this script gets loaded. It can slow your store down a lot.

Ask yourself: Are your customers actually using this feature?

• If not, disable it.

• If yes, apply the same lazy-load technique.

Steps:

1. Find the script.

2. Remove it from content_for_header in theme.liquid.

3. Use JavaScript to re-inject it only after human interaction (just like we did with app scripts).

5. Test Everything

Use Lighthouse, WebPageTest, and monitoring tools.

Final Thoughts

These are three solid ways to reduce unused JavaScript errors in your Shopify speed tests:

1. Remove leftover code from uninstalled apps

2. Lazy load scripts using defer or async

3. Manually control script injection on user interaction

⚠️ Important: Always test changes on a copy of your theme before publishing anything live. Make sure all apps and scripts still work properly.

For a more in-depth, step-by-step tutorial, check out my video: Reduce Unused JavaScript & Increase Your Page Speed Score | Shopify Speed Optimization. I’ll walk you through the entire process with real examples and give you the exact steps to follow to optimize your store.

Need help identifying or fixing unused JavaScript or other speed issues? Let me optimize and monitor your Shopify store’s speed, so you get faster load times, higher conversions, and more revenue.

Case Study: Faster Website after they removed unused JavaScript

How The Economic Times Improved Core Web Vitals by Removing Unused JavaScript

Challenge:
The Economic Times, with over 45M monthly users, was failing Core Web Vitals, with slow LCP and high layout shifts.

Key Fix:
They deferred and removed unused JavaScript, breaking up long tasks and prioritizing content over third-party scripts (like analytics). This drastically reduced main-thread blocking and improved responsiveness.

Results:

• LCP improved from 4.5s → 2.5s

• CLS improved by 250%

• FID dropped from 200ms → 44ms

• Bounce rate reduced by 43%

• ✅ Passed all Core Web Vitals thresholds

Source:

• Curious how we consistently get Shopify stores to load in under 3 seconds? Read our detailed Shopify speed optimization guide with real examples and step-by-step improvements.

Best Practices to Future-Proof JavaScript

• Set a JS Performance Budget: <250KB total

• Audit Quarterly: Especially after new apps/plugins

• Train Your Team: Educate developers on best practices

• Monitor Core Web Vitals: Use Google Search Console + RUM tools

FAQs

🕵️ How often should I audit unused JavaScript?

At least once per quarter, or after any major update or plugin install.

🔥 Is it safe to delete all unused JS?

No - some may be conditionally used. Test in staging first.

🛠 Best tools for Shopify?

• Chrome DevTools Coverage

• PageSpeed Insights

Watch: Step-by-Step Video Tutorial

Watch our full video breakdown on how to remove unused JavaScript from your Shopify or WooCommerce store:
👉 Watch the YouTube Tutorial

Need Help? Get Our Speed Boost Service

Don’t have time to dig through code?→ Let me optimize and monitor your Shopify store’s speed, so you get faster load times, higher conversions, and more revenue.