How do you budget LCP and INP for Core Web Vitals?

Short answer: LCP and INP budgeting means working backwards from Google's published thresholds (2.5 seconds for LCP, 200 milliseconds for INP) and assigning each phase of the page a spendable slice of time.

Splitting the LCP budget

• Break LCP into four parts: TTFB, resource load delay, resource load time, and render delay; give each part a target.
• Identify the LCP element (usually the hero image or heading) and feed it with preload, fetchpriority, and server-side caching.

Building the INP budget

• Measure input delay, processing, and presentation per interaction; aim to split long tasks below 50 milliseconds.
• Send the worst interactions to GA4 with the web-vitals library so field data reveals which component blows the budget.

Budgets are set for a target device and network profile: a mid-range Android on 4G is the realistic floor in many markets. Validate at the 75th percentile of field data, and let Lighthouse CI stop any pull request that exceeds the budget before release.