Aprender
Optimización de INP: corrige Interaction to Next Paint y Core Web Vitals
Una guía práctica de Interaction to Next Paint: qué mide, por qué es más difícil de corregir que la velocidad de carga y cómo lograr que las interacciones reales respondan más rápido.
Ejecuta una auditoría nueva en DomainLens y usa el informe como lista de prioridades.
Qué mide realmente INP
Interaction to Next Paint (INP) mide la capacidad de respuesta: cuánto tarda la página en responder visualmente después de un clic, un toque o una tecla. Observa todas las interacciones de la visita y reporta casi la peor, así que un solo menú con tirones o un botón de «añadir al carrito» lento puede definir la puntuación de toda la página.
El umbral bueno es 200 ms o menos; por encima de 500 ms es malo. A diferencia de LCP, que trata de lo rápido que aparece el contenido, INP trata de lo que ocurre cuando la página ya está en pantalla — por eso una página puede cargar rápido y aun así sentirse rota al usarla.
Por qué INP es más difícil de corregir que la velocidad
Las métricas de carga dependen sobre todo de la red y el servidor, así que el caché y un hosting más rápido ayudan mucho. INP depende de tu propio JavaScript ejecutándose en el hilo principal. Cuando se dispara un clic, el navegador no puede pintar la respuesta hasta que terminen el manejador del evento, el re-render del framework y el resto de la cola — las tareas largas invisibles en un portátil rápido se vuelven bloqueos visibles en un móvil de gama media.
INP reemplazó a First Input Delay en marzo de 2024. FID solo medía el retraso antes de empezar a procesar la primera interacción; INP mide el tiempo completo hasta el siguiente frame pintado, para interacciones de toda la visita. Es mucho más estricto, y por eso sitios que pasaban FID pueden fallar INP.
Dónde encontrar tus peores interacciones
Empieza por los datos de campo — INP es una métrica de usuarios reales, y una herramienta de laboratorio no sabe con qué botón sufren de verdad tus visitantes.
- Chrome UX Report / Search Console: confirma que INP falla en usuarios reales y anota si es móvil, desktop o plantillas concretas.
- La extensión Web Vitals o el panel Performance: reproduce la interacción y lee el desglose de INP en input delay, processing time y presentation delay.
- La pista de long tasks del panel Performance: graba mientras haces clic en el elemento problemático y busca la tarea de más de 50 ms que bloquea el siguiente pintado.
- Las devtools del framework (React Profiler, Vue Devtools): encuentra componentes que se re-renderizan mucho más de lo necesario en una sola interacción.
Cómo lograr que las interacciones respondan más rápido
El objetivo es dar al navegador la oportunidad de pintar antes de hacer el trabajo costoso. Divide la tarea grande en una respuesta pequeña y visible ahora y el trabajo pesado después.
- Cede el hilo principal: tras actualizar lo que ve el usuario, difiere el trabajo no urgente con requestIdleCallback, setTimeout o await scheduler.yield().
- Reduce el coste de hidratación: en React, Vue, Nuxt o Next.js, envía menos JavaScript de cliente y prefiere server components o islands.
- Controla los terceros: analytics, widgets de chat, tag managers y scripts de anuncios corren en el mismo hilo principal — cárgalos de forma diferida y elimina los inútiles.
- Debounce y memoización: evita que el filtrado costoso, el layout y las actualizaciones de estado se disparen en cada tecla o scroll, y cachea los valores derivados.
Errores que mantienen INP en rojo
- Optimizar solo la puntuación Total Blocking Time de Lighthouse y suponer que el INP de campo seguirá — TBT es un proxy de carga, no las interacciones reales.
- Probar en un desktop rápido cuando el tráfico es Android de gama media, donde el mismo manejador tarda varias veces más.
- Mantener cada etiqueta de terceros porque «parece pequeña» — el coste es acumulativo y cae sobre el camino de interacción.
- Corregir la interacción media en vez de la peor; INP se define por la cola lenta, no por la mediana.
Cómo confirmar que INP mejoró de verdad
Las métricas de campo se mueven despacio porque agregan 28 días de visitas reales, así que no esperes que el gráfico de Search Console salte el día del despliegue. Valida en dos capas: reproduce la interacción concreta en el panel Performance y confirma que la tarea larga desapareció, y luego sigue la tendencia de campo durante las semanas siguientes.
En DomainLens, trata INP dentro de la misma evidencia que LCP, CLS y velocidad de página — las mejores correcciones hacen que la página real se use de verdad más fluida, no solo más verde en un laboratorio.