Interaction to Next Paint (INP) o en Español «Interacción a Nueva Pintada» es una nueva métrica introducida por Google y que se encuentra en estado experimental, métrica que se encarga de medir capacidad de respuesta de una página web a lo largo de todas las interacciones en una página. Una INP baja garantiza que la página responda de manera confiable en todo momento, lo que repercute directamente en la experiencia de usuario.
Tabla de contenido
Para calcular la métrica INP, 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 Interaction to Next Paint (INP).
¿Percentil 98 o el INP más bajo?
INP es una métrica que tiene como objetivo representar la latencia de interacción general de una página seleccionando una de las interacciones más largas que ocurren cuando un usuario visita una página. Para páginas con menos de 50 interacciones en total, su INP será la interacción con peor latencia. Para páginas con muchas interacciones (50+), el valor de INP suele ser el percentil 98 de latencia de interacción.
¿Cómo funciona exactamente Interaction to Next Paint (INP)?
Una interacción ocurre cuando un visitante hace clic, toca o se desplaza en una página web. Esa interacción podría resultar en un cambio en la presentación en la pantalla. El valor de Interaction to Next Paint (INP) mide el tiempo entre el clic y el cambio en la capa de presentación, es decir, lo que ve el usuario.
El valor de Interaction to Next Paint consiste en la duración única más larga de cualquier evento que sea parte de la interacción de un usuario, donde la duración se mide desde el punto en el que el usuario interactuó con la página hasta que se presenta el siguiente cuadro 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:
- El retraso de entrada, que es el tiempo entre el momento en que el usuario interactúa con la página y el momento en que se ejecutan los controladores de eventos.
- El tiempo de procesamiento, que es la cantidad total de tiempo que lleva ejecutar el código en los controladores de eventos asociados.
- El retraso de presentación, que es el tiempo entre el momento en que los controladores de eventos han terminado de ejecutarse y el momento en que el navegador presenta el siguiente cuadro.
¿Cuáles son los valores buenos y malos de la métrica Interaction to Next Paint (INP)?
Para dar por aprobada la métrica Core Web Vitals for the Interaction to Next Paint, el percentil 75 de las cargas de página registradas en el campo debe permanecer por debajo de los 200 ms:
- Un INP por debajo o a 200 milisegundos se traduce en que la página tiene una buena capacidad de respuesta.
- Un INP entre 200 y 500 milisegundos significa que la capacidad de respuesta de la página necesita mejorar.
- Un INP superior a 500 milisegundos es un indicativo importante de que la página tiene poca capacidad de respuesta.
¿Cómo medir la métrica Interaction to Next Paint (INP)?
La métrica Interaction to Next Paint se puede calcular mediante algunas herramientas de laboratorio o através de herramientas de campo. La forma más sencilla de medir la Interaction to Next Paint es a través de PageSpeed o mediante Lighthouse en el modo de «Intervalo de tiempo». Puedes aprender más al respecto aquí: https://developer.chrome.com/en/blog/inp-tools-2022/
¿Cómo mejorar el puntaje de Interaction to Next Paint?
El puntaje obtenido en Interaction to Next Paint es una métrica complicada pero no imposible de mejorar, pues por lo general requiere conocimientos de programación avanzados. Tu página puede ser realmente rápida y responder instantáneamente la mayor parte del tiempo y aun así puede que una única interacción lenta afecte la métrica – esto es complicado porque incluso puede usarse por atacantes para efectuar algo de SEO negativo bajando dicha métrica para engañar a Google.
Por lo general, casi cualquier página responde menos durante la fase de carga e inicialización de la página. Es en este momento cuando se realiza la mayor parte del trabajo del hilo principal (parsing, decodificación, representación y ejecución de secuencias de comandos).
Proporcione una respuesta inmediata a las interacciones de los usuarios para asegurarse de que la página responda con inmediatez a las peticiones del usuario
Por lo tanto, cuando un visitante realiza una acción como enviar un formulario o desplegar un menú, no esperes la confirmación del lado del servidor para mostrar una respuesta o cambio en pantalla. Mensajes tardios del tipo formulario enviado o producto añadido a la cesta pueden repercutir negativamente en esta métrica por lo que debe cabiarse para que la respuesta sea inmediata – por ejemplo un mensaje de «procesando» que luego se actualice al valor deseado podría funcionar bien.
Un ejemplo de esto sería el código de abajo
const msgFeedback = document.getElementById("msgFeedback");
const formulario = document.getElementById("form");
fomulario.addEventListener("submit", (evt) => {
evt.preventDefault();
msgFeedback.innerText = "Procesando... por favor espere";
let headers = new Headers({ Accept: "application/json" });
let formData = new FormData(formulario);
fetch("/enviar-formulario", { method: "POST", headers, body: formData })
.then(function (response) {
return response.json();
})
.then(function (jsonData) {
formulario.reset();
msgFeedback.innerText = jsonData.message;
});
});Lenguaje del código: JavaScript (javascript)Apenas el usuario interactua, esto es en el ejemplo enviar un formulario, se despliega un mensaje «procesadndo… por favor espere» y una vez tenemos la respuesta del servidor volvemos a actualizar la pantalla.
Esta es tan solo la mejora más obvia pero hay otros apartados que necesitan atención pues muchos plugins de wordpress retrasan la carga de los ficheros javascript para mejorar las métricas, esto puede estar afectando el valor de INP de forma negativa pues si el usuario intenta interactuar antes de la carga completa seguramente falle.
Necesitamos entonces identificar los scripts de las interacciones y darles prioridad de carga, optimizarlos y en algunos casos cambiar por completo la lógica de estos para que esta métrica tenga un valor acorde al estándar esperado.
Deja una respuesta