Interaction to Next Paint (INP)

Definición de Interaction to Next Paint (INP)

Interaction to Next Paint (INP) es una métrica de Core Web Vitals que mide qué tan rápido responde una página web a las interacciones del usuario, registrando el tiempo transcurrido desde que un usuario inicia una acción (como hacer clic en un botón, tocar una pantalla táctil o presionar una tecla) hasta que el navegador renderiza la siguiente actualización visual. Introducida por el equipo de Chrome de Google en mayo de 2022 como métrica experimental y promovida oficialmente a Core Web Vital estable en marzo de 2024, INP reemplazó a First Input Delay (FID) como la métrica principal de capacidad de respuesta para evaluar la experiencia de página. A diferencia de FID, que solo medía el retardo de la primera interacción en una página, INP proporciona una evaluación integral de la capacidad de respuesta al observar todas las interacciones durante toda la sesión del usuario. Este cambio refleja un enfoque más holístico para medir la experiencia del usuario, reconociendo que el 90% del tiempo de un usuario en una página ocurre después de que esta se carga, haciendo que la capacidad de respuesta constante durante toda la sesión sea crítica para la satisfacción del usuario y el rendimiento SEO.

Contexto histórico y evolución de las métricas de capacidad de respuesta

La introducción de INP representa una evolución significativa en cómo Google mide y evalúa la capacidad de respuesta de los sitios web. Durante años, First Input Delay (FID) sirvió como la métrica principal de capacidad de respuesta dentro de Core Web Vitals, centrándose exclusivamente en el componente de retardo de entrada de la primera interacción del usuario. Sin embargo, la investigación y las pruebas en el mundo real revelaron limitaciones sustanciales en el enfoque de FID. La métrica solo capturaba el retardo antes de que los manejadores de eventos comenzaran a ejecutarse, ignorando el tiempo dedicado a procesar la interacción y renderizar la respuesta visual. Además, el enfoque de FID en la primera interacción significaba que las páginas con mala capacidad de respuesta más adelante en la sesión del usuario aún podían obtener buenas puntuaciones FID, creando una imagen engañosa de la capacidad de respuesta general de la página. En respuesta a estas limitaciones, el equipo de Chrome de Google comenzó a explorar métricas alternativas en 2021, anunciando finalmente INP como métrica experimental en mayo de 2022. Después de casi dos años de pruebas comunitarias y recopilación de comentarios, INP se convirtió oficialmente en un Core Web Vital estable el 12 de marzo de 2024, reemplazando a FID por completo. Esta transición subraya el compromiso de Google de proporcionar métricas de rendimiento más precisas y centradas en el usuario que reflejen mejor las experiencias reales de navegación.

Ready to Monitor Your AI Visibility?

Track how AI chatbots mention your brand across ChatGPT, Perplexity, and other platforms.

Comenzar Contacto

Cómo funciona Interaction to Next Paint: Desglose técnico

INP mide la capacidad de respuesta registrando tres fases distintas de la interacción del usuario: retardo de entrada, tiempo de procesamiento y retardo de presentación. El retardo de entrada representa el tiempo entre que un usuario inicia una acción y el navegador comienza a ejecutar los manejadores de eventos asociados, causado a menudo por tareas largas o procesamiento en segundo plano que bloquean el hilo principal. El tiempo de procesamiento abarca la duración necesaria para que todas las devoluciones de llamada de los manejadores de eventos se ejecuten, incluyendo el código JavaScript que responde a la acción del usuario. Finalmente, el retardo de presentación es el tiempo entre que los manejadores de eventos se completan y el navegador pinta el siguiente fotograma, lo que puede implicar recálculo de diseño, actualizaciones de estilo y trabajo de renderizado. El valor total de INP representa la suma de estos tres componentes para una sola interacción. Es importante destacar que INP se calcula como el percentil 98 de todas las interacciones en una página, lo que significa que si una página recibe muchas interacciones, Google ignora el peor 2% como valores atípicos e informa la capacidad de respuesta que experimenta la gran mayoría de los usuarios. Para páginas con menos de 50 interacciones, INP típicamente reporta la peor interacción observada. Este enfoque basado en percentiles asegura que los contratiempos ocasionales de rendimiento no penalicen desproporcionadamente a los sitios que generalmente son responsivos.

Tabla comparativa: INP vs. FID vs. otras métricas de rendimiento

Stay Updated on AI Visibility Trends

Get the latest insights on AI mentions, brand monitoring, and optimization strategies.

Email address

Subscribe

Umbrales de rendimiento y estadísticas del mundo real

Google define los umbrales de rendimiento de INP en el percentil 75 de las cargas de página, segmentados por tipo de dispositivo (móvil y escritorio). Un INP por debajo de 200 milisegundos indica buena capacidad de respuesta, lo que significa que la página responde rápidamente a las interacciones del usuario y proporciona retroalimentación visual inmediata. Un INP entre 200 y 500 milisegundos cae en la categoría de “necesita mejora”, lo que sugiere que, si bien la página es funcional, los usuarios pueden percibir retardos notables que podrían afectar la satisfacción. Un INP superior a 500 milisegundos se clasifica como pobre, indicando problemas significativos de capacidad de respuesta que probablemente frustren a los usuarios e impacten negativamente el compromiso y las conversiones. Según el Web Almanac 2024 de HTTP Archive, el 74% de los sitios web móviles y el 97% de los sitios web de escritorio obtuvieron buenas puntuaciones INP, revelando una brecha de rendimiento sustancial entre las experiencias móviles y de escritorio. Esta diferencia de 23 puntos porcentuales destaca los desafíos continuos que enfrentan los desarrolladores para optimizar la capacidad de respuesta en dispositivos móviles, que típicamente tienen menos potencia de procesamiento y condiciones de red más variables que las computadoras de escritorio. Los datos subrayan por qué la optimización de INP es crítica para el desarrollo web móvil primero, ya que los usuarios móviles representan la mayoría del tráfico web para la mayoría de los sitios.

El papel de INP en Core Web Vitals y su impacto en SEO

INP es una de las tres métricas de Core Web Vitals que Google utiliza para evaluar la experiencia de página y determinar los rankings de búsqueda, junto con Largest Contentful Paint (LCP) para el rendimiento de carga y Cumulative Layout Shift (CLS) para la estabilidad visual. Google ha declarado explícitamente que los Core Web Vitals son factores de ranking, lo que significa que las páginas con malas puntuaciones INP pueden experimentar una visibilidad reducida en los resultados de búsqueda. Esto hace que la optimización de INP no sea solo una cuestión de experiencia del usuario, sino un imperativo crítico de SEO. El impacto empresarial de la optimización de INP se ha demostrado a través de casos de estudio reales: RedBus, una plataforma de venta de boletos de autobús en línea, logró un aumento del 7% en ventas al optimizar el INP de su sitio web de 870-900ms a 350-370ms mediante técnicas como el debouncing de manejadores de eventos de scroll, la optimización de la gestión de estado de componentes de entrada y la reducción de re-renderizados innecesarios. Este caso de estudio ilustra que las mejoras en INP se correlacionan directamente con mejoras en las métricas de negocio, incluyendo mayores conversiones, reducción de tasas de rebote y mejora en la retención de usuarios. Para sitios de comercio electrónico, plataformas SaaS y cualquier negocio que dependa de interacciones de usuarios, la optimización de INP representa una inversión de alto retorno tanto en experiencia del usuario como en visibilidad en buscadores.

Estrategias clave de optimización para mejorar INP

Los desarrolladores pueden emplear varias estrategias basadas en evidencia para reducir INP y mejorar la capacidad de respuesta de la página. Reducir el retardo de entrada requiere minimizar el procesamiento en segundo plano que bloquea el hilo principal, como dividir tareas largas usando la API scheduler.yield(), diferir la ejecución de JavaScript no crítico y optimizar la carga de scripts de terceros. Optimizar el tiempo de procesamiento implica simplificar las devoluciones de llamada de los manejadores de eventos para que realicen solo el trabajo esencial, usando técnicas como debouncing y throttling para limitar la frecuencia de ejecución de los manejadores de eventos, y aprovechando frameworks como React para evitar re-renderizados innecesarios de componentes mediante memoización. Reducir el retardo de presentación se puede lograr minimizando la complejidad del DOM, usando CSS containment para limitar el alcance del renderizado y difiriendo actualizaciones visuales no críticas. Además, los desarrolladores deben perfilar las interacciones usando Chrome DevTools para identificar qué funciones y scripts específicos contribuyen más a los retardos de INP, y luego priorizar las optimizaciones de mayor impacto. Las soluciones de Real User Monitoring (RUM) proporcionan datos invaluables sobre qué elementos de la página los usuarios interactúan con más frecuencia y qué interacciones son más lentas, facilitando decisiones de optimización basadas en datos. La librería JavaScript web-vitals permite a los desarrolladores medir INP programáticamente y enviar datos a plataformas de analítica, facilitando el monitoreo continuo y la mejora.

Medición de INP: Herramientas y metodologías

INP se puede medir tanto con datos de campo como con pruebas de laboratorio, aunque los datos de campo de usuarios reales proporcionan la representación más precisa del rendimiento real. Google PageSpeed Insights muestra métricas INP basadas en datos del Chrome User Experience Report (CrUX), mostrando el percentil 75 de las experiencias de usuarios reales para páginas que reciben suficiente tráfico. Google Search Console incluye un informe INP en su sección de Core Web Vitals, permitiendo a los propietarios de sitios identificar páginas con mala capacidad de respuesta y hacer seguimiento de las mejoras a lo largo del tiempo. La pestaña Performance de Chrome DevTools permite a los desarrolladores grabar y analizar interacciones individuales, mostrando el desglose de los componentes de retardo de entrada, tiempo de procesamiento y retardo de presentación. La librería JavaScript web-vitals proporciona una forma programática de medir INP en entornos de producción y enviar datos a backend de analítica personalizados. Soluciones de Real User Monitoring (RUM) como DebugBear, Datadog y New Relic ofrecen información detallada sobre el rendimiento de INP, incluyendo datos de atribución que muestran qué scripts y componentes contribuyen a los retardos. La herramienta INP Debugger identifica automáticamente elementos de página cliqueables y simula interacciones para identificar interacciones lentas en un entorno de laboratorio. Para una optimización integral de INP, los desarrolladores deben combinar múltiples enfoques de medición: usar datos de CrUX para comprender el rendimiento base, RUM para identificar interacciones problemáticas en producción y DevTools para diagnosticar causas raíz y validar correcciones.

INP e integración con búsqueda por IA: Implicaciones para usuarios de AmICited

A medida que los sistemas de búsqueda impulsados por IA como ChatGPT, Perplexity, Google AI Overviews y Claude referencian y citan cada vez más contenido web, la capacidad de respuesta de la página se convierte en un factor en la evaluación y los patrones de citación de los sistemas de IA. Si bien INP no afecta directamente si un sistema de IA cita tu contenido, las páginas con mala capacidad de respuesta pueden obtener métricas de engagement más bajas (tasa de rebote, tiempo en página, profundidad de interacción) que influyen indirectamente en las señales de calidad del contenido. Además, los sistemas de IA priorizan cada vez más las señales de experiencia del usuario al evaluar la credibilidad y relevancia de las fuentes. Una página que responde rápidamente a las interacciones del usuario demuestra competencia técnica y profesionalismo, lo que potencialmente influye en cómo los sistemas de IA evalúan y clasifican el contenido para su citación. Para las organizaciones que usan AmICited para monitorear la aparición de su marca y dominio en respuestas de IA, entender INP se convierte en parte de una estrategia holística de optimización de contenido. Las páginas que son tanto responsivas (buen INP) como contienen contenido autoritativo y de alta calidad tienen más probabilidades de ser citadas por los sistemas de IA. Además, a medida que los sistemas de IA se vuelven más sofisticados en la evaluación de señales de experiencia del usuario, mantener buenas puntuaciones INP puede convertirse en un factor cada vez más importante en los patrones de citación de IA, haciendo que la optimización de INP sea relevante no solo para el SEO tradicional sino también para la visibilidad emergente en búsqueda por IA.

Solución de problemas comunes de INP

La mayoría de las puntuaciones INP pobres se remontan a uno de los tres componentes de la métrica, por lo que el diagnóstico comienza aislando cuál está fallando. El retardo de entrada alto generalmente significa que una tarea larga en el hilo principal —a menudo un script de analítica o publicitario empaquetado— se está ejecutando cuando el usuario hace clic; la solución es dividir el trabajo en fragmentos más pequeños con scheduler.yield() o diferir scripts no críticos hasta después de la ventana de interacción. El tiempo de procesamiento largo típicamente proviene de manejadores de eventos que hacen más trabajo del necesario, como un cuadro de búsqueda que dispara una llamada API en cada pulsación de tecla en lugar de usar debouncing, o un componente de React que re-renderiza toda la lista en lugar de solo la fila modificada — la memoización y el throttling resuelven ambos. El retardo de presentación largo es a menudo un problema de CSS o DOM: selectores complejos, layout thrashing o un DOM profundamente anidado obligan al navegador a recalcular estilos y diseño antes de poder pintar, lo que CSS containment y la simplificación del árbol DOM abordan directamente. Un modo de fallo menos obvio son los scripts de terceros, que pueden dominar silenciosamente el INP incluso cuando tu propio código es rápido; perfilar en la pestaña Performance de Chrome DevTools atribuirá el retardo al script correcto. Finalmente, si las puntuaciones INP de laboratorio y de campo discrepan notablemente, verifica si las interacciones que se están probando coinciden con lo que los usuarios reales realmente hacen clic — las pruebas sintéticas pasan por alto interacciones que los datos RUM capturan.

Lista de verificación esencial para la optimización de INP

• Auditar el rendimiento INP actual usando PageSpeed Insights, Search Console y herramientas de Real User Monitoring para establecer métricas de referencia
• Identificar interacciones lentas mediante datos RUM y Chrome DevTools para comprender qué elementos de página y acciones de usuario causan retardos
• Dividir tareas largas usando scheduler.yield() y patrones asíncronos para prevenir el retardo de entrada durante la carga de página y el procesamiento en segundo plano
• Optimizar los manejadores de eventos reduciendo el tiempo de procesamiento, aplicando debouncing a eventos frecuentes y difiriendo trabajo no crítico
• Minimizar la complejidad del DOM para reducir el retardo de presentación y el tiempo de renderizado después de que los manejadores de eventos se completen
• Implementar división de código (code splitting) y carga diferida para reducir la ejecución inicial de JavaScript y el procesamiento en segundo plano
• Optimizar scripts de terceros difiriendo scripts no críticos, usando web workers mediante Partytown, o eliminando integraciones innecesarias
• Usar optimizaciones específicas de frameworks como React.memo, propiedades computadas de Vue y división de código de Next.js para evitar re-renderizados innecesarios
• Monitorear continuamente con soluciones RUM para rastrear mejoras de INP e identificar regresiones antes de que impacten a los usuarios
• Probar en dispositivos reales incluyendo dispositivos móviles de gama baja para asegurar la capacidad de respuesta en todo el espectro de hardware de usuario

+++