Tree Shaking

Tree shaking is a build-time optimization that removes unused code from JavaScript bundles before they ship to the browser.

The name comes from the idea of shaking a dependency tree so the dead branches fall off. Modern bundlers such as webpack, Rollup, and esbuild analyze which exports a module actually uses and drop the rest. If you import one function from a library but never call the other fifty, tree shaking keeps only what is referenced. This relies on ES module syntax (static import and export), because static structure lets the bundler trace usage reliably; older CommonJS require calls are harder to analyze.

The SEO relevance is indirect but real. Smaller JavaScript bundles mean less code to download, parse, and execute, which improves loading and interactivity. That feeds directly into Core Web Vitals: less main-thread work helps Interaction to Next Paint, and lighter payloads help render content sooner. For JavaScript-heavy sites, trimming dead code is one of the cheaper performance wins because it removes weight without changing behavior.

Tree shaking sits alongside related techniques like code splitting (loading code only when needed) and minification (stripping whitespace and shortening names). Together they reduce the amount of script a page must process before it becomes responsive, which matters for both user experience and how efficiently Google's rendering service handles the page.

Related: INP: Interaction to Next Paint, JavaScript SEO and rendering guide, WRS