Qué es INP: definición y guía completa SEO
INP (Interaction to Next Paint): Métrica de Core Web Vitals que mide la capacidad de respuesta de una página web a las interacciones del usuario: clics, toques y pulsaciones de teclado. Sustituyó al FID (First Input Delay) en marzo de 2024 y mide no solo el primer clic, sino todas las interacciones durante la visita. Umbral bueno: ≤ 200ms.
Qué mide el INP y en qué se diferencia del FID que sustituyó
El FID medía únicamente el retraso desde el primer clic del usuario hasta que el navegador podía empezar a procesar el evento. El INP es más exigente y representativo: mide el tiempo desde cualquier interacción del usuario (no solo la primera) hasta que el navegador termina de pintar la actualización visual de respuesta. Incluye el tiempo de procesamiento del event handler, el recalculo de estilos y el repintado. El INP toma el percentil 98 de todas las interacciones medidas durante la visita: una sola interacción muy lenta puede convertirse en el valor INP del usuario. Umbral: bueno ≤ 200ms, necesita mejoras 200-500ms, lento > 500ms.
Causas principales de un INP elevado
Las tareas largas de JavaScript (Long Tasks) que bloquean el hilo principal son la causa más frecuente: si el hilo principal está ocupado ejecutando un script de terceros, cualquier clic del usuario debe esperar hasta que esa tarea termine. Los event handlers con lógica compleja que hacen cálculos pesados o acceden al DOM extensivamente pueden generar INP elevado. El Layout Thrashing (forzar recalculos de layout en bucle leyendo y modificando el DOM alternadamente) también genera INP alto. Los frameworks JavaScript como React, Angular o Vue pueden generar INP elevado si los componentes re-renderizan de forma innecesaria ante cada interacción.
Cómo mejorar el INP: técnicas concretas
La estrategia principal es ceder el hilo principal: dividir las tareas largas de JavaScript en tareas más pequeñas usando setTimeout de 0ms o scheduler.postTask para dar al navegador la oportunidad de procesar interacciones entre tareas. El debounce y throttle en event handlers que se disparan con alta frecuencia (scroll, resize, input) reduce el número de veces que se ejecuta el código. Usar requestAnimationFrame para actualizaciones visuales sincroniza el trabajo con el ciclo de renderizado del navegador. Para frameworks, implementar memoización y evitar renders innecesarios (React.memo, useMemo, useCallback) reduce el trabajo de repintado tras cada interacción.
Herramientas para diagnosticar y medir el INP
Chrome DevTools es la herramienta principal: en la pestaña Performance, grabar una sesión de usuario e interactuar con la página muestra el timeline completo de tareas y permite identificar qué tareas largas bloquean la respuesta a las interacciones. La extensión Web Vitals de Chrome muestra el INP en tiempo real durante la navegación. El panel Performance Insights en DevTools agrupa los problemas de INP por causa. Para datos reales de usuarios, PageSpeed Insights muestra el INP del informe CrUX. La Long Animation Frame API (disponible desde Chrome 123) permite detectar programáticamente qué scripts causan los frames lentos.
Preguntas frecuentes
¿Un INP alto en escritorio también lo es en móvil?
No necesariamente. Los dispositivos móviles tienen menor potencia de CPU y las mismas tareas de JavaScript tardan entre 3-5 veces más. Un INP de 180ms en escritorio (bueno) puede ser 500ms+ en un dispositivo móvil de gama media (lento). Google usa el INP medido en los dispositivos reales de los usuarios, que en la mayoría de mercados son principalmente móviles. Testear el INP con el perfil de CPU throttling 4x en DevTools da una estimación más representativa del rendimiento en móvil.
¿El INP afecta a sitios con poco JavaScript?
En sitios con HTML y CSS estáticos y mínimo JavaScript, el INP suele ser excelente de forma natural. Los problemas de INP aparecen principalmente en aplicaciones web ricas en JS, SPA (Single Page Applications), sitios con muchos scripts de terceros (publicidad, analytics, chat, pixel de tracking) o páginas con formularios complejos con validación en tiempo real.