Métrica INP: 7 consejos para su optimización

La métrica de interactividad Interaction to Next Paint (INP) es un componente crucial de los Core Web Vitals. En algunos clientes, también hemos observado su impacto en los indicadores de negocio.

Sin embargo, la INP no es precisamente la métrica más sencilla de optimizar, por eso hemos seleccionado, a partir de nuestra experiencia, los problemas más comunes y cómo resolverlos.

1) Optimiza el número de elementos DOM en la página#

El número de elementos DOM en una página a menudo está estrechamente relacionado con el rendimiento de las funciones que interactúan directamente con el DOM en JavaScript. Cuantos más elementos DOM, más datos debe procesar JavaScript, y más tiempo lleva hacerlo.

Un DOM extenso incrementa la métrica INP, por ejemplo, durante la hidratación si tu sitio utiliza frameworks de JavaScript como React.js. También pueden causar problemas los scripts analíticos de terceros que inspeccionan las páginas y la información en ellas, como el píxel de TikTok.

Según nuestra experiencia (y las recomendaciones de Google), el tamaño ideal del DOM es de hasta 1,500 elementos. Si tienes más en tu sitio, considera optimizarlo. Los componentes más comunes que incrementan el número de elementos DOM en una página son los megamenús o las opciones extensas de filtrado en categorías.

En este sitio, mejoramos la métrica INP en decenas de puntos porcentuales reduciendo la complejidad del DOM en el megamenú (manteniendo enlaces para SEO).

Puedes optimizar la métrica INP reduciendo la complejidad de los elementos (el contenido permanece para SEO, pero los elementos circundantes se cargan de manera diferida) o cargando elementos fuera de la primera vista solo cuando se desplaza usando Intersection Observer.

2) Minimiza el número de scripts pesados como Hotjar, Smartlook, píxel de TikTok, etc.#

La implementación despreocupada de código de terceros puede rápidamente llevar la métrica INP de tu web a problemas. A menudo vemos herramientas analíticas recopilando datos que nadie observa.

Puede que los datos solo sean necesarios por un periodo limitado, pero tras finalizar la medición, el código no se elimina del sitio. Considera, junto con el equipo de marketing, si algunas herramientas analíticas operan innecesariamente en tus sitios. Si es así, elimina completamente el código del sitio.

Recomendamos realizar este tipo de mantenimiento a intervalos regulares, especialmente si el sitio se desarrolla a largo plazo y su gestión involucra a varios departamentos independientes.

3) Actualiza componentes a versiones más nuevas#

En nuestros análisis, encontramos situaciones donde altas INP tras la interacción son causadas por versiones antiguas de diversos componentes de JavaScript.

Puede ser problemático, por ejemplo, una versión antigua de la ventana modal Fancybox, que al hacer clic provoca tareas largas en el sitio y prolonga el tiempo de interacción.

Tarea larga en JS creada por una versión antigua de Fancybox.

En cualquier caso, es una buena idea revisar los componentes utilizados en el proyecto y considerar actualizarlos a versiones más nuevas.

También podría ser útil reemplazar completamente ciertos componentes, especialmente carruseles populares como Owl o Slick, que son bastante exigentes en cuanto a rendimiento. Busca carruseles que funcionen sin usar posiciones absolutas y recalculación de la propiedad left en CSS, sino utilizando la propiedad transform. Un ejemplo de tal carrusel es Embla.

4) Intersection Observer: pospón la inicialización de componentes pesados que no están en el primer viewport#

Otra opción de optimización es posponer la inicialización de componentes pesados, como los carruseles mencionados anteriormente. Si los componentes están fuera del primer viewport, no es necesario inicializarlos al cargar la página. Es mejor esperar y, cuando el usuario se acerque mientras navega por la página, inicializarlos usando el Intersection Observer API.

let observer = new IntersectionObserver(callback, options);
let target = document.querySelector('#lazy-component');

observer.observe(target);

La otra opción es esperar a la inactividad del navegador, utilizando Idle Request Callback.

5) Divide las tareas largas en JavaScript#

El mejor JavaScript es aquel que no está en la página. El código JavaScript puede crear, y a menudo lo hace, tareas largas (medidas con la métrica JS Long Tasks (JSLT)). Estas tareas deben dividirse en partes más pequeñas que se ejecuten secuencialmente y no bloqueen el hilo principal del navegador.

Una forma efectiva de dividir Long Tasks es envolver el código en la función setTimeout. Esta técnica se puede utilizar, por ejemplo, para dividir interacciones que contienen mucho código analítico que ralentiza operaciones importantes.

setTimeout(() => {
  kod_odlozeny_do_nasledujiciho_renderu();
}, 0);

En el futuro, sigue de cerca scheduler.yield() o Long Animation Frames API.

6) No hagas esperar mucho tiempo a los usuarios#

Si esperas un procesamiento largo tras la interacción del usuario (clic, tap, entrada de teclado, etc.) como AJAX/fetch, asegúrate de cambiar el renderizado en la pantalla del usuario. El cambio visual debe ocurrir lo antes posible, según Google, dentro del límite de 200 ms, y muestra un indicador de carga a los usuarios después de la interacción.

7) Optimiza React, no solo la hidratación#

Nos detenemos un momento en la optimización de React y frameworks similares. Muchos problemas surgen durante la hidratación, que es el momento en que el sitio cobra vida.

Durante la hidratación, el navegador procesa todos los recursos disponibles y construye la página, que ya puede responder a las entradas del usuario. Esto conlleva una carga considerable para el navegador y muchas tareas largas (medidas con la métrica JS Long Tasks (JSLT)).

En el panel de Performance dentro de Chrome DevTools puedes ver el impacto de la hidratación.

La buena noticia es que puedes optimizar la hidratación. De los métodos que utilizamos, hemos seleccionado los siguientes:

• Reduce el tamaño del DOM
• Crea dos versiones de componentes: simple y completa
• Utiliza <Suspense>
• Ten cuidado con los errores de hidratación
• Sé cauteloso con useEffect()
• Aprovecha los Server Components

Cubrimos la optimización de las métricas Core Web Vitals en su totalidad, lee nuestros otros textos:

• Optimización de la métrica LCP
• Optimización de la métrica CLS