Avoid serving legacy JavaScript to modern browsers

The "Avoid serving legacy JavaScript to modern browsers" Lighthouse audit checks if your website is serving legacy JavaScript to modern browsers.

What does "Avoid serving legacy JavaScript to modern browsers" mean?

If your JavaScript code is using polyfills or certain types of transforms, like some found within Babel for example, you may be serving unnecessary code to modern browsers.

Unnecessary code means:

• More bytes for your users to download
• More JavaScript to parse and execute
• More potential for bugs and compatibility issues

When you run Lighthouse, whether that's through Chrome DevTools, the Lighthouse CLI, a CI/CD pipeline, or a monitoring tool like DebugBear, you'll see a warning if your website is serving legacy JavaScript to modern browsers.

How is "Avoid serving legacy JavaScript to modern browsers" calculated?

The audit scans your JavaScript files looking for two things: polyfills and transforms.

• Polyfills are pieces of code that add missing features to older browsers.
• Transforms are changes made to modern JavaScript to make it work in older browsers.

When Lighthouse finds these, it calculates how many bytes they add to your website.

For polyfills, it uses a database of known polyfill sizes. For transforms, it counts patterns that appear when modern JavaScript classes are converted to work in older browsers. The audit then shows you how much data you could save by removing this legacy code. Modern browsers already support these features natively, so including this code is unnecessary.

How to fix the "Avoid serving legacy JavaScript to modern browsers" audit

Use this JavaScript loading technique to serve the right code to each browser:

1. Use modern build tools - Tools like Webpack, Rollup, or Vite can create separate bundles: one for modern browsers and one for legacy browsers.

2. Use the module/nomodule pattern:

   <!-- Modern browsers -->
   <script type="module" src="modern.js"></script>
   
   <!-- Legacy browsers -->
   <script nomodule src="legacy.js"></script>
   

   This pattern allows modern browsers to load the modern.js file, while legacy browsers will load the legacy.js file.

How to check if you are serving legacy JavaScript

The Lighthouse audit will show you if you are serving legacy JavaScript, but you can also check manually.

1. Run Lighthouse - Use Chrome DevTools (Lighthouse tab) or run a free website speed test in DebugBear to see if you have the legacy JavaScript warning.

2. Analyze your bundle - Use tools to examine your JavaScript, for example, Webpack Bundle Analyzer.

3. Check your build configuration - Review your webpack or babel configs for unnecessary polyfills.

Go ahead and sign up for a free DebugBear trial. You'll be able to run Lighthouse audits continuously and get alerts when your website performance changes.

Monitor Page Speed & Core Web Vitals

DebugBear monitoring includes:

• In-depth Page Speed Reports
• Automated Recommendations
• Real User Analytics Data

Start Free TrialGo To App