Una nueva herramienta modular que permite la recopilación automática de datos de rendimiento de varias 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 field), como el Informe de UX de Chrome, PageSpeed Insights o WebPageTest. AWP ofrece integración con varias herramientas de auditoría con una configuración simple 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 significa que la supervisión cercana 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. Hoy en día, la AWP alcanzó un nivel de madurez y está lista para compartirse de forma amplia, de modo que cualquiera pueda beneficiarse de la automatización que ofrece.
Se puede acceder a la herramienta en el repositorio público de 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 los datos medidos en un momento específico. Para supervisar adecuadamente un sitio web y mantener un buen rendimiento de las páginas clave, se recomienda realizar mediciones continuas de las Métricas web esenciales a lo largo del tiempo y observar las tendencias.
AWP facilita esta tarea, ya que proporciona un motor y, también, integraciones de API compiladas previamente que se pueden configurar de manera programática para automatizar las consultas recurrentes a varias APIs de Performance Monitoring.
Por ejemplo, con AWP, puedes configurar una prueba diaria en tu página principal para capturar los datos de campo de la API de CrUX y los datos de laboratorio de un informe de Lighthouse de PageSpeed Insights. Estos datos se pueden escribir y almacenar en el tiempo, por ejemplo, en Hojas de cálculo de Google y, luego, visualizarse en el panel de Data Studio. AWP automatiza la parte más importante de todo el proceso, por lo que es una excelente solución para seguir las tendencias de los labs y campos a lo largo del tiempo. Consulta Visualiza los resultados de auditoría en Data Studio a continuación para obtener más detalles.
Descripción general de la arquitectura
AWP es una biblioteca modular con tres tipos diferentes de módulos:
- el motor
- Módulos de conector
- 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 preimplementados:
- Recopiladores preimplementados:
- Conectores implementados previamente:
- Hojas de cálculo de Google
- JSON
- CSV
Automatiza las 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 una 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, genera resultados en 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 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 el 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 GitHub de AWP.
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 las métricas de usuarios reales (RUM) o los datos del Informe de UX de Chrome (CrUX) que recopila 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 se recomienda que también uses tus propios datos de RUM junto con CrUX para que puedas detectar las regresiones antes.
Data Studio es una herramienta de visualización gratuita en la que puedes cargar fácilmente métricas de rendimiento y dibujar tendencias como gráficos. Por ejemplo, los gráficos de series temporales que se muestran a continuación muestran las Métricas web esenciales según los datos del informe de UX de Chrome. Uno de los gráficos muestra un aumento en el cambio de diseño acumulativo en las semanas recientes, lo que significa regresiones en la estabilidad del diseño de ciertas páginas. En esta situación, debes priorizar los esfuerzos para 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 trace las tendencias en un gráfico de series temporales. Consulta el Conector de la API de Google Sheets para obtener pasos detallados sobre cómo configurar AWP con hojas de cálculo como fuente de datos para visualizar en Data Studio.
Próximos pasos
AWP proporciona una forma integrada y simple de minimizar los esfuerzos por configurar 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á proporcionándonos más funciones para abordar otros casos de uso en el futuro.
Obtén más información en el repositorio de AutoWebPerf.