4 Herramientas para medir la Web Performance

Para empezar a mejorar la web performance, primero hay que medir. Estas 4 herramientas de Google te ayudarán en esta labor.

Para poder empezar a mejorar la web performance de una web, lo primero que necesitamos es medir estado actual de la misma y medir su evolución a lo largo del tiempo según implementamos mejoras. Así que en este artículo te comparto 4 herramientas de Google que te ayudarán en esta labor.

Pero antes de empezar a hablar de herramientas y métricas, necesitamos entender con qué tipo de datos trabajan.

Datos de laboratorio vs Datos de campo

Los datos de laboratorio (o lab data, o synthetic monitoring) son aquellos obtenidos de un análisis puntual en unas condiciones concretas. Las herramientas que trabajan con este tipo de datos son muy útiles para tener una idea de cómo pueden afectar las mejoras que vayamos implementando.

Cuando analicemos una página con herramientas que trabajan con datos de laboratorio es importante recordar que, si lo ejecutamos en nuestro ordenador, las condiciones de conexión pueden afectar mucho al resultado final. Si tenemos muchas extensiones en nuestro navegador, o si por ejemplo estamos reproduciendo algún vídeo de YouTube, o si estamos en una videollamada, o si la conexión wifi nos está dando problemas en ese momento... Todo esto afecta a nuestra conexión y de forma directa al resultado de la auditoría que esté realizando la herramienta.

Si la herramienta en cambio realiza el análisis en un servidor, es importante utilizar siempre la misma configuración para tener datos lo más fiables posible.

Es decir, a la hora de trabajar con datos de laboratorio es importante que las “condiciones de laboratorio” sean siempre las mismas (o, al menos, lo más parecidas posible).

Por el contrario, los datos de campo (o field data, o real user monitoring, o RUM) son datos que se recogen por el navegador del usuario que está cargando la página y se envían a un servidor. Es decir, no tenemos control sobre las condiciones en que se produce esa carga de la página al ser visitas de usuarios reales.

Es importante diferenciar este tipo de datos para entender por qué los resultados de una herramienta que solo trabaja con datos de laboratorio pueden ser muy distintos de los de otra herramienta que trabaje con datos de campo.

Y, ahora sí, vamos a hablar de herramientas.

Lighthouse

Lighthouse es una herramienta de Google que asigna un valor numérico entre 0 y 100 basado en 6 métricas medidas en laboratorio:

Métrica Peso
First Contentful Paint 10%
Speed Index 10%
Largest Contentful Paint       25%
Time To Interactive 10%
Total Blocking Time 30%
Cumulative Layout Shift 15%

Además de la valoración numérica y del valor obtenido para cada una de estas métricas, y esto es muy interesante, esta herramienta nos muestra sugerencias para mejorar las métricas que han obtenido malos resultados y la mejora esperada en caso de implementarse.

Para utilizar Lighthouse, tenemos distintas opciones:

Google pone también a nuestra disposición una calculadora que permite calcular la puntuación que obtendríamos en Lighthouse mejorando una u otra métrica, tanto en mobile como en desktop.

Chrome User Experience Report (CrUX)

CrUX es un dataset público que se alimenta de datos de performance de usuarios reales de Chrome (datos de campo).

Las métricas que se recogen son:

Al ser datos recogidos únicamente por Chrome, nos podemos encontrar con que si un sitio web no tiene suficiente tráfico desde este navegador, el CrUX no tenga datos que mostrar.

Los datos del Chrome UX Report se pueden consultar de distintas formas:

PageSpeed Insights

Esta herramienta, también de Google, combina los resultados de laboratorio de ejecutar un test con Lighthouse con los datos de campo recogidos en el Chrome UX Report.

Para ello, el resultado de la auditoría se separa, precisamente, en esas dos áreas (field data y lab data).

En el caso de los datos de campo, muestra información de 4 métricas:

En la parte de datos de usuarios reales, si hay datos suficientes en el CrUX de la página específica, nos mostrará dos pestañas con:

En el caso de que no haya suficiente información en el CrUX sobre esa página, mostrará únicamente los datos agregados del sitio web o, si no hay datos suficientes a nivel hostname, no mostrará datos de campo.

En la parte de datos de laboratorio, PageSpeed Insights ejecuta una auditoría con Lighthouse y muestra los resultados de la misma, tanto a nivel métricas como recomendaciones de mejora.

Search Console

Search Console, antes conocida como Webmaster Tools, ha ido evolucionando a lo largo de los años y añadiendo información con la que podemos tener un excelente control de cómo nuestro sitio web está siendo rastreado, indexado, posicionado y clicado.

Y con el anuncio del Page Experience Update, añadieron información relacionada con este área que incluye datos de campo de las Core Web Vitals (LCP, FID, CLS), separados por dispositivo.

Conclusiones

Google pone a nuestra disposición una serie de herramientas que nos ayudan a evaluar una página, tanto para conocer su estado actual como para poder ir midiendo su evolución en el tiempo.

Los datos de laboratorio nos permiten medir la mejora esperada de las implementaciones que vayamos realizando. Y esa mejora esperamos que impacte también a los resultados de campo. Porque es importante recordar que no sirve de nada tener unos datos excelentes laboratorio si los datos de campo son nefastos. La web performance es UX, por lo que trabajamos en el laboratorio para ver los resultados en el campo ;)

Cómo empezar en el desarrollo web