Home > Web Vitals > Performance > Unused JavaScript

Reduce Unused JavaScript

Last updated July 24, 2025

When your Lighthouse report shows the warning “Reduce unused JavaScript” with an estimated savings like “129 KiB”, it means your page is downloading JavaScript that isn't used during the initial load. This adds unnecessary weight, delays interactivity, and hurts your Core Web Vitals — especially on mobile or slow connections.

What It Means

This audit checks how much of your JavaScript is actually executed during page load. If large portions are unused, Lighthouse flags them as wasteful. This doesn't necessarily mean they're never used — but that they aren't needed upfront, and should be loaded later or eliminated entirely.

Why It Matters (UX and SEO Impact)

Reducing unused JavaScript improves:

  • First Contentful Paint (FCP) — by unblocking rendering
  • Time to Interactive (TTI) — by minimizing main-thread blocking
  • Largest Contentful Paint (LCP) — by speeding up content visibility
  • Cumulative Layout Shift (CLS) — by loading layout scripts in sync

Google considers performance a ranking signal. A bloated JavaScript bundle leads to slower user experiences and worse SEO rankings — especially on mobile-first indexing.

Common Causes of Unused JavaScript

  • Bundling entire libraries or frameworks (like lodash, moment.js) without tree-shaking
  • Loading third-party scripts that aren’t immediately needed (e.g. chat widgets, social feeds)
  • Using frameworks (React, Angular) without code-splitting
  • Copy-pasting unused JavaScript from templates or plugins
  • Shipping polyfills for outdated browsers that aren’t in use

How Lighthouse Measures Unused JavaScript

Lighthouse uses Chrome DevTools protocol to analyze script execution coverage during the page load. For each JS file, it checks how many bytes were parsed and how many were actually executed.

The audit result shows the URL of the script, the % of unused bytes, and the estimated savings. You can hover over the files in the report to see the exact bytes unused.

    

  1. {
    2. 

  2.   url: "https://example.com/assets/app.bundle.js",
    3. 

  3.   totalBytes: 200000,
    4. 

  4.   wastedBytes: 129000,
    5. 

  5.   wastedPercent: 64.5
    6. 

  6. }
    7.

What Is a Good Score?

This audit does not have a numeric score scale, but Lighthouse marks it as “Passed” if:

  • Most scripts are used within the first interaction window
  • There’s no significant byte waste in your bundle

If estimated savings are more than ~70 KiB, it will likely trigger a red or orange warning.

How to Fix and Reduce Unused JavaScript

1. Tree-shake and optimize your JavaScript bundles

Ensure your build tools (Webpack, Rollup, Vite) remove dead code. Use ES6 import/export syntax instead of require() or global scripts.

    

  1. // Good: tree-shakable
    2. 

  2. import { format } from 'date-fns';
  3. // Bad: imports everything
    4. 

  4. import * as moment from 'moment';
    5.

2. Lazy-load non-critical scripts

Defer loading scripts until they are needed — like below the fold widgets, chatboxes, or modals.

  • Use type="module" and async/defer attributes
  • Load via requestIdleCallback or IntersectionObserver
    

  1. <script src="chat-widget.js" defer></script>
    2.

3. Split code by route or component

Use code-splitting to load only the necessary code per page or feature. Tools like Webpack’s dynamic imports or React’s React.lazy() can help.

    

  1. const ChatBox = React.lazy(() => import('./ChatBox'));
    2.

4. Self-host only what you need

Third-party scripts like analytics, chat, or A/B testing tools can be huge. Audit whether they’re critical, and consider:

  • Loading them on interaction only
  • Using lighter alternatives (e.g., Plausible instead of GA4)
  • Self-hosting to control when and how they load

5. Minify and compress JavaScript

Always minify your JS using tools like Terser or esbuild. Then compress using GZIP or Brotli at the server level.

  • IIS: Enable dynamic compression in web.config
  • Apache: Use mod_deflate or mod_brotli
  • Nginx: Enable gzip and brotli modules
    

  1. <staticContent>
    2. 

  2.   <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" />
    3. 

  3. </staticContent>
    4.

6. Remove legacy code and unused plugins

Audit your codebase for leftover jQuery plugins, outdated UI components, or disabled tracking scripts that still load. Tools like Chrome DevTools “Coverage” tab or Lighthouse can highlight unused code paths.

How to Monitor Continuously

With Testdom.io, you can automate performance audits and get alerts whenever unused JavaScript grows unexpectedly. Testdom’s dashboard highlights problematic bundles and tracks their byte usage over time.

Enable CI/CD integration to catch regressions before they hit production, and use the Web Vitals graph to correlate script weight with LCP, TTI, and FCP trends.

Example: Monitoring JS Coverage

Here’s how to measure unused JavaScript via code using the web-vitals library or PerformanceObserver:

    

  1. new PerformanceObserver((entryList) => {
    2. 

  2.   for (const entry of entryList.getEntries()) {
    3. 

  3.     if (entry.entryType === 'longtask') {
    4. 

  4.       console.log('Long Task:', entry.duration);
    5. 

  5.     }
    6. 

  6.   }
    7. 

  7. }).observe({ type: 'longtask', buffered: true });
    8.

Summary

Reducing unused JavaScript is one of the fastest ways to improve page speed and Lighthouse performance scores. By trimming, deferring, and splitting your scripts — and pairing with compression and monitoring — you can keep your frontend fast and lean.

Next steps:

  • Enable Testdom.io monitoring on key URLs
  • Use Chrome DevTools “Coverage” panel to find unused code
  • Refactor your scripts for modularity and lazy-loading