Es una nueva herramienta modular que permite recopilar automáticamente datos de rendimiento de múltiples fuentes.
¿Qué es AutoWebPerf (AWP)?
AutoWebPerf (AWP) es una herramienta modular que permite recopilar automáticamente datos de rendimiento de múltiples fuentes. Actualmente, hay muchas herramientas disponibles para medir el rendimiento del sitio web en diferentes ámbitos (laboratorio y campo), 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 sencilla para que puedas supervisar continuamente el rendimiento del sitio en un solo lugar.
El lanzamiento de la guía de Métricas web significa que la supervisión activa y cercana de las páginas web es cada vez más importante. Los ingenieros que crearon esta herramienta realizan auditorías de rendimiento desde hace años y crearon AWP para automatizar una parte manual, recurrente y que requiere mucho tiempo de sus actividades diarias. Actualmente, AWP alcanzó un nivel de madurez y está lista para compartirse ampliamente, de modo que cualquier persona 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?
Si bien 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 adecuadamente un sitio web y mantener un buen rendimiento de las páginas clave, se recomienda tomar medidas de las Métricas web esenciales de forma continua a lo largo del tiempo y observar las tendencias.
AWP facilita esta tarea, ya que proporciona un motor y API precompiladas que se pueden configurar de forma programática para automatizar las consultas recurrentes a varias APIs de supervisión del rendimiento.
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 con 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 pesada de todo el proceso, lo que la convierte en una excelente solución para hacer un seguimiento de las tendencias de laboratorio y de campo a lo largo del tiempo. Consulta Cómo visualizar los resultados de la auditoría en Data Studio a continuación para obtener más detalles.
Descripción general de la arquitectura
AWP es una biblioteca basada en módulos con tres tipos diferentes:
- 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 varios 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 archivo JSON local como el 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 los 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 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 las métricas de usuarios reales (RUM) o los datos del Informe sobre la experiencia del usuario en Chrome (CrUX) recopilados por AWP. Ten en cuenta que el Informe sobre la experiencia del usuario en 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 indican 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 CLS en las últimas semanas, lo que significa que hubo regresiones en la estabilidad del diseño de ciertas páginas. En este caso, deberías 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 las 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 Hojas de cálculo de Google para obtener instrucciones detalladas 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 sencilla e integrada de minimizar los esfuerzos necesarios para configurar una canalización de supervisión continua que permita medir las Métricas web esenciales y otras métricas de rendimiento. Por el momento, 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 de AutoWebPerf.