How to Reduce Unused JavaScript

What this means

Why it matters

How to fix it

1. 1

   Find exactly which scripts are unused

   Open Chrome DevTools, press Ctrl+Shift+P (Cmd+Shift+P on Mac), type "Coverage," and choose "Show Coverage." Reload the page and read the bars: the red portion is unused bytes. Sort by URL to see which bundles and third-party tags waste the most, so you focus instead of guessing. Cross-check against the "Reduce unused JavaScript" item in a Lighthouse or PageSpeed Insights run, which lists the same files with estimated savings.

2. 2

   Defer non-critical JavaScript

   Any script not needed to paint above-the-fold content should not block rendering. Add the defer attribute to your own scripts so they download in parallel and run after HTML parsing. Use async for independent third-party tags like analytics. Load tags that only matter after interaction (chat, surveys, some ad scripts) on first user interaction or when the page is idle. This doesn't remove the bytes, but it stops them from delaying LCP.

3. 3

   Code-split so each page loads only its own JS

   The biggest single win on most sites is splitting one giant bundle into per-route chunks, so a visitor to a blog post doesn't download the checkout code. Modern bundlers (webpack, Vite, esbuild, Rollup) do this with dynamic import(). Frameworks like Next.js, Nuxt, and Remix code-split by route automatically and support lazy loading for heavy components (charts, maps, video players) that aren't visible on load. Pair this with tree-shaking: import only the functions you use, for example import debounce from 'lodash/debounce' instead of the whole library.

4. 4

   Audit and cut third-party tags

   Third-party scripts are often the largest chunk of unused JS, and you don't control their internals, so the lever is deciding whether each tag earns its place. In Google Tag Manager or your tag setup, remove tags you no longer use and set triggers so tags fire only on pages that need them rather than site-wide. Load a chat widget or heatmap tool only where it matters or on first interaction. Each removed vendor script removes its full download, parse, and execution cost.

5. 5

   On WordPress, dequeue per-page plugin assets and defer via a caching plugin

   Many WordPress plugins enqueue their JavaScript on every page even when the feature appears on only one. Use Perfmatters or Asset CleanUp to dequeue scripts on pages that don't use them (for example, disable a contact-form script everywhere except the contact page). A caching or optimization plugin such as WP Rocket, LiteSpeed Cache, or the free FlyingPress can defer JavaScript and delay non-critical scripts until interaction. Delete plugins you've deactivated but left installed, and prefer lightweight themes that don't load a page builder's full runtime everywhere.

6. 6

   Re-test and confirm the savings

   After each change, re-run PageSpeed Insights and re-check the Coverage tab to confirm unused bytes dropped and LCP and INP improved. Test on a throttled mobile profile, since that's where excess JS hurts most and how Google's field data is weighted. Deferring or removing a script can break functionality, so click through interactive elements (menus, forms, sliders) before shipping. Lab tools confirm the fix immediately; the Core Web Vitals report in Search Console uses a rolling 28-day window, so field metrics catch up over time.

Example

<!-- BEFORE: blocking, ships on every page, runs before the page can render -->
<script src="/js/app.bundle.js"></script>

<!-- AFTER: defer non-critical JS so it doesn't delay LCP -->
<script src="/js/app.bundle.js" defer></script>
<script src="https://www.googletagmanager.com/gtag/js?id=GA_ID" async></script>

<!-- Code-split: load a heavy widget only when it enters the viewport -->
<div id="map" data-map></div>
<script type="module">
  const el = document.querySelector('[data-map]');
  const io = new IntersectionObserver(async (entries) => {
    if (entries[0].isIntersecting) {
      const { initMap } = await import('/js/map.js'); // separate chunk
      initMap(el);
      io.disconnect();
    }
  });
  io.observe(el);
</script>

Defer your own scripts and lazy-load a heavy component only when it's needed, instead of shipping everything in one blocking bundle.

Platform-specific steps

Frequently asked