Unused JavaScript: Main Thread Poison
Every kilobyte of JavaScript that the browser must parse and execute delays rendering. Unused JS doesn't just bloat download size — it blocks the main thread from responding to user interactions, directly increasing your INP and LCP Core Web Vitals scores.
4 Techniques to Shrink Your JS Payload
Tree Shaking
Enable tree shaking in your bundler (default in Webpack/Vite production builds). Ensure all imports use named exports (import { function } from 'lib'), not whole-module imports (import * from 'lib'). Switch all dependencies to ES module builds.
Code Splitting & Dynamic Imports
Use dynamic imports for heavy components loaded below the fold or only on user interaction. In Next.js: const Modal = dynamic(() => import("../components/Modal"), { ssr: false }). Prevents modal/chart/editor code from blocking the initial page render.
Defer & Async Script Loading
Add defer to all non-critical scripts (analytics, chat widgets, A/B test scripts). Use async for scripts that don't depend on DOM order. Move scripts to end of <body> when defer isn't available. Never load third-party scripts synchronously in <head>.
Audit Third-Party Scripts
Third-party scripts (HubSpot, Intercom, FullStory, AB Tasty, Hotjar) often add 50-300KB of JavaScript. Audit every third-party script's impact with Lighthouse. Load non-critical scripts only after the main page interaction using Intersection Observer or setTimeout.
Murkuz AI SEO Scorecard
No Render-Blocking JS
All third-party and non-critical scripts use defer or async attributes. No synchronous scripts in <head>.
Bundle Efficiency
Lighthouse 'Remove Unused JavaScript' audit shows < 20KB of savings after optimization.
Code Splitting
Heavy page-specific components (charts, modals, editors) loaded via dynamic import — not in the initial bundle.
Frequently Asked Questions
How does unused JavaScript affect SEO?
Unused JavaScript harms SEO through two primary mechanisms. First, JavaScript parsing, compilation, and execution runs on the browser's main thread — the same thread responsible for rendering. Large JS payloads block the main thread, directly increasing INP (Interaction to Next Paint) — a confirmed Core Web Vitals ranking signal. Second, large render-blocking JS increases the time to first meaningful paint, raising LCP. Every kilobyte of JavaScript that must be downloaded, parsed, and compiled before the page becomes interactive adds latency to Core Web Vitals metrics that Google uses to rank pages.
What is 'tree shaking' and how does it remove unused JavaScript?
Tree shaking is a dead code elimination technique performed by modern JavaScript bundlers (Webpack, Rollup, Vite, esbuild). It analyzes your import/export statements statically and removes any exported functions, classes, or variables that are never imported (i.e., 'dead branches'). For this to work correctly: (1) Your code must use ES modules (import/export), not CommonJS (require), (2) The npm packages you import must have sideEffects: false in their package.json, (3) Your build tool must have tree shaking enabled (default in Webpack production mode and all Vite builds).
What is code splitting and how is it different from tree shaking?
Tree shaking removes code that is never used anywhere in your app. Code splitting divides your code into multiple smaller bundles that are loaded on demand — so code that is used in your app but not needed on the initial page load is deferred until the user navigates to the relevant feature. In Next.js, code splitting happens automatically at the page level. For component-level splitting, use a dynamic import, for example dynamic(() => import("../components/HeavyChart")). This prevents heavy components from contributing to the initial page's JavaScript payload.
How do I audit my JavaScript for unused code?
Use Chrome DevTools → Coverage tab (Ctrl+Shift+P → 'Show Coverage') to record a page load and see the percentage of each JS file's bytes that are actually executed. Files with >50% unused bytes are prime candidates for tree shaking or deferred loading. The Lighthouse 'Remove Unused JavaScript' audit also provides a specific list of scripts with estimated savings in kilobytes. For bundle analysis, use webpack-bundle-analyzer or Vite's built-in rollup-plugin-visualizer to visualize which packages dominate your bundle.
Written by Junaid Khalid