Optimización de las interacciones en el sitio web: estrategias clave para mejorar el INP y la experiencia del usuario

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

Interaction to Next Paint (INP) , es una métrica de Core Web Vitals que mide los tiempos de respuesta de las páginas web. Sustituye en marzo de 2024 al anterior First Input Delay (FID).Comprender el FID y el INPEl FID mide la capacidad de respuesta sólo cuando el sitio se carga por primera vez, mientras que el INP examina el tiempo de respuesta del sitio a las acciones del usuario durante toda la visita.

INP es una métrica que mide la rapidez con la que una página web responde a las acciones del usuario, como cuando hace clic en un botón. Funciona así:

1. funcionamiento del usuarioRealiza una acción en una página web, como hacer clic en un botón.
2. Enviar solicitudSu navegador envía una solicitud al servidor del sitio web para cargar nuevos contenidos.
3. Acceso a los contenidosEl servidor procesa la solicitud y envía el nuevo contenido a su navegador.
4. Mostrar contenido: Su navegador recibe el contenido y lo muestra en la página.
5. tiempo de mediciónEl navegador calcula el tiempo que transcurre desde que se hace clic hasta que el contenido se muestra por completo e informa de este tiempo como puntuación INP.

¿Por qué es importante la INP?

• Mejorar la experiencia del usuarioPuntuación INP: Una puntuación INP baja significa que la página web es responsiva y que el usuario no tiene que esperar para ver los resultados, lo que hace que la experiencia del usuario sea más fluida.
• Ayuda a la optimización de motores de búsqueda (SEO)INP: el INP es uno de los factores que Google utiliza para evaluar la experiencia de un sitio web y afecta a su clasificación en los resultados de búsqueda. Una buena puntuación INP puede ayudar a que su sitio web ocupe una posición más alta en los resultados de búsqueda.
• Reducir la tasa de rebote: Si una página web es responsive, es más probable que los usuarios permanezcan en ella para ver más contenido en lugar de abandonarla porque están esperando.

Diferencia entre INP y otras métricas de la red central

INP es diferente de otras métricas como el Desplazamiento Acumulativo de Diseño (CLS) y el Dibujo Máximo de Contenido (LCP).CLS mide la frecuencia y magnitud del movimiento de contenido en una página web, mientras que LCP se centra en la velocidad a la que se completa la carga del elemento de contenido más grande de la página.

¿Cómo medir el INP?

Los valores de INP se expresan en milisegundos (ms). El valor INP ideal debería ser inferior a 200 ms, lo que refleja un sitio web con una gran capacidad de respuesta. Si el valor INP está entre 200 milisegundos y 500 milisegundos, indica que el rendimiento podría mejorarse; por encima de 500 milisegundos, la respuesta se considera lenta y debe optimizarse.

¿Qué afecta al valor INP?

El valor INP, es decir, la velocidad a la que un sitio web responde a las acciones del usuario, puede verse afectado por varios factores:

• Tamaño y complejidad de las páginas: Las páginas más grandes o complejas pueden tardar más en responder a las acciones del usuario.
• Número de archivos JavaScript y CSS cargadosCuanto más archivos se carguen, más tardará el sitio en responder a las acciones del usuario.

¿Cómo puedo medir el valor INP de mi sitio web?

utilizarGoogle PageSpeed InsightsHerramienta para medir el INP y otras métricas de rendimiento del sitio web. Esta herramienta examina su sitio web y ofrece sugerencias de mejora para ayudarle a optimizarlo según las mejores prácticas. También le mostrará la velocidad de carga de su sitio web en dispositivos móviles y ordenadores de sobremesa.

Qué dicen los resultados de PageSpeed Insights

PageSpeed Insights proporciona dos tipos de resultados:

• Datos reales de los usuariosDatos de usuarios reales de Chrome, mostrados en la parte superior del informe, para ayudarle a comprender el rendimiento de su sitio en el mundo real.
• Datos de laboratorioEsta parte de los datos se basa en pruebas realizadas en condiciones controladas que proporcionan información técnica detallada y recomendaciones de optimización.

Los informes siguientes muestran las mismas métricas, pero proceden de un entorno de laboratorio controlado que se ejecuta en Google Lighthouse. Estos datos pueden utilizarse para probar nuevas funciones antes de su lanzamiento.

Si los datos INP del sitio no están disponibles, puede comprobar el Tiempo Total de Bloqueo (TBT). Esta métrica nos ayuda a comprender cuánto tiempo está la página sin responder a las acciones del usuario mientras se carga el sitio.

En la sección Resultados del diagnóstico, también encontrará sugerencias para mejorar las principales métricas web de su sitio, que pueden ayudarle a mejorar la experiencia de usuario y el rendimiento de su sitio.

Cómo optimizar el INP

1、Optimizar JavaScript

JavaScript es una parte clave de muchos sitios web y es responsable de añadir funcionalidad interactiva. Sin embargo, si el código JavaScript no se ejecuta de forma eficiente, puede ralentizar la capacidad de respuesta de un sitio web, ya que se ejecuta en el hilo principal del navegador, que también es responsable de renderizar la página web.

¿Cómo optimizar JavaScript para agilizar la respuesta de un sitio web?

1. Reducción de archivos JavaScript: Al reducir el tamaño del archivo, se puede hacer que JavaScript se cargue y ejecute más rápido.
2. Activar la compresión GZipEste es un método popular para reducir el tamaño de los archivos de un sitio web y acelerar la transferencia de datos.
3. Uso del framework JavaScriptFrameworks: Frameworks como AngularJS o jQuery pueden ayudarte a organizar y gestionar el código JavaScript de forma más eficiente y mejorar la ejecución.
4. Uso de redes de distribución de contenidos (CDN): Las CDN pueden servir archivos JavaScript desde servidores cercanos al usuario, lo que puede reducir significativamente los tiempos de carga.

2、Utilizar Web Worker

Suponga que su sitio web contiene muchas tareas de procesamiento de imágenes, vídeo y datos, que son intensivas desde el punto de vista computacional. Con Web Worker, puedes mover estas tareas pesadas a un subproceso en segundo plano para que la página web no se bloquee o se congele y la experiencia del usuario sea más fluida.

¿Cómo configurar Web Worker?

Para utilizar Web Worker, necesita preparar dos archivos JavaScript:

1. main.jsEste archivo se utiliza para iniciar el Web Worker y gestionar la comunicación con él.
2. worker.js(Web Worker Script): Este archivo contiene el código que se ejecutará en segundo plano.

sigamain.jsEjemplos de:

// main.js
if (window.Worker) {
  // Crear una nueva instancia de worker
  const myWorker = new Worker('worker-script.js'); // Enviar un mensaje al worker.
  // Enviar un mensaje al worker
  myWorker.postMessage('¡Hola Worker!'); // Escuchar los mensajes del worker.
  // Escuchar los mensajes del worker
  myWorker.onmessage = function(e) {
    myWorker.onmessage = function(e) { console.log('Mensaje recibido del trabajador', e.data); }; // Escucha los mensajes del trabajador.
  }; } else { console.log('Mensaje recibido del worker', e.data); }
} else {
  console.log('Su navegador no soporta Web Workers.'); }; }
}

El otro esworker.jscontiene tareas para los trabajadores de la red. A continuación se muestra un ejemplo:

// worker.js
onmessage = function(e) {
  console.log('Mensaje recibido del script principal', e.data); // Realiza cálculos pesados o procesa datos aquí.
  // Realiza cálculos pesados o procesamiento de datos aquí.
  // Luego envía un mensaje de vuelta al script principal
  postMessage('¡Hola Script Principal!'); }
}

Para incluir estos scripts en su sitio web, consulte la documentación de su tecnología o plataforma concreta y siga el proceso estándar.

Para los usuarios de WordPress, utilicewp_enqueue_scriptFunctions incluye el script Web Worker en el archivo Functions.php del tema.

3. Descomposición de tareas largas

Cuando un usuario navega por un sitio de comercio electrónico repleto de muchos datos e imágenes de productos, un sitio con una tarea de JavaScript demasiado grande y sin optimizar puede ocupar muchos recursos y ralentizar el sitio. Esto puede dar lugar a páginas de carga lenta que ni siquiera responden de forma oportuna al clic o desplazamiento de un usuario.

Para evitarlo, podemos dividir estas grandes tareas en muchas más pequeñas, de modo que el navegador pueda ser más flexible y no se bloquee por una sola tarea grande.

¿Cómo se dividen las tareas largas?

1. Ajuste del tiempo de esperaUso de JavaScriptsetTimeoutpuede aplazar la tarea a un momento futuro para que no ocupe continuamente el hilo principal.
2. Solicitar devolución de llamada: UsorequestIdleCallback API, que permite que sus tareas se ejecuten cuando el navegador está inactivo sin interferir con la funcionalidad principal de la página web.

4. Dar prioridad a la capacidad de respuesta

Garantizar que las páginas web puedan responder con rapidez a las acciones del usuario es clave para ofrecerle una buena experiencia. He aquí algunas técnicas que pueden ayudar a las páginas web a responder más rápido a las entradas del usuario:

1. Aplazar JavaScript no críticoAlgunos códigos JavaScript no necesitan ser ejecutados inmediatamente cuando se carga la página, y pueden ser diferidos para manejar primero la interacción con el usuario.
2. un estranguladorControla la frecuencia de las llamadas a la función. Por ejemplo, en el evento de desplazamiento, la función solo puede ejecutarse una vez cada varios cientos de milisegundos para evitar ralentizar la respuesta de la página si se ejecuta con demasiada frecuencia.
3. sacudirFunción de desajuste: cuando los eventos (por ejemplo, el cambio de tamaño de una ventana) se activan con frecuencia, el uso de técnicas de desajuste puede retrasar la ejecución de una función hasta que el evento se haya detenido durante un periodo de tiempo.
4. Uso de escuchadores de eventos pasivosPara eventos como desplazamientos y clics, los escuchadores de eventos marcados como pasivos pueden indicar al navegador que continúe con otras tareas sin esperar a que se complete el manejador de eventos, mejorando así el rendimiento del desplazamiento y la capacidad de respuesta de la página.

5. Proporcionar información inmediata

¿Por qué es importante el feedback inmediato?

Cuando un sitio web procesa una solicitud de un usuario sin ninguna respuesta, los usuarios pueden sentirse inseguros o incluso enviar formularios o hacer clic en botones repetidamente. Proporcionar una respuesta inmediata no solo mejora la experiencia del usuario, sino que también le da la sensación de que el sitio es receptivo.

Algunas formas habituales de dar feedback instantáneo son

1. Indicador de carga: Muestra un icono de carga giratorio o una barra de progreso cuando los datos se están cargando o una página está saltando para indicar al usuario que el proceso está en curso.
2. Ventana emergente de confirmaciónCuando el usuario realiza una operación concreta, como añadir un artículo a la cesta de la compra, aparece un cuadro de mensaje para confirmar que la operación se ha realizado correctamente.
3. Comentarios sobre la validación de formulariosValidación instantánea cuando los usuarios introducen datos, como comprobar si una dirección de correo electrónico se ajusta al formato y mostrar un mensaje de alerta inmediatamente cuando el formato es incorrecto, evitando que los usuarios conozcan el error sólo después de haberlo enviado.

Ventajas empresariales de la INP

existeEconomic Timesde un estudio se descubrió que aumentar la INP reduce significativamente la tasa de rebote de un sitio web: en 50%. Esto significa que es más probable que los usuarios permanezcan en el sitio y vean más contenido. Una tasa de rebote baja suele ir asociada a un mayor compromiso y satisfacción del usuario, lo cual es beneficioso para cualquier sitio web empresarial.

Resumen:

El INP es una importante métrica de rendimiento que mide la capacidad de respuesta de un sitio web a las acciones del usuario. Un INP bien optimizado no solo mejora la experiencia del usuario, sino que también mejora la clasificación en los motores de búsqueda y reduce las tasas de rebote.

Para optimizar la INP, analizamos varias estrategias, como la optimización de la ejecución de JavaScript, el uso de Web Workers para tareas en segundo plano y la división de tareas largas para evitar el bloqueo del hilo principal. Además, hicimos hincapié en la importancia del feedback inmediato, que puede utilizarse para dar a los usuarios la percepción de que el sitio está activo y responde mediante indicadores de carga, ventanas emergentes de confirmación y feedback de validación de formularios.