Cómo optimizar INP: Interaction to Next Paint

Las Core Web Vitals fueron lanzadas en mayo de 2020. Estas métricas de rendimiento web son parte de la iniciativa de Google para mejorar la experiencia del usuario al medir aspectos clave de la velocidad, interactividad y estabilidad visual de un sitio web.

El objetivo es conseguir una web más rápida y eficiente para todos, especialmente para sus robots de búsqueda, que diariamente tienen que rastrear billones de páginas.

Las métricas que afectan al SEO

La experiencia de usuario lo conforman muchas métricas, no obstante, sólo tres son las que, a día de hoy, se denominan como Core Web Vitals y se relacionan con una mejora en el posicionamiento SEO.

• Largest Contentful Paint (LCP): Mide el tiempo que tarda en cargarse el elemento más grande y visible dentro del viewport del usuario. Es una métrica que evalúa la velocidad de carga inicial y ayuda a determinar si el contenido principal se muestra rápidamente.

• First Input Delay (FID): Mide el tiempo de respuesta entre la primera interacción del usuario (clic, toque, etc.) y la capacidad del navegador para responder a esa interacción. Es una métrica que evalúa la interactividad del sitio web.

• Cumulative Layout Shift (CLS): Mide la estabilidad visual del sitio web midiendo la cantidad de cambios inesperados en el diseño durante la carga. Evalúa la consistencia visual y ayuda a evitar que los elementos se desplacen o salten mientras el usuario interactúa con la página.

INP sustituye a FID

La métrica FID evalúa la capacidad de respuesta (responsiveness) de una página, pero tiene ciertas limitaciones. La principal, es que FID solo evalúa dicha capacidad de respuesta la primera vez que un usuario interactúa con la página. La primera interacción es importante pero no necesariamente representativa de todas las interacciones a lo largo de la interacción con la página. Además, FID sólo mide el tiempo que el navegador tuvo que esperar.

Debido a esta limitación, se iniciaron una serie de experimentos hasta determinar que INP (Interaction to Next Paint) evalúa el responsiveness de una manera más realista y continuada en el tiempo.

INP formará parte de las Core Web Vitals a partir de marzo de 2024. Fue lanzada en 2022 como prueba experimental y en marzo de 2023 se anunció su futura integración en las CWV. Se ha habilitado un año de plazo para que la gente pueda trabajar y adaptar las páginas.

INP valora negativamente malas experiencias en la interacción con la página por lo que, aunque aún tengamos hasta marzo de 2024 para que aporte valor a la estrategia SEO, si disponemos de problemas, estarán afectando ahora mismo a nuestros usuarios.

Cómo optimizar INP

El 93% de las páginas tienen un buen valor en FID, pero sólo el 65% lo consiguen para INP en versión móvil. Esto podría justificar la campaña de email de Google avisando de valores bajos para esta métrica y urgiendo a optimizarla.

Un apunte a tener en cuenta es que la métrica INP mide usuarios reales. No se puede monitorizar en pruebas locales. Recomiendo la lectura de diferencia entre datos reales y datos de laboratorio en las Core Web Vitals.

Google ha creado una guía de optimización para INP que incluye los siguientes pasos:

1. Identificar interacciones de los usuarios lentas (siempre en los datos de campo o reales, dado que en los de prueba no se refleja esta información por necesitar interacción con el usuario). Puede ser un clic, pulsación de una tecla, etc. En el caso de no tener datos de campo (por ser una página nueva), tenemos las siguiente opciones:

   1. Podemos emular navegaciones y validar, desde el navegador, tiempos y posibles interacciones lentas. No será tan fiable, pero al menos podemos tener un punto de partida. Por ejemplo, en el caso de un ecommerce, podríamos analizar flujos de navegación como navegar por categorías, personalizar producto, añadir al carrito, selección de método de pago, etc.

   2. La métrica Total Blocking Time (TBT) analiza interacciones en común con INP, por lo que puede ser un buen punto de partida para identificar posibles mejoras. Si tampoco tenemos acceso a los datos de campo/reales de TBT, las herramientas Lighthouse o PageSpeed Insights nos darán información al respecto. Debemos centrarnos en aquellos aspectos que arrojan una puntuación baja para TBT.

   3. Podemos disponer de un sistema de monitorización de usuarios en tiempo real, comúnmente conocidos como RUM (Real User Monitoring). De aquí extraeremos información relevante acerca del contexto de lo que mide INP.

2. Una vez identificado un problema, debemos analizarlo y solucionarlo en el laboratorio. Para ello podemos seguir esta guía. Una herramienta que nos ayudará a reproducir y entender los problemas es la extensión de navegador de Web Vitals.

¿Por dónde empiezo?

En el informe de Core Web Vitals de Google Search Console, tendremos visibilidad acerca de las URL (individuales o agrupadas) que no están teniendo un buen rendimiento para la métrica INP. Puede ser un buen punto de partida.

No obstante, si queremos obtener más detalle, la mejor aproximación será utilizar la herramienta de PageSpeed Insights de Google (PSI) para acceder a un análisis más profundo. Aquí debemos tener cuidado en entender y analizar los datos que realmente nos interesan. Si una URL no tiene suficiente información basada en datos de usuarios reales, la herramienta PSI mostrará información de todo el dominio. Estar atentos a este aviso, dado que condicionará los resultados de la prueba.

Optimizar la interacción de los usuarios con nuestra página es una tarea que debe personalizarse y adaptarse a cada dominio y situación, por ello será necesario conocer y optimizar cada flujo de navegación. En la siguiente imagen podemos ver un ejemplo de elementos que nos ayudan a entender lo que ocurre cuando un usuario hace clic en un elemento de nuestra web hasta que ésta responde. Ese tiempo será clave en la optimización de nuestra métrica INP.

Algunos aspectos clave que nos pueden ayudar en esta situación, son:

• Revisar y optimizar el Javascript de nuestra página.

• Eliminar los códigos que no sean necesarios.

• Optimizar las etiquetas de nuestro gestor (Google Tag Manager).

• Revisar y eliminar plugins antiguos que ya no se utilicen.

• Revisar y optimizar plataformas de anuncios (Google Ads, Meta, Twitter, etc).

Métricas secundarias

Además de las tres principales Core Web Vitals, existen otras métricas secundarias que también son importantes para evaluar el rendimiento y la experiencia del usuario en un sitio web. Algunas de estas métricas adicionales son:

• Time to First Byte (TTFB): Mide el tiempo que tarda el navegador en recibir el primer byte de datos del servidor. Es un indicador de la rapidez con la que el servidor responde a una solicitud y puede afectar significativamente el tiempo total de carga de la página.

• First Contentful Paint (FCP): Mide el tiempo que tarda en aparecer el primer contenido en pantalla después de realizar una solicitud al servidor. Es una métrica que indica cuándo comienza a mostrarse el contenido al usuario.

• Speed Index (SI): Mide la rapidez con la que los contenidos visibles se cargan en la pantalla. Esta métrica proporciona una estimación del tiempo que tarda en aparecer el contenido visible y cuán pronto el usuario puede interactuar con él.

• Time to Interactive (TTI): Mide el tiempo que tarda una página web en volverse completamente interactiva, es decir, cuándo los usuarios pueden interactuar plenamente con los elementos de la página.

• Total Blocking Time (TBT): Mide el tiempo total durante el cual la página está bloqueada y no responde a las interacciones del usuario. Es una métrica relacionada con la interactividad y puede afectar la experiencia del usuario.