How JavaScript bundle size affects Time to Interactive

JavaScript and Time to Interactive

Every kilobyte of JavaScript is more expensive than the same kilobyte of images because JS must be downloaded, parsed, compiled, and executed before the page is interactive. Images only need downloading and decoding.

On a median Android phone, 1MB of JavaScript takes roughly:

• ~1.5s to download on a 4G connection

• ~1.5–2s to parse and compile

• ~0.5–1s to execute

Total: ~4–5 seconds just for the JS, before any application logic renders content. This is why Time to Interactive (TTI) and Total Blocking Time (TBT) suffer most from large bundles.

Find unused JavaScript with the Coverage tab in DevTools (Cmd+Shift+P → Coverage):

// After opening Coverage tab and recording a page load:
// Red = unused bytes. Aim for < 20% unused on initial load.

// You can also get a programmatic overview:
performance.getEntriesByType('resource')
  .filter(r => r.initiatorType === 'script')
  .map(r => ({ name: r.name, size: r.transferSize }))
  .sort((a, b) => b.size - a.size);

The Coverage tab will show you exactly which functions in your bundle were never called during the recorded session. Those functions are candidates for code splitting or removal.

Budget recommendation: keep initial JS under 200KB (compressed) for a good TTI on median hardware. Use Bundlephobia (bundlephobia.com) before adding any npm package to check its cost.