Interacción a Next Paint (INP): Guía completa de este Core Web Vital de Google

Interacción con la siguiente pintura (INP) es la métrica Core Web Vital más reciente de Google que reemplazó a Retraso de primera entrada (FID) en marzo de 2024 y mide la rapidez con la que una página web responde a las interacciones del usuario durante todo su ciclo de vida.

A diferencia de FID, que solo registraba la primera interacción, INP monitoriza todas las interacciones del usuario y mide el ciclo completo de respuesta, desde la entrada del usuario hasta la retroalimentación visual.

Esta guía completa cubre todo lo necesario para comprender, medir y optimizar el rendimiento de INP para mejorar el posicionamiento en buscadores de un sitio web y mejorar también la experiencia del usuario.

Contenido de esta guía

Esta guía se centra específicamente en INP como métrica Core Web Vital (), incluyendo técnicas de medición mediante herramientas de laboratorio y monitorización de usuarios reales, estrategias de optimización sistemática para reducir los retrasos en las interacciones y la solución de problemas comunes de respuesta. No abordaremos otros significados del acrónimo INP ni métricas de rendimiento no relacionadas.

Para quién es

Esta guía está diseñada para desarrolladores web, profesionales de SEO y propietarios de sitios web que gestionan el rendimiento de sus sitios web. Tanto si optimiza un sitio web existente con puntuaciones INP bajas como si implementa prácticas compatibles con INP desde cero, encontrará estrategias prácticas y técnicas de medición.

Por qué es importante

El INP impacta directamente en el posicionamiento de su sitio web en los motores de búsqueda, como parte de la evaluación Core Web Vitals de Google, lo que afecta la visibilidad orgánica y el tráfico. Una mala capacidad de respuesta también perjudica la experiencia del usuario, lo que resulta en tasas de rebote más altas y una reducción de las conversiones cuando las interacciones del usuario resultan lentas o no responden.

Lo que enseña

• How INP measures page responsiveness across all user interactions
• Differences between INP and First Input Delay, and why Google made the switch
• Field data and lab environment measurement techniques for accurate INP assessment
• Step-by-step optimization strategies targeting input delay, processing time, and presentation delay
• Common INP challenges and proven solutions for improving responsiveness

Qué es eso de la interacción hasta la siguiente pintura

INP es una métrica de capacidad de respuesta que mide la latencia de todas las interacciones del usuario con una página web, desde que interactúa con los elementos de la página hasta que se pinta el siguiente marco con retroalimentación visual.

Esta métrica Core Web Vital (métrica web principal, CWV por sus iniciales en inglés) captura el ciclo de vida completo de la interacción, proporcionando una visión completa de la rapidez con la que su sitio web responde a la entrada del usuario durante su visita.

INP mide el tiempo transcurrido desde que se producen las interacciones del usuario (como clics, pulsaciones de teclas o presión en dispositivos móviles) hasta que el navegador muestra la siguiente actualización visual que refleja dicha interacción. Este enfoque ofrece una imagen realista de la capacidad de respuesta de la página que los usuarios experimentan en situaciones reales.

La métrica se centra en interacciones discretas en lugar de eventos continuos, rastreando clics, toques y entradas de teclado individuales en lugar de desplazamientos o desplazamientos. INP proporciona una evaluación de la capacidad de respuesta más completa que las métricas anteriores, al evaluar toda la línea de tiempo de la interacción en lugar de componentes aislados.

Componentes principales de INP

La medición de INP consta de tres fases distintas que se combinan para determinar la demora total de la interacción que experimentan los usuarios.

La demora de entrada representa el tiempo transcurrido desde que se inicia una interacción hasta que el hilo principal está disponible para procesar los controladores de eventos. Durante esta fase, el navegador puede estar ocupado con otro código JavaScript, tareas largas o procesando algo que impide una respuesta inmediata a la entrada del usuario.

La duración del ese proceso abarca el tiempo empleado en ejecutar los detectores de eventos y cualquier operación síncrona desencadenada por la interacción. Esto incluye la ejecución de múltiples controladores de eventos, la manipulación del DOM, los cálculos y otras operaciones de JavaScript directamente relacionadas con la acción del usuario.

La demora de presentación mide el tiempo transcurrido desde que se completa el procesamiento hasta que el navegador pinta el siguiente fotograma que muestra los cambios visuales. Esta fase incluye los cálculos de diseño, los cálculos de estilo y el trabajo de renderizado necesario para mostrar los resultados de la interacción a los usuarios.

INP y Demora de Primera Entrada (FID)

La demora de la primera entrada (FID por sus siglas en inglés) presentaba limitaciones significativas que la convertían en una medida incompleta de la capacidad de respuesta de una página. FID solo medía la demora en la primera interacción durante la visita a la página, ignorando todas las interacciones posteriores del usuario, que suelen representar la mayor parte de la interacción del usuario con los elementos de la página.

INP soluciona estas deficiencias rastreando la interacción más larga observada durante toda la visita del usuario, excluyendo los valores atípicos para centrarse en la capacidad de respuesta representativa. Este enfoque captura la capacidad de respuesta deficiente que se produce a lo largo del ciclo de vida de la página, no solo durante la carga inicial, cuando se midió el FID.

Google sustituyó la FID por INP en Core Web Vitals porque INP proporciona información útil sobre los problemas reales de la experiencia del usuario. Si bien un sitio web puede superar el FID con una buena capacidad de respuesta inicial, los usuarios podrían experimentar retrasos frustrantes durante interacciones posteriores que INP identifica y mide correctamente.

La migración a INP implica que las optimizaciones existentes de FID podrían necesitar ajustes, ya que mejorar el retraso de entrada por sí solo no garantizará buenas puntuaciones de INP si el tiempo de procesamiento o el retraso en la presentación siguen siendo problemáticos.

Medición del rendimiento de INP

Una medición precisa de INP requiere comprender las diferencias entre los datos de campo recopilados mediante la monitorización de usuarios reales y los datos de laboratorio recopilados en entornos de prueba controlados. Los datos de campo reflejan las experiencias reales de los usuarios en diferentes dispositivos, condiciones de red y patrones de uso, mientras que los datos de laboratorio proporcionan condiciones controladas para un análisis detallado.

La monitorización de usuarios reales proporciona la evaluación de INP más fiable, ya que la métrica depende en gran medida del rendimiento del dispositivo, las condiciones de la red y los patrones de comportamiento reales de los usuarios, que varían significativamente entre su base de usuarios.

Medición de datos de campo

El Informe de experiencia del usuario de Chrome (CrUX) proporciona datos de INP a nivel de origen recopilados de los usuarios de Chrome que han optado por compartir estadísticas de uso. Estos datos aparecen en el informe Core Web Vitals de Google Search Console y en PageSpeed ​​Insights, ofreciendo información sobre cómo los usuarios reales experimentan la capacidad de respuesta de su sitio.

Las herramientas de monitorización de usuarios reales (RUM) permiten un seguimiento detallado de tipos de interacción y páginas específicas, proporcionando datos de INP granulares que van más allá de los que ofrece CrUX. Las soluciones RUM pueden identificar qué interacciones específicas causan puntuaciones de INP bajas y realizar un seguimiento de las mejoras a lo largo del tiempo a medida que se implementan las optimizaciones.

Google Search Console genera informes sobre las métricas de Core Web Vitals, incluyendo INP, categorizando las páginas como Buenas, Necesitan Mejoras o Malas según los datos de campo. Esta herramienta ayuda a identificar qué grupos de páginas presentan problemas de INP y monitoriza el progreso a medida que se implementan las optimizaciones.

La biblioteca JavaScript de Web Vitals permite la implementación personalizada del seguimiento de INP, lo que permite a los desarrolladores capturar datos detallados de interacción y enviarlos a plataformas de análisis para su análisis. Este enfoque proporciona la máxima flexibilidad para comprender cómo interactúan los usuarios con elementos específicos de la página.

Pruebas en el entorno de laboratorio

El panel de rendimiento de Chrome DevTools ofrece un análisis detallado de las interacciones individuales, desglosando los componentes de retardo de entrada, duración del procesamiento y retraso de la presentación. La pestaña de rendimiento permite analizar fotograma a fotograma la gestión de las interacciones e identifica cuellos de botella específicos en el flujo de trabajo.

Las pruebas de laboratorio de PageSpeed ​​Insights ofrecen una evaluación controlada del INP, aunque los resultados podrían no reflejar las experiencias reales de los usuarios debido a las condiciones simuladas. Las herramientas de laboratorio son ideales para identificar posibles problemas y validar la eficacia de la optimización en circunstancias controladas.

El tiempo total de bloqueo (TBT) sirve como un proxy útil del INP durante las pruebas de laboratorio, ya que mide el bloqueo del hilo principal durante la carga de la página. Si bien el TBT no se correlaciona directamente con el INP, reducirlo suele mejorarlo al aumentar la disponibilidad del hilo principal para el procesamiento de las interacciones.

Las prácticas recomendadas para las pruebas en el entorno de laboratorio incluyen simular patrones realistas de interacción del usuario, realizar pruebas en diferentes tipos de dispositivos representados en su base de usuarios y centrarse en las interacciones que ocurren con mayor frecuencia en escenarios de uso reales.

Umbrales de Puntuación INP

Un buen rendimiento de INP requiere tiempos de respuesta inferiores a 200 milisegundos para una experiencia de usuario óptima. Este umbral garantiza que las interacciones se sientan inmediatas y ágiles, cumpliendo con las expectativas de los usuarios de las interfaces web modernas.

Las puntuaciones INP bajas se producen cuando las interacciones tardan más de 500 milisegundos en completarse, lo que genera experiencias de usuario notablemente lentas. Los usuarios perciben retrasos superiores a 500 ms como lentos, lo que genera frustración y posible abandono de tareas o páginas.

La medición de INP utiliza la metodología del percentil 75, lo que significa que el 75 % de las interacciones de la página deben cumplir con el umbral adecuado para que la página reciba una buena puntuación INP. Este enfoque garantiza que la mayoría de las interacciones del usuario se sientan ágiles, a la vez que permite interacciones ocasionales más lentas que no representan la experiencia de usuario típica.

La métrica se evalúa por separado para dispositivos móviles y de escritorio, reconociendo que las capacidades de los dispositivos y los patrones de interacción del usuario difieren significativamente entre estas plataformas.

Estrategias de Optimización de INP

La mejora sistemática de INP requiere identificar las interacciones problemáticas antes de implementar las optimizaciones, ya que los diferentes tipos de interacción pueden sufrir diferentes cuellos de botella de rendimiento. Una optimización eficaz se centra en los componentes específicos que causan retrasos, en lugar de aplicar mejoras de rendimiento genéricas que podrían no solucionar los problemas reales de INP.

Comprender qué interacciones causan puntuaciones bajas de INP permite realizar esfuerzos de optimización específicos que generan mejoras mensurables. Las optimizaciones de rendimiento aleatorias sin identificar las causas raíz a menudo no logran mejorar significativamente el INP.

Paso a paso: Proceso de mejora de INP

Identificar las interacciones lentas utilizando datos de campo y herramientas RUM: Empezando por monitorizar de usuarios reales para comprender qué interacciones específicas causan una respuesta deficiente en entornos de producción. Conviene centrarse en las interacciones que ocurren con frecuencia y que afectan a una parte significativa de su base de usuarios.

Reproducir las interacciones en Chrome DevTools para poder hacer un análisis detallado: El Panel de Rendimiento puede capturar las interacciones problemáticas y analizar el retraso de entrada en detalle, el tiempo de proceso y la demora de la presentación. Este paso revela qué componente contribuye más a la respuesta deficiente.

Analizar el bloqueo del hilo principal y las tareas largas durante las interacciones: Identificar operaciones de JavaScript, scripts de terceros u otros procesos que bloquean el hilo principal cuando se producen interacciones del usuario. Las tareas largas que se superponen con el procesamiento de interacciones afectan directamente al rendimiento de INP.

Implementar optimizaciones específicas basadas en el análisis de componentes: Abordar los cuellos de botella específicos identificados en el análisis, ya sea el retraso de entrada del hilo principal bloqueado, el tiempo de procesamiento de los controladores de eventos pesados ​​o el retraso de presentación de las operaciones DOM complejas.

Validar las mejoras utilizando datos de campo y de laboratorio: Supervisar las mejoras de INP mediante la monitorización de usuarios reales para confirmar que las optimizaciones funcionan en producción, mientras se utilizan herramientas de laboratorio para verificar que los cambios no introduzcan nuevos problemas de rendimiento.

Reducir el retraso de entrada

Minimizar las tareas que bloquean el hilo principal durante las interacciones del usuario requiere una gestión cuidadosa del tiempo de ejecución de JavaScript. Las tareas largas que se ejecutan cuando los usuarios intentan interactuar contribuyen directamente al retraso de entrada al impedir la ejecución inmediata del controlador de eventos.

Dividir la ejecución larga de JavaScript en fragmentos más pequeños mediante setTimeout o scheduler.postTask permite al navegador procesar las interacciones del usuario entre fragmentos. Este enfoque mantiene la funcionalidad a la vez que garantiza que el hilo principal permanezca disponible para responder a la entrada del usuario.

Evitar operaciones pesadas durante la carga de la página y las ventanas de interacción críticas reduce la probabilidad de retrasos en la entrada cuando los usuarios interactúan por primera vez con los elementos de la página. Posponga las operaciones de JavaScript no esenciales hasta después de que sea probable que se produzcan las interacciones iniciales del usuario.

Las estrategias de programación de tareas permiten una mejor capacidad de respuesta al devolver el control al navegador regularmente durante las operaciones de larga duración, lo que garantiza que las interacciones del usuario se puedan procesar con prontitud incluso durante operaciones complejas.

Optimización del tiempo de proceso

Optimizar la ejecución de los controladores de eventos implica eliminar devoluciones de llamadas innecesarias, optimizar las consultas DOM y minimizar las operaciones síncronas durante el procesamiento de interacciones. El procesamiento intensivo durante los controladores de eventos aumenta directamente la duración del procesamiento y reduce el rendimiento de la INP.

Aplazar las operaciones no críticas evita bloquear el procesamiento de interacciones con tareas que no afectan inmediatamente la acción prevista del usuario. Utilice operaciones asíncronas para el seguimiento analítico, actualizaciones DOM no esenciales y otras operaciones que puedan ocurrir después de la respuesta a la interacción principal.

La división de código y la carga diferida reducen el tamaño de los paquetes de JavaScript, lo que disminuye el tiempo de análisis y ejecución que puede interferir con el procesamiento de interacciones. Unos paquetes iniciales más pequeños implican menos código que compite por los recursos del hilo principal cuando se producen interacciones.

Optimizar el análisis y el tiempo de ejecución de scripts de terceros evita que diferentes scripts bloqueen el procesamiento de interacciones. Cargue los scripts no esenciales después de que sea probable que haya interacciones del usuario o utilice atributos asíncronos o de aplazamiento para evitar el bloqueo de los recursos del hilo principal.

Minimizar la demora de presentación

Reducir la complejidad del DOM ayuda al navegador a renderizar las actualizaciones más rápidamente una vez finalizado el procesamiento de la interacción. Las páginas con menos de 1400 nodos DOM suelen experimentar una renderización más rápida, lo que se traduce en menores retrasos de presentación y mejores puntuaciones INP generales.

Optimizar los cálculos de CSS y diseño reduce el tiempo necesario para calcular los cambios visuales tras las interacciones. Evite selectores complejos, minimice las propiedades que activan el diseño y utilice la contención de CSS para limitar el alcance de los recálculos de estilo.

Evitar operaciones pesadas en las devoluciones de llamada requestAnimationFrame evita bloquear la siguiente pintura de fotograma tras el procesamiento de la interacción. Mantenga las devoluciones de llamada de animación ligeras y posponga el trabajo pesado para evitar prolongar el retraso de la presentación.

Priorizar el contenido de la mitad superior de la página para obtener actualizaciones visuales más rápidas garantiza que la retroalimentación de la interacción aparezca rápidamente en la ventana gráfica, donde los usuarios esperan una respuesta inmediata. Optimice los elementos críticos de la ruta de renderizado que afectan a las respuestas visibles de la interacción.

Comparación: Impacto de la presentación  por parte del servidor (Server-Side) y por parte del cliente (Client-Side)

La renderización del lado del servidor generalmente ofrece un mejor rendimiento inicial de INP, ya que el contenido llega como HTML, que los navegadores pueden analizar de forma incremental, lo que reduce el bloqueo del hilo principal durante las primeras interacciones del usuario. Sin embargo, la SSR requiere una implementación cuidadosa para evitar problemas de rendimiento relacionados con la hidratación.

La renderización del lado del cliente se enfrenta a desafíos con grandes paquetes de JavaScript que deben ejecutarse antes de que las interacciones sean completamente responsivas, aunque los frameworks modernos han mejorado significativamente con la división de código y las técnicas de mejora progresiva.

Problemas y soluciones comunes de INP

Los entornos de producción suelen encontrar patrones específicos de problemas de INP que pueden abordarse mediante estrategias de optimización específicas. Comprender estos problemas comunes permite un diagnóstico y una resolución más rápidos de los problemas de capacidad de respuesta que afectan a los usuarios reales.

Problema 1: Tareas largas que bloquean el hilo principal

Las tareas largas que superan los 50 milisegundos bloquean el hilo principal e impiden una respuesta inmediata a las interacciones del usuario, lo que contribuye directamente al retraso de entrada y a puntuaciones INP bajas.

Solución: Implementar la programación y la cesión de tareas con setTimeout o scheduler.postTask para dividir la ejecución monolítica de JavaScript en fragmentos más pequeños. Este enfoque permite que el navegador procese las interacciones del usuario entre fragmentos de tareas, manteniendo la capacidad de respuesta durante operaciones pesadas.

Los navegadores modernos admiten scheduler.postTask para una programación de tareas más precisa, mientras que setTimeout ofrece una mayor compatibilidad para devolver el control al navegador durante operaciones de larga duración.

Problemas 2: Scripts de terceros de alto rendimiento

Los scripts de terceros para análisis, publicidad, redes sociales y otros servicios suelen ejecutarse en momentos inapropiados, bloqueando el hilo principal cuando los usuarios intentan interactuar con los elementos de la página.

Solución: Aplazar los scripts no críticos mediante atributos asíncronos y de aplazamiento, implementar la priorización de carga para garantizar que el código crítico para la interacción se ejecute primero y considerar cargar los scripts de terceros solo después de detectar la interacción del usuario.

Evaluar si todos los scripts de terceros son esenciales para el funcionamiento inicial de la página y eliminar o aplazar los scripts que no respalden directamente las interacciones principales del usuario durante el período crítico de interacción.

Problema 3: DOM extenso y diseños complejos

Las páginas con demasiados nodos DOM o diseños CSS complejos requieren más tiempo de procesamiento para las actualizaciones activadas por la interacción, lo que genera mayores retrasos en la presentación y un bajo rendimiento de INP.

Solución: Optimizar la estructura del DOM para que se mantenga por debajo de los 1400 nodos siempre que sea posible, implementar desplazamiento virtual para listas grandes, reducir la complejidad del diseño mediante CSS simplificado y utilizar la contención de CSS para limitar el alcance de los recálculos de estilo activados por las interacciones.

Considerar el uso de CSS Grid y Flexbox para obtener diseños más eficientes que requieran menos sobrecarga computacional durante las actualizaciones dinámicas activadas por las interacciones del usuario.

Problema 4: Superposición de interacciones y entrada rápida del usuario

Los usuarios suelen interactuar rápidamente con varios elementos de la página, creando interacciones superpuestas que pueden saturar las capacidades de procesamiento y generar retrasos acumulativos que afectan al valor INP final.

Solución: Implementar la eliminación de rebotes y la limitación de recursos para las interacciones que no requieren una respuesta inmediata, utilizar una gestión de eventos adecuada para evitar que varios controladores de eventos procesen simultáneamente y priorizar las interacciones visibles para el usuario sobre el procesamiento en segundo plano.

Diseñar patrones de interacción que gestionen la entrada rápida del usuario con fluidez, garantizando que la interacción más reciente tenga prioridad cuando los recursos de procesamiento sean limitados.

Conclusión y pasos siguientes

INP representa una evolución crucial en la medición de la capacidad de respuesta de las páginas, ya que proporciona información completa sobre la calidad de la experiencia del usuario durante las visitas completas a la página, en lugar de solo en las interacciones iniciales. Como la Core Web Vital más reciente de Google, optimizar INP impacta directamente en el posicionamiento en buscadores, a la vez que mejora la satisfacción real del usuario con la capacidad de respuesta de su sitio web.

Para empezar:

1. Auditar el rendimiento actual de INP con Google Search Console para identificar qué páginas y grupos de páginas presentan problemas de INP que afectan el rendimiento de búsqueda.
2. Configurar la monitorización de usuarios reales para identificar interacciones problemáticas y comprender qué interacciones específicas del usuario causan los mayores retrasos en entornos de producción.
3. Empezar la optimización con mejoras de mayor impacto y menor esfuerzo, como aplazar JavaScript no crítico y dividir tareas largas que bloquean el hilo principal durante interacciones comunes.

Temas relacionados: Optimización de otras Core Web Vitals como Largest Contentful Paint (LCP) y Cumulative Layout Shift (CLS), implementación de presupuestos de rendimiento para la monitorización continua de INP y establecimiento de estrategias de monitorización para realizar un seguimiento de las mejoras de INP a lo largo del tiempo.

Recursos adicionales

• La documentación oficial de INP de Google en web.dev ofrece detalles técnicos completos y directrices de medición.
• Tutoriales de creación de perfiles de rendimiento de Chrome DevTools para analizar componentes de interacción e identificar oportunidades de optimización.
• Documentación de la biblioteca JavaScript Web-Vitals para implementar el seguimiento y la medición de INP personalizados.
• Extensiones del navegador y herramientas de monitorización para la evaluación continua de INP y la depuración en tiempo real durante el desarrollo.