Pruebas de Web Vitals en el navegador (una habilidad clave para desarrolladores)

Core Web Vitals son métricas que utilizamos para evaluar el rendimiento de las páginas web en áreas como la velocidad de carga, la interactividad y la estabilidad del diseño. Estas métricas son cada vez más importantes para garantizar una buena experiencia de usuario y Google las utiliza como uno de los criterios para el posicionamiento en los resultados de búsqueda.

Sin embargo, en nuestra práctica diaria, todavía encontramos que a muchos desarrolladores y desarrolladoras les falta el conocimiento para probar confiablemente los Core Web Vitals en el navegador. Al optimizar, no basta con hacer un cambio que creemos que mejorará las métricas. También es necesario saber cómo probar nuestras modificaciones en términos de su impacto.

Definitivamente no recomendamos hacer optimizaciones "a ciegas", mediante ensayo y error, como "implementar y esperar a ver el impacto en los datos de usuario".

Lo mejor es no depender únicamente de Lighthouse, que solo realiza mediciones sintéticas, por lo que, por ejemplo, no obtendrás la métrica INP y la métrica CLS solo con limitaciones.

Las pruebas de Core Web Vitals en el navegador complementan la monitorización automatizada regular de la velocidad web, que también deberías tener.

En este artículo, mostraremos formas de probar correctamente tu sitio web.

¿Qué son los Core Web Vitals?#

La repetición es la madre del aprendizaje. Las métricas básicas de Core Web Vitals son tres:

Core Web Vitals en todo su esplendor. Estas métricas deben ser probadas principalmente.

• Interaction to Next Paint (INP) – velocidad de carga del elemento más grande.
• Largest Contentful Paint (LCP) – respuesta del sitio web tras las interacciones del usuario.
• Cumulative Layout Shift (CLS) – estabilidad del diseño.

¿Por qué no usar Lighthouse en el navegador?#

Lighthouse puede ser útil al ajustar la velocidad, pero tenemos varias reservas sobre él, por lo que no lo recomendamos ni siquiera para probar tus métricas después de ajustes de desarrollo.

No mide las métricas de usuario, sino de manera sintética, es decir, como una máquina, ve los diferencias entre mediciones. Esto se relaciona con otro problema: las métricas que proporciona solo son válidas para la primera carga y lo que ocurre en el primer viewport del usuario (así que mediría mal el CLS, y el INP no lo mediría en absoluto).

Tampoco es ideal para medir LCP, ya que solo puede probar un contexto (estado), por ejemplo, un sitio web con una barra de cookies. Martin Michálek explora más profundamente las ventajas y desventajas de la herramienta Lighthouse y su métrica LPS en su artículo Lighthouse Performance Score (LPS): bellezas y trampas de la métrica de todas las métricas.

La herramienta Lighthouse puede ayudar, pero no es suficiente para probar en el navegador.

Cómo probar Core Web Vitals en el navegador#

La herramienta básica para nuestras pruebas serán las herramientas de desarrollo ("Dev Tools") en el navegador Google Chrome. Estas incluyen otras características, a menudo bien escondidas, que nos facilitan considerablemente el trabajo.

Hoy hablaremos específicamente sobre la extensión Web Vitals para Chrome y el panel de Performance.

Extensión Web Vitals para Chrome#

La forma más sencilla de probar las métricas Web Vitals es abrir la extensión Web Vitals en el navegador. Esta muestra las métricas para cualquier página que estés visitando.

Recomendamos fijar Web Vitals en el panel de extensiones, para tenerlo siempre a mano. En la página en cuestión, simplemente haz clic en su ícono y al recargar la página se mostrará una tabla con las métricas.

Extensión Web Vitals.

En la configuración de la extensión también recomendamos activar la opción "Console logging". Así podrás depurar información avanzada sobre las métricas directamente en la pestaña Console de DevTools.

Detalle de registro en consola con la ayuda de la extensión Core Web Vitals.

Usamos la extensión Web Vitals para probar las tres métricas. La ventaja es que puedes ralentizar la red en el panel Network y medir las métricas en condiciones simuladas.

Panel de Performance#

El panel de Performance tiene desde septiembre de 2024 un nuevo diseño y dos estados: medición del estado de las métricas y medición detallada.

Estado de las métricas en el panel de Performance#

Este estado permite realizar pruebas rápidas, de manera similar a la extensión Web Vitals.

Estado de las métricas en el panel de Performance para pruebas rápidas de la página y sus interacciones.

Describamos lo que se ve en la imagen:

1. Estado en vivo de las métricas en la página, que cambia durante su uso, y comparación con los datos del Chrome UX Report.
2. Panel de registro de interacciones (para la métrica INP) o de cambios de diseño (para la métrica CLS).
3. Panel con la opción de configuración de descarga de datos del Chrome UX Report.
4. Parámetros de prueba – recomendamos configurar al menos una ralentización de CPU de 4 ⨉ y una conexión 4G más lenta.
5. Grabación de medición detallada – transición a un registro completo de carga o interacciones con la página. Más detalles a continuación.

Medición detallada en el panel de Performance#

Apodamos a esta herramienta "gusanos", por la forma en que representa la ejecución de JavaScript. Sin embargo, contiene muchas otras pestañas útiles. Para nuestros propósitos, las secciones más importantes son "Web Vitals" (en la imagen abajo es número 1), "Timings" (2) y "Experience" (3).

Web Vitals es la primera sección en el panel de Performance, que nos proporciona los tiempos de las métricas.

La sección Timings es bastante similar, pero en el caso de la métrica LCP contiene información valiosa, como el elemento específico, su tamaño y tipo.

Por otro lado, la sección Experience se utiliza a menudo al probar la métrica CLS, ya que muestra un análisis detallado de la desviación del diseño medida en la página. Simplemente haz clic en el cuadrado rojo que indica el problema y se mostrará la información como se ve en la imagen a continuación.

En conclusión#

Recuerda que la optimización de las métricas Core Web Vitals contribuye a una buena experiencia de usuario en la web. Cualquier ajuste para mejorar las métricas debe ser siempre probado.