In March 2024, Google officially replaced First Input Delay (FID) with Interaction to Next Paint (INP) as a core ranking signal. For server-rendered React and Next.js applications, optimizing for modern Core Web Vitals requires moving beyond simple asset compression into deep hydration splitting, streaming SSR, and font layout stabilization.
1. Triage Breakdown: The Three Core Web Vitals
| Metric | Target Threshold | Root Causes & Mitigation Strategy |
|---|---|---|
| Largest Contentful Paint (LCP) | ≤ 1.2 seconds | Un-prioritized hero images, blocking third-party fonts. Mitigation: priority prop, preconnecting CDNs, Edge SSR streaming. |
| Interaction to Next Paint (INP) | ≤ 100 milliseconds | Main-thread long tasks during hydration. Mitigation: scheduler.yield(), Web Workers offloading, server components. |
| Cumulative Layout Shift (CLS) | ≤ 0.02 | Unsized images/ad banners and late-loading web fonts. Mitigation: CSS aspect-ratio, font-display: optional. |
