Mejora el Interaction to Next Paint (INP)

¿Qué es Interaction to Next Paint (INP)?

Interaction to Next Paint (INP) es una métrica relativamente nueva y emocionante que mide la capacidad de respuesta de una página web a lo largo de todas las interacciones en una página. Un Interaction to Next Paint bajo garantiza que la página será de forma fiable responsiva en todo momento. El INP se convertirá en un Core Web Vital en marzo de 2024, cuando Google reemplazará la métrica FID con la métrica INP.

Para calcular la métrica Interaction to Next Paint se guardan todas las diferencias entre cada interacción del usuario y el cambio de presentación final en la página. El número más alto de todas las interacciones (o el percentil 98) será la métrica final de Interaction to Next Paint (INP).

¿Percentil 98 o el peor INP?

INP es una métrica que busca representar la latencia general de interacción de una página seleccionando una de las interacciones individuales más largas que ocurren cuando un usuario visita una página. Para páginas con menos de 50 interacciones en total, INP es la interacción con la peor latencia. Para páginas con muchas interacciones, INP es generalmente el percentil 98 de la latencia de interacción.

¿Cómo funciona exactamente Interaction to Next Paint (INP)?

Una interacción ocurre cuando un visitante hace clic o toca una página. Esa interacción puede resultar en un cambio de presentación en la pantalla. Interaction to Next Paint (INP) mide el tiempo entre el clic y la presentación.

La latencia de una sola interacción consiste en la duración individual más larga de cualquier evento que forme parte de la interacción, donde la duración se mide desde el punto en que el usuario interactuó con la página hasta que se presenta el siguiente fotograma después de que se hayan ejecutado todos los controladores de eventos asociados. La duración es la suma de los siguientes intervalos de tiempo:

¿Cuáles son los valores buenos y malos de Interaction to Next Paint (INP)?

¿Cómo medir Interaction to Next Paint (INP)?

Interaction to Next Paint solo se puede medir con herramientas de campo. Para medir Interaction to Next Paint necesitamos interacción real del usuario. Google mide todas las interacciones que los usuarios reales de Chrome tienen con una página y las almacena en el conjunto de datos CrUX. El conjunto de datos CrUX es el conjunto de datos oficial para los Core Web Vitals.

Obtener las métricas oficiales de INP

Puedes obtener las métricas oficiales de INP en PageSpeed Insights o en el panel CrUX y Google BigQuery. PageSpeed Insights te dará la puntuación del percentil 75 de los últimos 28 días. Google BigQuery (a través de datastudio) te dará más contexto histórico.

Seguimiento de Interaction to Next Paint con Real User Monitoring

Aunque el conjunto de datos oficial CrUX es la fuente final para las métricas de Interaction to Next Paint, el conjunto de datos CrUX no es realmente utilizable porque está altamente anonimizado. El conjunto de datos CrUX no proporciona monitoreo en tiempo real ni permite mucho filtrado. Por eso los consultores de Web Performance típicamente se apoyan en Real User Monitoring.

Medir el Interaction to Next Paint de la sesión actual.

La forma más fácil de depurar el Interaction to Next Paint es a través de Lighthouse en modo 'timespan'. También podrías usar el Core Web Vitals Visualizer o si prefieres algo más práctico, la biblioteca JavaScript Web Vitals de Google

Registra el INP en la consola con la biblioteca JavaScript Web Vitals

<script type="module">
 import {onINP} 
 from 'https://unpkg.com/web-vitals@3/dist/web-vitals.attribution.js?module';
 onINP(console.log);
</script>

¿Cómo mejorar el Interaction to Next Paint?

Interaction to Next Paint es una métrica complicada. Tu página puede ser muy rápida y responder instantáneamente la mayor parte del tiempo. Desafortunadamente, si solo una interacción es lenta, afectará todo el Interaction to Next Paint.

Ahora recuerda, el INP se puede desglosar en el input delay, processing time y el presentation delay.

Consejo de PageSpeed: la mayoría de las veces el INP será mucho peor cuando un usuario interactúa con la página durante la fase de inicio de la carga de la página. Por eso, al depurar el INP tiene sentido registrar todas las interacciones así como el estado de carga de la página.

1. Minimiza el input delay - evita tareas largas en el hilo principal

Normalmente cualquier página es menos responsiva durante la fase de inicio. Es cuando se realiza la mayor parte del trabajo en el hilo principal (análisis, decodificación, renderizado y scripting). Para mantener el hilo principal lo más libre posible considera:

• Eliminar código no utilizado. Esto se puede hacer mediante un proceso llamado tree shaking (eliminación de código no utilizado) y code splitting (agrupar tu código de manera que esté dividido en muchos paquetes pequeños que se pueden cargar a medida que se necesitan).
• Cargar código no esencial durante el tiempo de inactividad del navegador. Por ejemplo, ¿realmente necesitas un widget de chat durante los primeros 500ms de carga de la página? No, ¡probablemente no!
• Identificar scripts lentos que requieren muchos recursos y reescribir el código para hacerlo más eficiente.
• Asegúrate de que tu página sea 'fácil de renderizar'. Evita tamaños de DOM grandes, demasiadas o enormes imágenes, demasiados videos, animaciones CSS, etc.
  

2. Minimiza el processing time - proporciona retroalimentación inmediata para asegurar que la página responda directamente a la entrada del usuario

Cuando un visitante realiza una acción como enviar un formulario o agregar un artículo de compra a la cesta, no esperes la confirmación del servidor (tu formulario ha sido enviado, tus artículos han sido agregados a la cesta), sino proporciona retroalimentación inmediata (estamos enviando tu formulario, agregando artículoX a la cesta).

También cede el control al hilo principal lo antes posible. Debido a que JavaScript hace algo llamado 'run to completion', bloqueará el hilo principal hasta que todo el código se haya ejecutado. Puedes crear manualmente un punto de interrupción donde el navegador puede actualizar el diseño (y luego continuar con el resto del código) cediendo el control al hilo principal. La forma más fácil de hacer esto es envolviendo partes del código en un setTimeout()

const formfeedbackEl = document.getElementById("formfeedback");
const formEl = document.getElementById("form");

formEl.addEventListener("submit", (evt) => {
  evt.preventDefault();
  formfeedbackEl.innerText = "Enviando formulario ... por favor espera";

  let headers = new Headers({ Accept: "application/json" });
  let formData = new FormData(formEl);
  fetch("/form-endpoint", { method: "POST", headers, body: formData })
    .then(function (response) {
      return response.json();
    })
    .then(function (jsonData) {
      formEl.reset();
      formfeedbackEl.innerText = jsonData.message;
    });
   setTimeout(other_code_that_needs_to_run(),0);
});

3. Minimiza el presentation delay - ¡mantén las cosas simples!