Ampliación de WebPageTest con métricas personalizadas

Ampliación de WebPageTest con métricas personalizadas

Hay muchas cosas que realmente me gustan de WebPageTest, y las métricas personalizadas deben estar en la parte superior de la lista.

No estoy hablando de la API de sincronización del usuario (que con frecuencia se conoce como métricas personalizadas), aunque WebPageTest también admite todo eso, sino métricas personalizadas que expone en sus datos de prueba al decirle a WebPageTest que ejecute algo de JavaScript arbitrario después de que se cargue la página. .

Por ejemplo, cuando quise probar la nueva versión de la métrica de cambio de diseño acumulativo antes de implementarla, las métricas personalizadas proporcionaron una forma relativamente sencilla de probarla. Pude recopilar una nueva métrica (llamada newCLS) y decirle a WebPageTest qué JavaScript ejecutar para devolver el valor.

Esa métrica personalizada se coloca en el área de texto en la pestaña Avanzado> Personalizado si está haciendo pruebas manuales, o se agrega a su llamada a la API mediante el parámetro personalizado.

Después de que se ejecuta la prueba, el agente de prueba ejecuta ese bit de JavaScript y toma el valor devuelto, almacenándolo como una nueva métrica CLS. Luego, la métrica se expone en los datos JSON, así como en la sección Métricas personalizadas de la página de resultados de la prueba en la interfaz de usuario.

Las métricas personalizadas son una excelente manera de jugar con API experimentales como esta, y esa es una razón bastante común por la que las busco. Pero también son realmente útiles para ampliar lo que WebPageTest informa de forma predeterminada.

Por ejemplo, ejecutamos algunas métricas personalizadas cada vez que se ejecuta una prueba en WebPageTest para exponer cosas como la profundidad de color, dpi, un objeto JSON de todas las imágenes en una página y la resolución de la pantalla.

HTTP Archive también utiliza una gran cantidad de métricas personalizadas para recopilar una variedad de información interesante para sus informes, así como para el Web Almanac anual. Como este, para calcular el tamaño de bytes de todos los CSS en línea:

[inline-css]
return Array.from (document.querySelectorAll («estilo»)). reducir (
(total, estilo) => (total + = style.innerHTML.length), 0
);
O aquí hay uno que puede ejecutar y que devuelve un objeto JSON de todas las imágenes que tienen loading = lazy aplicado pero que están dentro de la ventana gráfica inicial (lo que podría hacer que lleguen un poco más tarde de lo ideal).

O podría diversificarse en métricas que se ocupen de otros aspectos de la calidad del sitio, como la accesibilidad. A continuación, se muestra una métrica personalizada que cuenta todas las imágenes de una página que no tienen un atributo alt aplicado:

return document.querySelectorAll (‘img: not ([alt])’). length
No solo tiene acceso al DOM de la página, sino que también tiene acceso a todos los detalles de la respuesta sin procesar e incluso a los cuerpos de respuesta mediante la sustitución de cadenas ($ WPT_REQUESTS para acceder a una matriz de todos los datos de la solicitud, excepto los cuerpos de respuesta, y $ WPT_BODIES para acceder a la misma matriz, pero con todos los cuerpos de respuesta incluidos).

Ya escribí sobre esto antes en mi propio sitio, pero es genial porque te permite profundizar aún más con tus métricas personalizadas. Por ejemplo, aquí hay uno que analiza los cuerpos de respuesta de todos los recursos CSS para ver si alguno de ellos incluye hojas de estilo con @import, lo que puede ser un gran éxito en sus métricas de pintura iniciales:

Comenzamos a recopilar algunas recetas diferentes de métricas personalizadas en nuestra documentación para ayudarlo a comenzar. Seguiremos agregando más, pero también nos encantaría saber de todos ustedes. Si tiene un uso interesante de las métricas personalizadas, avísenos para que podamos compartirlo con la comunidad y ayudar a la gente a aprovechar al máximo sus pruebas de WebPageTest.

Tim Kadlec es becario de ingeniería de rendimiento en Catchpoint, consultor de rendimiento web y formador centrado en la creación de una web que todos puedan usar. Es autor de High Performance Images (O’Reilly, 2016) e Implementing Responsive Design: Construyendo sitios para una web en cualquier lugar y en todas partes (New Riders, 2012).

Fuente: https://blog.webpagetest.org

Sobre admin

Estratega de ventas dinámico, basado en resultados, con un historial de más de 15 años de logros y éxito comprobado, lo que ha llevado a un aumento en los ingresos de millones de euros, al tiempo que proporciona un liderazgo visual visionario en mercados altamente competitivos.