How to Reduce JavaScript Bundle Size and Speed Up Your Site

Large JavaScript bundles are the number one cause of poor interactivity scores. Here is how to find bloated code and cut it down.

Why JavaScript bundle size matters

JavaScript is the most expensive type of resource on a web page. Unlike images, which are decoded once and displayed, JavaScript must be downloaded, parsed, compiled, and executed. A 500KB JavaScript file takes far longer to become interactive than a 500KB image.

Large JavaScript bundles are the primary cause of:

High Total Blocking Time (TBT)

Poor Interaction to Next Paint (INP)

Low performance scores on mobile devices

Finding your bundle size problem

In Chrome DevTools:

1. Open DevTools and go to the Coverage tab (Ctrl+Shift+P → "Coverage").

2. Click the record button and reload the page.

3. Look for large JavaScript files with high percentages of unused code (red bars).

In Lighthouse:

The "Reduce unused JavaScript" and "Reduce unused CSS" audits in PageSpeed Insights show exactly which files have the most unused code and how much it weighs.

Common causes of bundle bloat

Importing entire libraries when you need one function:

```javascript

// Slow — imports the entire lodash library

import _ from 'lodash';

// Fast — imports only the function you need

import debounce from 'lodash/debounce';

```

Large UI component libraries loaded fully:

Importing all of a UI framework (Material UI, Ant Design) when you use five components adds hundreds of kilobytes. Use tree-shaking or import components individually.

Unused npm packages:

Run npx depcheck to find packages installed but never imported. Remove them.

Polyfills for modern browsers:

Many build tools include polyfills for Internet Explorer and other legacy browsers by default. If your audience is modern, configure your build tool (Babel, webpack) to target only the browsers you support.

Code splitting

Code splitting means breaking one large bundle into multiple smaller bundles that load on demand. Instead of loading all your application code upfront, you load only what is needed for the current page.

In Next.js, code splitting happens automatically per page. In React, use React.lazy() and Suspense to split at the component level.

Measuring improvement

After making bundle size changes, run a Loadzen check and look specifically at:

Total Blocking Time — should decrease as less JavaScript blocks the main thread

Your overall performance score — bundle size improvements compound with other fixes

For sites with large JavaScript payloads (500KB+), this is often the highest-impact single change available.