¿Qué es el INP (Interaction to Next Paint)?
El INP mide la latencia de las interacciones del usuario con la página: cuánto tiempo pasa entre un clic/toque y la respuesta visual de la interfaz.
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?
- JavaScript pesado en el hilo principal: Frameworks como jQuery ejecutando código síncrono
- Event handlers lentos: Funciones de onClick que hacen cálculos pesados
- Terceros bloqueantes: Scripts de analytics, chat widgets, ad trackers
- Renderizado excesivo: Componentes React que se re-renderizan innecesariamente
- 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.
Artículos Relacionados
Respaldado por NexgenPixels — Agencia de Marketing Digital en Panamá