¿Qué es el INP (Interaction to Next Paint)?

Definición

El INP (Interaction to Next Paint) es la métrica de los Core Web Vitals que mide la interactividad de una página web. Reemplazó al antiguo FID (First Input Delay) en marzo de 2024 como métrica oficial.

INP mide el tiempo total desde que un usuario interactúa con la página (clic, toque, tecleo) hasta que el navegador pinta la siguiente frame visual como respuesta. A diferencia del FID que solo medía la primera interacción, INP mide todas las interacciones y reporta la peor (percentil 98).

Umbrales de Google

| Calificación | Tiempo | |:---|:---| | ✅ Bueno | ≤ 200 milisegundos | | ⚠️ Necesita mejora | 200 – 500 ms | | ❌ Deficiente | > 500 ms |

¿Qué causa un INP alto?

1. JavaScript pesado en el hilo principal: Frameworks como jQuery ejecutando código síncrono
2. Event handlers lentos: Funciones de onClick que hacen cálculos pesados
3. Terceros bloqueantes: Scripts de analytics, chat widgets, ad trackers
4. Renderizado excesivo: Componentes React que se re-renderizan innecesariamente
5. DOM muy grande: Páginas con miles de nodos HTML

Cómo optimizar el INP

• Code splitting: Cargar solo el JavaScript necesario para cada página
• React Server Components: Ejecutar lógica en el servidor, no en el navegador
• Debounce y throttle: Limitar la frecuencia de ejecución de handlers
• Web Workers: Mover cálculos pesados fuera del hilo principal
• Virtualización: Para listas largas, renderizar solo lo visible

Next.js con React Server Components reduce drásticamente el JavaScript enviado al cliente, logrando INP consistentes bajo 100ms.