Optimización de Web Vitals en React/Next.js: Reduciendo INP y LCP por debajo de 1 segundo

Con Google adoptando INP (Interaction to Next Paint) como métrica clave de Core Web Vitals, la medición del rendimiento se centra en la respuesta táctil e interactiva tras los clics o entradas del usuario.

En aplicaciones React/Next.js, la ejecución pesada de JavaScript bloquea el hilo principal y empeora el INP.

Esta guía cubre técnicas efectivas para optimizar el INP y lograr un LCP por debajo de 1 segundo usando React 19, scheduler.yield() y streaming de recursos.

Puntos clave

• INP: Mide la latencia desde la interacción del usuario hasta la siguiente pintura. Debe ser $\le 200\text{ ms}$.
• Fraccionar tareas: Usa scheduler.yield() para evitar bloquear el hilo principal durante más de 50 ms.
• React 19 useTransition: Desprioriza actualizaciones pesadas de UI para mantener la fluidez al escribir o hacer clic.

1. Fragmentando tareas con scheduler.yield()

export async function yieldToMain() {
  if ('scheduler' in window && 'yield' in (window as any).scheduler) {
    await (window as any).scheduler.yield();
  } else {
    await new Promise((resolve) => setTimeout(resolve, 0));
  }
}