Lighthouse Performance Budget Calculator

A performance budget is a set of limits for metrics that affect page load time and user experience. It acts as a guardrail: when a build exceeds the budget, CI fails and you must optimize before shipping. Budgets prevent 'performance creep' where small additions gradually degrade performance. You can set budgets for JavaScript size, CSS size, image size, total page weight, and timing metrics like FCP and LCP. Lighthouse CLI and webpack-budget-plugin can enforce these automatically.

Green (90-100): Excellent performance. Achievable for most sites with good practices. Aim for 90+ on Performance and SEO. Yellow (50-89): Needs improvement. Users on slow devices or connections will notice. Red (0-49): Poor. Significant impact on conversion and user retention. Google uses page experience signals (which include Core Web Vitals) as ranking factors. A score of 90+ Performance typically means passing all Core Web Vitals (LCP < 2.5s, FID < 100ms, CLS < 0.1).

LCP (Largest Contentful Paint): Measures loading performance. Good: < 2.5s, Needs improvement: 2.5-4s, Poor: > 4s. FID (First Input Delay, being replaced by INP): Measures interactivity. Good: < 100ms, Poor: > 300ms. INP (Interaction to Next Paint): New standard. Good: < 200ms. CLS (Cumulative Layout Shift): Measures visual stability. Good: < 0.1, Poor: > 0.25. FCP (First Contentful Paint): Good: < 1.8s. TTI (Time to Interactive): Good: < 3.8s.

Several approaches: 1) Lighthouse CI — run lighthouse in CI and fail on budget violations. Install: npm i -g @lhci/cli. Configure: lighthouserc.json with budgets array. 2) webpack performance hints — set performance.maxAssetSize in webpack config. 3) bundlesize npm package — define size limits in package.json. 4) Vite rollup options — set chunkSizeWarningLimit. 5) Next.js built-in — Next reports bundle size changes in the build output. The most comprehensive approach is Lighthouse CI running against a staging deployment.

JavaScript is the most expensive resource per byte: it must be downloaded, parsed, compiled, and executed — each step blocks the main thread. A 100KB gzip JS file might take 1-2 seconds to process on a mid-range mobile device. Images and CSS are faster to process. Key JS optimizations: code splitting (load only what's needed), tree-shaking (remove dead code), defer non-critical scripts, use web workers for heavy computation, and replace large libraries with smaller alternatives.