Performance budgets are targets you set before building that define the maximum acceptable values for key metrics. Without them, performance degrades incrementally — each feature adds 10KB, each third-party script adds 200ms, and a year later you have a slow site without a single bad decision to point to.
Core Web Vitals are Google's performance targets that affect search ranking. Largest Contentful Paint (LCP): good under 2.5s, needs improvement 2.5-4s, poor above 4s. Interaction to Next Paint (INP): good under 200ms, needs improvement 200-500ms, poor above 500ms. INP replaced FID in March 2024 and measures the responsiveness of all user interactions, not just the first. Cumulative Layout Shift (CLS): good under 0.1.
JavaScript bundle budgets: initial JS payload under 200KB gzipped for good TTI on 4G. Each additional 10KB adds ~1-5ms to parse time on a mid-range device. Set budget: 'max-async-requests-per-entry: 3, max-initial-chunks: 4' in your webpack/Vite config. Lighthouse CI (free, open-source) enforces budgets in CI and blocks merges that exceed them.
LCP optimization: the LCP element (typically a hero image or heading) must be in the initial HTML, not loaded via JavaScript. Preload the LCP image with 'link rel=preload'. Use WebP or AVIF. Size images correctly — no 2000px image rendered at 400px.
INP optimization: break up long tasks (tasks over 50ms block the main thread). Use requestIdleCallback or scheduler.yield() to yield back to the browser between chunks. Avoid synchronous layout (reading offsetWidth after writing to the DOM forces reflow). Third-party scripts (analytics, chat widgets, ads) are the most common source of INP regressions.