Web Vitals Budget Planner

Core Web Vitals are a set of real-world metrics Google uses to measure user experience: LCP (Largest Contentful Paint) measures loading performance, CLS (Cumulative Layout Shift) measures visual stability, and INP (Interaction to Next Paint) measures responsiveness. Google uses these metrics as ranking signals in Search. All three are measured in field data from real users via the Chrome User Experience Report (CrUX).

A performance budget is a set of limits on metrics that affect website performance — page weight, resource sizes, number of requests, or Core Web Vitals scores. By setting a budget before building a feature, you create a constraint that forces you to optimize. Budgets should be tied to your user-facing targets (e.g., LCP ≤ 2.5s on 4G) and enforced in CI/CD using tools like Lighthouse CI or bundlesize.

The hero image size limit is estimated by assuming a 4G connection speed of approximately 10 Mbps (1.25 MB/s) and allocating a fraction of your LCP budget to the hero image download. Since the hero image is typically the LCP element, it must be downloaded and decoded before LCP fires. The formula used here is: LCP target (seconds) × 100 KB/s network allowance. Optimize with modern formats (WebP/AVIF), responsive srcset, and priority fetchpriority attribute.

INP (Interaction to Next Paint) replaced FID (First Input Delay) as a Core Web Vital in March 2024. FID only measured the delay before the first interaction was processed. INP measures the latency of ALL interactions throughout the page lifecycle — clicks, taps, and keyboard inputs — and reports the worst percentile. A poor INP usually means too much long-task JavaScript blocking the main thread.

CLS is caused by content that shifts after the initial render: images without explicit width/height, ads that expand, web fonts causing text reflow (FOUT), or dynamically injected content above existing content. Fixes: always set explicit dimensions on images and video elements, use font-display: optional or preload fonts, reserve space for ads with min-height, and avoid inserting content above the fold after page load.