Una nueva herramienta modular que permite la recopilación automática de datos de rendimiento de múltiples fuentes.
¿Qué es AutoWebPerf (AWP)?
AutoWebPerf (AWP) es una herramienta modular que permite la recopilación automática de datos de rendimiento de varias fuentes. Actualmente, hay muchas herramientas disponibles para medir el rendimiento del sitio web en diferentes alcances (lab y campo), como el Informe de UX de Chrome, PageSpeed Insights o WebPageTest. AWP se integra en varias herramientas de auditoría con una configuración sencilla para que puedas supervisar de forma continua el rendimiento del sitio en un solo lugar.
El lanzamiento de la guía de Métricas web implica que la supervisión cerca y activa de las páginas web es cada vez más importante. Los ingenieros detrás de esta herramienta llevan años realizando auditorías de rendimiento y crearon AWP para automatizar una parte manual, recurrente y que consume mucho tiempo de sus actividades diarias. En la actualidad, el AWP alcanzó un nivel de madurez y está listo para compartirse ampliamente, de modo que cualquiera pueda beneficiarse de la automatización que ofrece.
Se puede acceder a la herramienta en el repositorio público AutoWebPerf en GitHub.
¿Para qué sirve AWP?
Aunque hay varias herramientas y APIs disponibles para supervisar el rendimiento de las páginas web, la mayoría de ellas exponen datos medidos en un momento específico. Para supervisar un sitio web de manera adecuada y mantener un buen rendimiento de las páginas clave, se recomienda realizar mediciones de las Métricas web esenciales de forma continua a lo largo del tiempo y observar las tendencias.
AWP lo hace más fácil, ya que proporciona un motor y integraciones de API previamente compiladas que se pueden configurar de manera programática para automatizar las consultas recurrentes a varias APIs de supervisión de rendimiento.
Por ejemplo, con AWP, puedes establecer una prueba diaria en tu página principal para capturar los datos de campo de la API de CrUX y los datos de lab de un informe de Lighthouse de PageSpeed Insights. Estos datos se pueden escribir y almacenar con el tiempo, por ejemplo, en Hojas de cálculo de Google, y, luego, visualizarlos en el panel de Data Studio. AWP automatiza el trabajo pesado de todo el proceso, lo que la convierte en una excelente solución para seguir las tendencias de labs y campos a lo largo del tiempo. Consulta Visualiza los resultados de auditorías en Data Studio a continuación para obtener más detalles).
Descripción general de la arquitectura
AWP es una biblioteca basada en modulares con tres tipos diferentes de módulos:
- el motor
- connector
- Módulos gatherer
El motor toma una lista de pruebas de un conector (por ejemplo, de un archivo CSV local), ejecuta auditorías de rendimiento a través de recopiladores seleccionados (como PageSpeed Insights) y escribe los resultados en el conector de salida (por ejemplo, Hojas de cálculo de Google).
AWP incluye una serie de recopiladores y conectores implementados previamente:
- Recopiladores previamente implementados:
- Conectores implementados previamente:
- Hojas de cálculo de Google
- JSON
- CSV
Automatiza auditorías con AWP
AWP automatiza las auditorías de rendimiento a través de tus plataformas de auditoría preferidas, como PageSpeed Insights, WebPageTest o la API de CrUX. AWP ofrece la flexibilidad de elegir dónde cargar la lista de pruebas y dónde escribir los resultados.
Por ejemplo, puedes ejecutar auditorías para una lista de pruebas almacenadas en una hoja de cálculo de Google y escribir los resultados en un archivo CSV con el siguiente comando:
PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv
Auditorías recurrentes
Puedes ejecutar auditorías recurrentes con frecuencia diaria, semanal o mensual. Por ejemplo, puedes ejecutar auditorías diarias para una lista de pruebas definidas en un JSON local como la siguiente:
{
"tests": [
{
"label": "web.dev",
"url": "https://web.dev",
"gatherer": "psi"
}
]
}
El siguiente comando lee la lista de pruebas de auditoría del archivo JSON local, ejecuta auditorías en una máquina local y, luego, envía los resultados a un archivo CSV local:
PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv
Para ejecutar auditorías todos los días como un servicio en segundo plano de forma continua, puedes usar el siguiente comando:
PSI_APIKEY=<YOUR_KEY> ./awp continue json:tests.json csv:output.csv
Como alternativa, puedes configurar crontab en un entorno similar a Unix para ejecutar AWP como un trabajo cron diario:
0 0 * * * PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv
Puedes encontrar más formas de automatizar las auditorías diarias y la recopilación de resultados en el repositorio de AWP en GitHub.
Visualiza los resultados de la auditoría en Data Studio
Además de medir continuamente las Métricas web esenciales, es importante poder evaluar las tendencias y descubrir posibles regresiones con métricas de usuarios reales (RUM) o datos del Informe de UX de Chrome (CrUX) recopilados por AWP. Ten en cuenta que el informe de UX de Chrome (CrUX) es una agregación móvil de 28 días, por lo que te recomendamos que también uses tus propios datos RUM junto con CrUX para poder detectar regresiones más pronto.
Data Studio es una herramienta de visualización gratuita en la que puedes cargar fácilmente las métricas de rendimiento y dibujar tendencias como gráficos. Por ejemplo, los gráficos de series temporales que aparecen a continuación muestran Métricas web esenciales basadas en datos de informes de UX de Chrome. Uno de los gráficos muestra un aumento en el Cambio de diseño acumulado durante las últimas semanas, lo que significa regresiones en la estabilidad del diseño de ciertas páginas. En esta situación, deberías priorizar los esfuerzos por analizar los problemas subyacentes de estas páginas.
Para simplificar el proceso de extremo a extremo desde la recopilación de datos hasta la visualización, puedes ejecutar AWP con una lista de URLs para exportar automáticamente los resultados a Hojas de cálculo de Google con el siguiente comando:
PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv
Después de recopilar métricas diarias en una hoja de cálculo, puedes crear un panel de Data Studio que cargue los datos directamente desde la hoja de cálculo y traza las tendencias en un gráfico de serie temporal. Consulta el Conector de la API de Hojas de cálculo de Google para obtener pasos detallados sobre cómo configurar el AWP con hojas de cálculo como fuente de datos para visualizar en Data Studio.
¿Qué sigue?
AWP proporciona una forma integrada y simple de minimizar los esfuerzos de configuración de una canalización de supervisión continua para medir las Métricas web esenciales y otras métricas de rendimiento. Por ahora, AWP abarca los casos de uso más comunes y seguirá proporcionando más funciones para abordar otros casos de uso en el futuro.
Obtén más información en el repositorio AutoWebPerf.