La estructura Pagespeed de Google, a la que estamos acostumbrados desde hace años, se basa en garantizar que los sitios web se carguen y funcionen rápidamente. Al producir parámetros medibles y aprovechar los datos anónimos recopilados de la participación de mercado de Chrome, Google utiliza estas métricas como indicadores de SEO. Con la introducción de Interaction to Next Paint (INP) en 2022, el enfoque ha pasado de la mera velocidad de carga de la página a una perspectiva más amplia del rendimiento web. INP no sólo mide la rapidez con la que se carga una página, sino también la rapidez con la que se procesan las interacciones del usuario en la página. Básicamente, convierte la experiencia de navegación del sitio en una métrica de Pagespeed.
En el blog de Kerem, se sugiere que el término "Retraso de interacción general" encaja bien con este concepto, que Google también explica bien en su propio vídeo. Sin embargo, para comprender completamente esta métrica, profundizaremos en el tema en las siguientes secciones.
¿Cuál es la explicación de la duración del INP?
La duración del INP incluye:
- El tiempo entre la interacción del usuario con la página y la ejecución del controlador de eventos.
- El tiempo de ejecución del script.
- El tiempo desde la ejecución del código hasta la visualización del resultado al usuario.
Estos procesos suelen ocurrir en milisegundos, pero en los dispositivos móviles, especialmente en los teléfonos Android más antiguos con poca potencia de CPU, estos retrasos (latencia) a menudo pueden ser perceptibles. Vale la pena señalar que los datos del INP, al igual que otros datos de Lighthouse, se recopilan de forma anónima y se evalúan en función de la Percentil 75. Por lo tanto, el objetivo es crear aplicaciones que funcionen bien en dispositivos promedio y no solo en dispositivos de alta gama.
Ejemplos de la vida real de duración del INP
A continuación se muestran algunos ejemplos de la vida real extraídos de las páginas de Internet que visitamos a diario para explicar este concepto:
Ingresar dirección en un sitio de comercio electrónico
Cuando compra en un sitio de comercio electrónico e ingresa la dirección de envío, primero selecciona la provincia. Luego, cuando hace clic en el cuadro de selección para elegir el distrito, espera un momento a que se cargue el resultado de Ajax y, después de un tiempo determinado, se carga la información del distrito. Este es un buen ejemplo de INP. Mejorar la experiencia del usuario en este ejemplo podría implicar agregar un "indicador de carga" para informar al usuario sobre el proceso Ajax.
Selección de clasificación
Cuando se utilizan filtros en las páginas de listado de productos, si los productos filtrados no se administran correctamente después de hacer clic en una casilla de verificación, aumentará el INP. Usar JS menos complejo y considerar la experiencia del usuario durante las operaciones de filtrado puede ayudar a mantener el valor INP lo más alto posible.
Galerías de fotos de productos
El tiempo que los usuarios esperan a que se cargue la galería de fotos después de hacer clic en la foto de un producto en las páginas de detalles del producto puede afectar potencialmente el INP.
Botón de reserva
El retraso en la interacción entre hacer clic en el botón "Hacer una reserva" y la página siguiente es un ejemplo de INP.
Botón Agregar al carrito
Los milisegundos de retraso al hacer clic en el botón "Agregar al carrito" y preguntarse si el artículo se agregó al carrito o no define perfectamente el INP.
Como se ve en estos ejemplos, las trampas INP están presentes en escenarios que afectan tanto al SEO como a las tasas de conversión directa.
¿Cómo mejorar el INP?
- Utilice bibliotecas frontend JS actualizadas: Mejorar el rendimiento mediante el uso de bibliotecas frontend JS modernas como Vue, React y Angular es beneficioso ya que ofrecen ventajas de rendimiento y reutilización.
- Minimizar la complejidad de las bibliotecas JS: Es recomendable utilizar bibliotecas JS menos complejas. Personalmente, recomiendo evitar jQuery tanto como sea posible.
Niveles métricos de INP aceptables
Los valores umbral para Los niveles de INP buenos, medios y malos son 200 milisegundos y 500 milisegundos.. Mantener el INP por debajo de estos umbrales es crucial para mantener una buena experiencia de usuario y un rendimiento web general.
