Performance Budgets: Core Web Vitals

Core Web Vitals (CWV) are standardized user-experience metrics covering loading performance, responsiveness, and visual stability. A performance budget turns these metrics into concrete limits that help a frontend team prevent regressions.

Core Web Vitals currently center on three metrics: Largest Contentful Paint (LCP) for loading, Interaction to Next Paint (INP) for responsiveness, and Cumulative Layout Shift (CLS) for visual stability. They measure different aspects of the experience, so improving one does not automatically improve the others.

A performance budget defines an acceptable upper bound for a metric or resource. For example, a team might require an LCP below 2.5 seconds, keep INP below 200 milliseconds, and keep CLS below 0.1 for the 75th percentile of real users. Budgets can also cover JavaScript size, image weight, total page weight, request counts, or other engineering constraints.

For a frontend engineer, budgets are useful because performance problems often enter gradually. A new dependency can increase JavaScript execution time, a large image can delay the largest contentful element, or late-loading styles can cause layout movement. Automated checks in CI and production monitoring can expose these regressions before or after deployment.

CWV should be treated as user-centered measurements rather than merely build-time numbers. Laboratory tools such as Lighthouse can estimate performance under controlled conditions, while field data measures actual users and network/device conditions. A strong performance process uses both: budgets can catch regressions during development, while field measurements reveal whether real users meet the desired experience.

Key points

• LCP measures loading performance; a good 75th-percentile target is at or below 2.5 seconds.
• INP measures interaction responsiveness; a good 75th-percentile target is at or below 200 ms.
• CLS measures unexpected visual movement; a good 75th-percentile target is at or below 0.1.
• Performance budgets turn performance goals into explicit limits that can be checked over time.
• Use both lab testing and real-user data because they answer different performance questions.

Interview questions

What is the difference between LCP and INP?

LCP focuses on how quickly the main content becomes visible, so it primarily represents loading experience. INP focuses on how quickly the page responds after user interactions such as clicks, taps, or keyboard input. A page can therefore have a good LCP while still having poor INP if heavy JavaScript blocks the main thread after loading.

What are Core Web Vitals?

Core Web Vitals are standardized metrics for important aspects of web user experience. LCP measures loading performance, INP measures responsiveness to user interactions, and CLS measures visual stability. They provide concrete targets that teams can monitor rather than relying only on subjective impressions of speed.

What is a performance budget, and why would you use one?

A performance budget is an explicit limit placed on a performance metric or resource. For example, a team can establish limits for LCP, JavaScript size, image weight, or request count. The goal is to make performance a constraint during development so that incremental changes do not silently degrade the application.

How would you improve a page with poor LCP?

First, I would identify which resource or rendering phase is delaying the largest contentful element. Common causes include slow server response time, render-blocking resources, late discovery of the main image, and excessive client-side work. I would then prioritize the critical content, optimize the relevant resource, and verify the result with both lab measurements and field data.

Why can a page have a good Lighthouse result but poor real-user Core Web Vitals?

Lighthouse runs under controlled laboratory conditions, including a specific device and network simulation, so it cannot represent every user's environment. Real-user measurements include variation in devices, networks, geographic locations, caching, and interaction patterns. Therefore, lab results are valuable for diagnosis and repeatability, while field data is necessary to understand actual user experience.