Interacción con Next Paint (INP)

Interaction to Next Paint (INP) es una métrica que mide la rapidez con la que un sitio web responde a las interacciones del usuario, como clics, toques y pulsaciones de teclas. La puntuación indica cuántos milisegundos transcurren entre que un visitante realiza una acción y el navegador muestra una respuesta visual. Google utiliza INP como métrica oficial de Core Web Vitals desde marzo de 2024, en sustitución de First Input Delay. Una puntuación INP baja significa que su sitio web parece rápido, una puntuación alta causa frustración y aumenta la probabilidad de que los visitantes abandonen.

Cómo funciona y qué mide Interaction to Next Paint

INP mide el mayor retardo de interacción durante toda la visita a una página. Cada vez que un visitante hace clic, toca o pulsa una tecla, el navegador inicia una serie de acciones: procesar el evento, ejecutar JavaScript, ajustar el DOM y redibujar la pantalla. INP examina el tiempo transcurrido entre la acción del usuario y el momento en que el siguiente fotograma se hace visible. Google no toma el retraso medio, sino el percentil 75 de todas las interacciones: la puntuación experimentada por el 75% de sus visitantes. Una puntuación por debajo de 200 milisegundos es buena, entre 200 y 500 milisegundos debería ser mejor, por encima de 500 milisegundos es mala. En la práctica, para los sitios web de PYME, a menudo vemos puntuaciones entre 300 y 800 milisegundos, especialmente en móviles y para páginas con mucho JavaScript.

Por qué Google introdujo INP y sustituyó First Input Delay

First Input Delay sólo medía la primera interacción en una página y sólo tenía en cuenta el tiempo de procesamiento, no la respuesta visual. Esto daba una imagen incompleta: un visitante podía hacer clic 10 veces y experimentar una respuesta lenta nueve veces, pero la puntuación FID seguía siendo verde. INP mide todas las interacciones durante la visita y tiene en cuenta el ciclo completo hasta que el navegador muestra algo. Eso hace que la métrica sea mucho más representativa de la velocidad percibida. Google anunció el cambio en 2022 e incorporó oficialmente INP a Core Web Vitals en marzo de 2024. Los sitios web que obtienen buenas puntuaciones en INP reciben un ligero impulso en su clasificación; las puntuaciones bajas pueden costar visitantes y conversiones.

¿Qué es una buena puntuación INP para sitios web de PYME?

Een lage INP-score zorgt ervoor dat je website direct aanvoelt. Bezoekers klikken op een knop en zien meteen feedback, waardoor ze vertrouwen houden en doorklikkken naar de volgende stap. Bij webshops merken we dat een verbetering van 400 naar 180 milliseconden het afbreekpercentage in het bestelproces met 8 tot 12 procent kan verlagen. Voor B2B-websites met formulieren of configurators is een goede INP essentieel: als een bezoeker een optie selecteert en er gebeurt niets zichtbaars, denkt hij dat de site kapot is. Een doordachte SEO-strategie houdt altijd rekening met Core Web Vitals, omdat Google snelheid en gebruikerservaring meeneemt in de ranking. Je kunt je INP-score monitoren via Google Search Console en PageSpeed Insights, waar je ook concrete verbeterpunten krijgt per pagina.

La INP es especialmente valiosa para las páginas en las que los visitantes realizan acciones de forma activa: rellenar formularios, filtrar productos, abrir menús o desplazarse por el contenido. A continuación, cuatro situaciones concretas en las que INP marca la diferencia entre una experiencia fluida y un sitio web lento y frustrante.

Tiendas online con filtros y configuración de productos

En una tienda online, los visitantes utilizan filtros para seleccionar productos por talla, color, precio o existencias. Cada clic en una opción de filtro activa JavaScript, que actualiza la lista de productos. Si esa actualización tarda 600 milisegundos, la tienda online parece lenta y los visitantes la abandonan. Una buena puntuación INP por debajo de 200 milisegundos garantiza que la nueva lista de productos aparezca casi inmediatamente. En el caso de las tiendas online con entre 500 y 2.000 productos, a menudo vemos que las pesadas bibliotecas de JavaScript o las consultas a bases de datos no optimizadas hacen subir el INP. Si se procesan los filtros en el servidor o se aplica la carga lenta, la puntuación puede mejorar entre un 40% y un 60%. Esto se traduce directamente en más visitas a la página del producto y una mayor conversión, ya que los visitantes encuentran lo que buscan más rápidamente.

Formularios y páginas de generación de contactos

En los formularios de contacto, las solicitudes de presupuesto o las páginas de registro, cada entrada debe proporcionar información instantánea: una marca de verificación para un campo rellenado correctamente, un mensaje de error para una dirección de correo electrónico incorrecta o un tooltip para un campo obligatorio. Si la respuesta no aparece hasta pasados 400 milisegundos, el visitante no sabe si su entrada se ha registrado y rellena el formulario dos veces o hace clic. Un INP bajo proporciona validación instantánea y sensación de control. En sitios web B2B con formularios de varias etapas, comprobamos que mejorar la puntuación INP de 500 a 180 milisegundos aumenta el número de formularios completados entre un 15% y un 20%. Técnicamente, esto se consigue realizando la validación en el cliente con scripts ligeros y cargando el pesado seguimiento de terceros sólo después del envío.

Sitios web para móviles con menús hamburguesa y acordeones

En el móvil, los visitantes tocan un menú hamburguesa, un menú desplegable o un acordeón para ver más contenido. Si el menú sólo se abre al cabo de 500 milisegundos, vuelven a tocarlo y se irritan. Una buena puntuación INP por debajo de 200 milisegundos garantiza que el menú se abra inmediatamente. Los navegadores móviles suelen tener menos potencia de cálculo que los de sobremesa, por lo que las interacciones con mucho JavaScript tardan más. Si se utilizan animaciones CSS en lugar de JavaScript y se ralentizan los scripts de terceros con async o defer, se puede reducir el INP en móviles entre un 30 y un 50 por ciento. Esto es crucial porque más del 60% de los visitantes de sitios web de PYMES vienen a través de móviles y Google indexa primero los móviles.

Cuadros de mando y aplicaciones con datos en tiempo real

En los cuadros de mando o aplicaciones web, los usuarios hacen clic en pestañas, gráficos o filtros de fechas para ver los datos. Si el gráfico sólo se actualiza al cabo de 700 milisegundos, la aplicación parece poco manejable y los usuarios confían menos en los datos. Un INP bajo garantiza que la interfaz responda al instante, incluso para cálculos complejos. En la práctica, vemos que los cuadros de mando con mucha búsqueda de datos y renderización suelen tener puntuaciones INP superiores a 600 milisegundos. Si se precargan los datos, se aplica el desplazamiento virtual y se trasladan los cálculos pesados a una API, se puede reducir la puntuación. Esto mejora la experiencia del usuario y aumenta la probabilidad de que los usuarios vuelvan a diario.

Cuándo la interacción con Next Paint es el enfoque adecuado y cuándo no lo es

La INP es relevante para cualquier sitio web en el que los visitantes interactúen activamente: haciendo clic, pulsando, tecleando o desplazándose. Si se trata de un sitio web con contenido mayoritariamente estático y pocos elementos interactivos, entonces es más importante el mayor pintado de contenido o el desplazamiento de diseño acumulativo. Pero en cuanto tenga formularios, filtros, menús o configuradores, tendrá que dar prioridad a INP. Se mejora una buena puntuación INP optimizando JavaScript, aplazando los scripts de terceros y gestionando las interacciones del lado del servidor o con código ligero del lado del cliente. Empiece por las páginas que generan más tráfico y conversiones, ya que es ahí donde una mejora tendrá el mayor impacto.