JavaScript Cost

Every kilobyte of JavaScript costs download, parse, execution, and battery — justify each one.

01 — Purpose

JavaScript has real cost

Users pay for every script through download, parse, execution, and battery — justify each kilobyte.

JavaScript is the only asset that blocks the main thread by default. Oversized bundles, duplicate dependencies, and framework overhead show up as slow interaction and poor INP — not only slow first load.

See JavaScript standard and performance standard for team expectations.

02 — Principles

Every kilobyte should earn its place

The fastest JavaScript is the JavaScript never shipped.

  • progressive enhancement — baseline works without script
  • ship behaviour per page or feature — not one global bundle for everything
  • prefer platform APIs and native HTML before libraries

03 — Practice

Keep cost under control

Split, lazy-load, and delete.

  • code splitting and dynamic import() for routes and heavy widgets
  • audit dependencies — replace 200KB helpers with ten lines where sensible
  • tree-shake and measure production bundles — not dev server guesses
  • defer non-critical third-party scripts — analytics, chat, ads
  • per-page script modules — see JS module architecture

04 — Problems

Common JavaScript bloat

Oversized bundles and hydration tax are predictable — and preventable.

  • importing entire icon or utility libraries for three functions
  • duplicate React/Vue versions in one page from micro-frontends
  • client rendering content that could be static HTML
  • unnecessary hydration — see hydration costs

05 — Close

Measure on real hardware

Mid-range phones on 4G expose bloat that M3 Macs hide.

Set JavaScript budgets per template. Block merges that exceed them without explicit approval. Profile long tasks in DevTools during interaction, not only at load.

Related: Core Web Vitals, performance review checklist.