Tester de velocidad versión 4.3: ayuda, mejoras del Vigilante, gráficos CrUX y mucho más

Aproximadamente dos meses después de finalizar la versión 4.2, hemos completado la versión 4.3 de nuestra herramienta para el monitoreo de velocidad web. Hemos añadido una sección de ayuda para educar a nuestro público, integrado el Vigilante en el informe Resumen, y ahora mostramos valores específicos de Métricas, entre otras mejoras de interfaz.

La mayoría de los cambios son aplicables tanto a la versión gratuita como a los tests profesionales PLUS.

Primero, echemos un vistazo más detallado a las novedades principales.

Ayuda sobre velocidad web y tester de velocidad#

La misión de PageSpeed.ONE incluye mejorar el conocimiento sobre la velocidad web a través de charlas, encuentros, y también artículos.

Ya está listo, la ayuda de PageSpeed.ONE.

Para publicar textos populares, nuestro blog de agencia ya no era suficiente, así que buscamos una mejor herramienta. Elegimos Docusaurus, un generador de sitios web estáticos especializado en documentación.

El resultado ya puede verse en pagespeed.one.

Hemos trasladado allí no solo textos generales, como sobre las métricas de velocidad INP, LCP o CLS, sino también textos sobre técnicas y tecnologías relacionadas con la velocidad, como BF cache o argumentos sobre Por qué preocuparse por la velocidad.

Ahora planeamos preparar la ayuda para la propia herramienta de monitoreo, comenzando con el informe Resumen.

Manténganse atentos, ya que publicaremos a un ritmo aún mayor que antes.

Visualización de valores específicos en el gráfico de velocidad del dominio#

Estamos particularmente satisfechos con este cambio en nuestra agencia de consultoría, ya que el gráfico de evolución de la velocidad de datos de Google (Chrome UX Report, abreviado CrUX) lo seguimos en el informe de Dominios casi a diario durante las optimizaciones.

Ahora es posible, en este gráfico, cambiar de la distribución (es decir, la dispersión de los valores de la métrica entre los usuarios) a una sola cifra (que en el caso de Google es el percentil 75):

A diferencia del gráfico de distribución, aquí puede ver el valor con el que Google realmente evalúa su sitio web en el caso de Core Web Vitals. Es, por tanto, mucho más simple.

¿Volverán a consultarlo tan a menudo como nosotros?

El Vigilante ahora está en Resumen#

El informe Vigilante es, según los comentarios, una función muy popular de nuestros tests PLUS. Recientemente, por ejemplo, nos escribieron los señores de Slevomat:

Nos encanta usar esta herramienta. Debido a INP la revisamos cada día. Las notificaciones del Vigilante las tenemos configuradas en Slack y recientemente nos alertó sobre un error que cometimos.

Ahora hemos mejorado ligeramente la salida básica del informe Vigilante, es decir, la tabla con los valores de las métricas monitoreadas, y la hemos añadido al informe Resumen, donde puede ver el estado de todas las métricas del sitio.

Rotación y expansión de la tabla con gráficos de evolución mensual de métricas#

Al medir la velocidad, nos interesa no solo el horizonte a corto plazo, es decir, si vemos un impacto positivo o negativo de los cambios en el sitio sobre la velocidad, sino también los datos a largo plazo por meses.

Para esto sirven las tablas donde, a partir de datos de Google, descargamos gráficos de evolución a largo plazo de las métricas.

Estas tablas las hemos modificado considerablemente. Por un lado, ahora se ordenan igual que los demás informes (verticalmente por dominios) y, por otro lado, la tabla en la visualización de escritorio siempre está expandida para que no tenga que desplazarse horizontalmente.

Es más fácil de leer e idealmente, todo debería estar en verde.

(Gracias por la sugerencia de mejora a Ondřej Ilinčev.)

Valor completo de la métrica en la tabla de resultados#

Quizás no le pase tan a menudo como a nosotros, pero... a veces simplemente necesitamos ver el valor no redondeado de una métrica.

Ahora todos tienen esta opción, simplemente lo hemos añadido a la burbuja que aparece al pasar el ratón.

¿Dos veces 2,5 segundos y tiene un color diferente? Ahora el misterio está resuelto.

Es muy útil en caso de que esté siguiendo cambios en las métricas a nivel de varias cifras decimales (guiño guiño a INP).

Además, con esto abordamos situaciones en las que los valores de las métricas en la tabla parecen iguales, pero tienen diferentes colores, como se observa en la imagen.

La interfaz de usuario ahora es un poco menos "icónica"#

Al principio mencionamos que nuestra misión es educar. Esto también aplica a la necesidad de educar en la interfaz del tester. No todo el mundo conoce las Métricas, no todo el mundo conoce la diferencia entre CrUX y sintético. Medir la velocidad es bastante complejo.

Todavía la interfaz del tester está llena de iconos de ayuda, pero gracias al lanzamiento de la sección de Ayuda, comenzamos a reducirlos.

Esta pequeña mejora simplifica la interfaz de usuario:

Un poco menos de iconos, el énfasis sigue en los datos.

Es un poco más simple y claro. Este es el camino que seguiremos para simplificar aún más la UI y hacerla más accesible para los mortales comunes.

Otras tareas menores e internas#

Como todos los desarrolladores de software, por supuesto, también hemos estado cazando bugs y ajustando nuestro entorno para trabajar mejor:

Caza de bugs#

• Bug: en la versión gratuita no se puede abrir el detalle del test
• Bug: notas no visibles en todos los gráficos
• Bug: en Configuración desaparece la URL para Slack al guardar
• Bug: No funciona la copia de URL al portapapeles
• Bug: Las anclas no desplazan a los gráficos
• Bug: estaciones del año tras cambiar de otro test
• Bug: CrUX para dominio con escala mínima
• Bug: Valores superpuestos en el gráfico CrUX para dominio

Tareas internas#

• Ajustamos la captura de errores a través de Sentry
• Bug: Componente roto de atoms/Link
• Bug: No se puede añadir un test al dashboard de superadministrador
• Recopilamos errores 403 durante las pruebas web
• Bug: Sentry SequelizeDatabaseError
• Limpieza de código
• Simplificación de creación de tests PLUS
• Blog de la agencia: activamos SEO 😅

Agradecemos cualquier feedback sobre el tester de velocidad y, por supuesto, también la notificación de errores. Escríbanos a info@pagespeed.cz o simplemente en el chat dentro de la aplicación.

¿Y ahora qué haremos?

Ya estamos trabajando en la versión 4.4.

Sigan nuestras redes sociales: X.com, LinkedIn, Facebook.