Pruebas PLUS de Pago: monitor de velocidad y notificaciones

En la tercera parte de la serie, presentamos su buque insignia o más bien su abanderado como miembro clave del ejército de novedades. Vamos a centrarnos en el Monitor de Velocidad.

El Monitor de Velocidad Web combina las características de las pruebas PLUS de pago, delegando la preocupación por la velocidad de tus sitios web. Sin complicaciones innecesarias, sin spam y sin necesidad de interpretar datos, en los lugares correctos y en el momento adecuado.

¿Por qué introducimos el Monitor de Velocidad y qué no ofrece la competencia?#

Desarrollamos el Tester de Velocidad de PageSpeed.ONE basándonos en investigaciones de herramientas competidoras para medir la velocidad, pero sobre todo en años de experiencia monitorizando la velocidad web para decenas de clientes de nuestro servicio de consultoría de velocidad web.

Queremos que nuestro Monitor de Velocidad...

• sea fácil de usar incluso para novatos en el área de rendimiento,
• no sobrecargue a los usuarios con una gran cantidad de ruido informativo,
• funcione automáticamente sin necesidad de ajustes constantes,
• y esté disponible en varios canales de comunicación.

El monitor surgió porque ninguna herramienta disponible satisface adecuadamente nuestras necesidades, ni las de nuestros clientes. ¿En qué se diferencia exactamente el Monitor de PageSpeed.ONE?

1) Envía solo los mensajes necesarios#

Los correos electrónicos de notificación de todas las herramientas de monitoreo existentes eventualmente te abruman. Solo algunos contienen cambios relevantes e importantes en la velocidad del sitio web. Nosotros mismos dedicamos horas semanales evaluando estas notificaciones para nuestros clientes. La mayoría de las veces son falsas alarmas; la notificación no debería haber llegado.

2) Se centra en métricas importantes#

Las herramientas tradicionalmente usadas se aferran a métricas antiguas como el tiempo de carga de la página (evento Load) o inventan sus propias métricas. Sin embargo, ya tenemos Métricas que capturan muy bien la experiencia del usuario. Sí, en el tester nos centramos en las métricas Web Vitals y en indicadores auxiliares.

Desglosamos ahora las características individuales del Monitor.

Monitor de Velocidad#

El informe "Monitor de Velocidad" sirve como el panel principal de toda la funcionalidad de monitoreo e informes de velocidad web.

Podemos resumirlo en la siguiente imagen:

Diferentes estados en los informes del Monitor de Velocidad.

Comentemos ahora los puntos individuales:

1. Estado de las métricas – en la parte superior del informe "Monitor de Velocidad" vemos las métricas monitoreadas y su estado actual. Si cumplen con los límites establecidos, están en verde. Las métricas "rotas" se ven en rojo.
2. Empeoramiento de la métrica – si ves una línea roja en los gráficos durante varios días, se ha superado el límite de esa métrica. Recomendamos prestarle atención. Más sobre la búsqueda de causas se encuentra más abajo en el artículo.
3. Reajuste del límite – el límite de la Métrica, es decir, la línea punteada en el gráfico, puede reajustarse si la métrica muestra un buen estado durante dos semanas. Del mismo modo, si la métrica muestra un mal estado que no cambia. Queremos evitar el empeoramiento de valores ya malos, por lo que siempre monitoreamos los valores actuales.

Reajuste automático del límite. Después de dos semanas de mejora, comenzamos a monitorear automáticamente el nuevo valor de la métrica.

El punto clave es, por tanto, el límite de velocidad, el valor de la métrica en sí y la temporización. Pero profundicemos un poco más.

¿Cómo funciona exactamente el monitoreo de velocidad? Nuevos datos cada día y poco spam#

1. Método de medición – estos números son medidos por la herramienta Lighthouse, es decir, sintéticamente. Tomamos la mediana de cada URL medida y calculamos el promedio. Esto ha demostrado ser un cálculo suficientemente sensible para posibles cambios.
2. Métricas – hemos seleccionado las métricas Web Vitals (LCP, CLS…), pero las complementamos con otras métricas auxiliares como TTFB (velocidad del backend) o TBT (tiempo total de bloqueo de JS).
3. Tiempo – el monitoreo se lleva a cabo en ciclos de dos semanas. Si durante ese tiempo la métrica no cambia por encima o por debajo de cierto valor, el límite permanece como estaba. Si el valor cambia y persiste por más de tres días, te notificamos y lo destacamos en el gráfico.
4. Límite – en el gráfico lo ves como una línea discontinua. El límite siempre se establece por encima del umbral de la métrica y no tiene valores óptimos, siempre se basa en el estado anterior. De este modo, podemos detectar bien los cambios en las métricas.

Algo ha fallado aquí. Recibirás una notificación cuando el límite de la métrica se supere por tercer día consecutivo. Así evitamos situaciones donde ocurre una fluctuación aislada.

También es bueno saber que, tras muchas iteraciones, descartamos la detección de cambios en la métrica basada en porcentajes.

Por ejemplo, un cambio del 10% en un valor bajo de la métrica no tiene el mismo significado que un cambio del 10% en un valor alto de la métrica. Además, el cambio de algunas métricas tiene más importancia (digamos LCP como parte de Web Vitals), mientras que otras cambian con mucha frecuencia (como TBT y otras métricas de JavaScript) y los límites deben establecerse menos sensibles.

Por eso, en nuestro algoritmo utilizamos detecciones inteligentes, donde diferentes métricas se comportan de manera diferente en diferentes valores.

¿El objetivo principal? No saturarte con cambios poco importantes.

¿Qué pasa si cambio la URL en la configuración?#

Cambiar o agregar una URL en la configuración de la prueba obviamente, debido al método de cálculo, también cambiará los valores de las métricas y probablemente activará un informe de mejora o empeoramiento de las métricas. Ahora, al cambiar la URL se añade automáticamente una nota al gráfico.

Notificaciones - Slack, Teams, correo electrónico#

Es evidente, y lo sabemos por la práctica con clientes, que no todos los equipos monitorean las herramientas de medición de velocidad tan a menudo como sería necesario.

Al diseñar el Monitor de Velocidad, teníamos esto en mente y nuestro objetivo era que idealmente solo accedieras a la aplicación del tester de velocidad cuando estés solucionando un problema específico.

Por eso, el Monitor de Velocidad ofrece varias formas de recibir información sobre un problema o, por el contrario, sobre una mejora de manera pasiva:

Algo ha fallado aquí. Será mejor que le eches un vistazo.

Las notificaciones por correo electrónico del Monitor de Velocidad se envían a cada miembro del equipo. A menos que, por supuesto, decidan desactivarlas, lo cual es posible con un solo clic desde el correo recibido.

Recibe en Slack noticias importantes, pero también buenas.

Las notificaciones a Slack y Teams son muy útiles si ya usas estas herramientas para la comunicación interna.

Para configurar correctamente Slack y Teams, se necesitan realizar algunos pasos, de los cuales escribiremos más adelante y un breve tutorial se encuentra en la configuración de cada prueba.

¿Cómo depurar, es decir, buscar las causas del empeoramiento?#

Tomemos ahora un caso concreto de búsqueda de problemas tras una notificación del Monitor.

Llega una notificación de que la métrica CLS ha empeorado en el sitio web. En el gráfico, lo vemos aproximadamente así:

Evolución de la medición de la métrica CLS en el Monitor de Velocidad.

Así es, alrededor del 5 de septiembre, la métrica de Desplazamiento Acumulativo del Diseño se deterioró significativamente.

El desglose de la evolución de la métrica según las URLs específicas se ve al hacer clic en el gráfico:

En los resultados de las pruebas podemos ver cuáles páginas son las más afectadas.

Aquí se puede notar que todas las URLs medidas han empeorado. Por lo tanto, está claro que la causa probablemente será un cambio de diseño en todo el sitio web.

Haciendo clic en el tiempo específico de la prueba, llegamos al detalle del informe de Lighthouse:

Resultados de la prueba Lighthouse para una URL.

Aquí, además del valor deteriorado de CLS, vemos también la posibilidad de descargar informes detallados. Para depurar CLS, lo más útil es el Trace, que podemos abrir en herramientas como la pestaña Performance en Chrome DevTools.

Aquí nos enfocamos en los desplazamientos de diseño y vemos que el último es causado por una barra superior renderizada de forma asíncrona. Esta es también la diferencia con respecto a las mediciones anteriores y un problema que podemos reportar al equipo de desarrollo.

El Monitor es la característica más importante de las pruebas PLUS. Hemos visto que con la ayuda del Monitor no se nos escapa ningún problema; podemos recibir informes a través de varios canales, y no serán demasiados. En el tester mismo, podemos encontrar la oportunidad de identificar el problema.