Set frontend performance budgets with Core Web Vitals

Interview framing: Performance budgets translate "make it fast" into measurable constraints that can be tracked in CI and production.

Metrics:

• LCP: how quickly the main content appears.
• INP: how responsive interactions feel throughout the session.
• CLS: whether layout shifts unexpectedly.
• Bundle size: how much JavaScript is shipped per route.
• Route transition time and API latency can matter more in authenticated SaaS apps.

Budget examples:

• Initial authenticated shell under a defined JS budget.
• Policy list interaction under 200ms for common filters.
• No unexpected layout shift during loading states.
• Large editor dependencies loaded only on editor routes.

Measurement:

• Lab tools: Lighthouse, browser Performance, bundle analyzer.
• Real-user monitoring: collect metrics from production users by browser, device, tenant size, and route.
• Profiling: use React Profiler for component-level render work.

Enforcement:

• CI warnings or failures for bundle regressions.
• Performance smoke tests for critical routes.
• Dashboards and alerts for production regressions.
• Review checklist for adding heavy dependencies.

Trade-offs:

• Admin dashboards may prioritize interaction speed over SEO.
• Some heavy features are justified if lazy-loaded and measured.
• Budgets should reflect user-critical flows, not vanity scores.

Good closing: "I want performance to be owned like test coverage: visible, measured, and protected from regressions."