Shopify Legacy JavaScript: Fix the PageSpeed Warning (2026)

Quick Fix with Thunder

What Legacy JavaScript Means for Performance

Legacy JavaScript typically refers to ES5 code with polyfills and transformations designed for Internet Explorer and old mobile browsers. Modern browsers can run ES2015+ (ES6+) syntax natively — arrow functions, const/let, classes, modules — without transpilation. When they get ES5 bundles instead, they waste time parsing larger, slower code.

The size difference is significant. A typical modern JavaScript bundle might be 40-60KB smaller than its ES5 equivalent because it skips polyfills for features like Promise, Array.includes, and Object.assign that modern browsers already support. The parsing time difference is even more important because ES5 syntax is more verbose and harder for engines to optimize.

Chrome's legacy JavaScript documentation shows how to serve modern bundles to modern browsers. On Shopify, the challenge is that themes control some JavaScript but apps control the rest, and vendors make their own bundle decisions.

What Shopify Merchants Can and Can't Control

This is why many Shopify stores see legacy JavaScript warnings even after optimizing their theme code. Apps like reviews, chat widgets, analytics tools, and subscription services often ship one bundle for all browsers, choosing compatibility over performance.

Step 1: Audit Which Scripts Trigger the Warning

Run PageSpeed Insights and open the "Avoid serving legacy JavaScript to modern browsers" diagnostic. Group the flagged URLs by domain: your theme assets (cdn.shopify.com), app scripts, and third-party services. Focus optimization effort on theme assets first since those are yours to rewrite.

Look for patterns in the app scripts. If multiple scripts from the same vendor appear, check if that app has updates or alternatives. If old jQuery libraries or polyfill.io bundles appear, those might be removable through theme cleanup rather than app changes.

For context about overall JavaScript load, also review unused JavaScript removal and main-thread work reduction to see if script volume is a bigger issue than legacy syntax.

Step 2: Update Theme Build Configuration

If your theme uses a build process (Webpack, Vite, or similar), check the Browserslist configuration. Many Shopify themes still target IE11 by default, which forces transpilation to ES5 even though IE usage is negligible in 2026:

// Before: .browserslistrc includes old browsers
defaults
IE 11
> 1%
last 2 versions

// After: modern browsers only (95%+ coverage)
> 0.5%
not IE 11
not op_mini all
last 2 versions
Chrome >= 60
Safari >= 11
Firefox >= 55

Check your analytics first. Most Shopify stores see <1% IE traffic in 2026. Update your build targets to match your actual user base rather than supporting browsers that don't exist in your data.

Step 3: Implement Module/Nomodule for Theme JavaScript

The module/nomodule pattern serves modern ES2015+ code to modern browsers and falls back to ES5 for legacy browsers. This gives you compatibility safety with performance benefits for 95%+ of users:

<!-- theme.liquid -->
<!-- Modern bundle for modern browsers -->
<script type="module" src="{{ 'theme.modern.js' | asset_url }}"></script>

<!-- Fallback bundle for IE and old browsers -->
<script nomodule src="{{ 'theme.legacy.js' | asset_url }}"></script>

Build both versions from the same source with different targets. Modern browsers get smaller, faster ES2015+ code. Old browsers get the full ES5 bundle with polyfills. The performance difference can be 30-50KB and significantly faster parsing.

// webpack.config.js example
module.exports = [
  {
    // Modern build
    entry: './src/theme.js',
    output: {
      filename: 'theme.modern.js',
      environment: {
        module: true,
        arrow: true,
        const: true,
      },
    },
    target: ['web', 'es2015'],
  },
  {
    // Legacy build
    entry: './src/theme.js',
    output: {
      filename: 'theme.legacy.js',
    },
    target: ['web', 'es5'],
    module: {
      rules: [{
        test: /.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', {
              useBuiltIns: 'usage',
              corejs: 3,
            }]],
          },
        },
      }],
    },
  },
];

Step 4: Replace Legacy Dependencies

Older Shopify themes often include jQuery, Lodash, or polyfill libraries that add ES5 overhead. Replace these with modern alternatives or native browser APIs where possible:

// Before: jQuery and polyfills
<script src="https://polyfill.io/v3/polyfill.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

// After: Native APIs for modern browsers
// querySelector instead of $(selector)
document.querySelector('.mobile-nav-toggle')

// fetch instead of $.ajax
fetch('/cart/add.js', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({id: variantId, quantity: 1})
})

// addEventListener instead of $(document).ready()
document.addEventListener('DOMContentLoaded', function() {
  // Theme initialization
});

This removes the largest legacy JavaScript dependencies while keeping functionality intact. For complete jQuery migration, see the JavaScript optimization guide for modern alternatives.

Step 5: Choose Apps That Ship Modern JavaScript

When evaluating new apps, check if they mention modern JavaScript support or ES6+ bundles. Well-maintained apps often ship multiple bundles or use dynamic imports to reduce legacy overhead. Apps that haven't updated build configurations in years are more likely to ship large ES5 bundles unnecessarily.

For existing apps, check if settings allow you to disable legacy browser support or reduce polyfill inclusion. Some review, chat, and analytics tools provide configuration options for modern-only mode when they detect your traffic patterns don't require IE support.

See our app speed impact research and apps that slow down your store for guidance on choosing performance-focused app alternatives.

Manual Fix vs Thunder Fix

Browser Support and Analytics Review

Before making legacy JavaScript changes, review your store's browser analytics for the last 6 months. Look at Internet Explorer usage, old Android browser versions, and very outdated Safari/Chrome versions. If these represent <2% of your traffic, you can safely serve modern JavaScript to 98%+ of visitors.

For the remaining legacy browser users, provide a functional but simpler experience rather than forcing 98% of users to download slower code. Basic functionality — viewing products, adding to cart, checkout — works fine without complex JavaScript enhancements.

The unminified JavaScript audit often appears alongside legacy JavaScript warnings, indicating general bundle optimization opportunities beyond just ES5 vs modern syntax.

Related JavaScript Optimization Issues

Legacy JavaScript warnings often accompany other script performance problems. Check render-blocking JavaScript, large bundle sizes, and Total Blocking Time warnings that often share the same root causes.

For comprehensive JavaScript cleanup beyond legacy syntax, see the complete Shopify speed optimization guide. For automated script optimization instead of manual bundle rewriting, check Thunder's features or current pricing.

FAQ