Como automatizar auditorias com o AutoWebPerf

Uma nova ferramenta modular que permite a coleta automática de dados de desempenho de várias fontes.

Gilberto Cocchi
Gilberto Cocchi
Jonathan Chen
Jonathan Chen

O AutoWebPerf (AWP) é uma ferramenta modular que permite a coleta automática de dados de desempenho de várias fontes. Atualmente, há muitas ferramentas disponíveis para medir o desempenho do site em diferentes escopos (laboratório e campo), como o Relatório de experiência do usuário do Chrome, o PageSpeed Insights ou o WebPageTest. O AWP oferece integração com várias ferramentas de auditoria com uma configuração simples para que você possa monitorar continuamente a performance do site em um só lugar.

O lançamento das orientações das Core Web Vitals significa que o monitoramento próximo e ativo das páginas da Web está se tornando cada vez mais importante. Os engenheiros por trás dessa ferramenta fazem auditorias de desempenho há anos e criaram a AWP para automatizar uma parte manual, recorrente e demorada das atividades diárias. Hoje, o AWP alcançou um nível de maturidade e está pronto para ser compartilhado de forma ampla para que qualquer pessoa possa se beneficiar da automação que ele oferece.

A ferramenta está disponível no repositório público AutoWebPerf (link em inglês) no GitHub.

Para que serve o AWP?

Embora várias ferramentas e APIs estejam disponíveis para monitorar o desempenho das páginas da Web, a maioria delas expõe dados medidos em um momento específico. Para monitorar adequadamente um site e manter uma boa performance das páginas principais, é recomendável fazer medições contínuas das Core Web Vitals ao longo do tempo e observar as tendências.

O AWP facilita isso fornecendo um mecanismo e integrações de API predefinidas, que podem ser configuradas de forma programática para automatizar consultas recorrentes para várias APIs de monitoramento de desempenho.

Por exemplo, com o AWP, é possível definir um teste diário na página inicial para capturar os dados de campo da API CrUX e os dados de laboratório de um relatório do Lighthouse no PageSpeed Insights. Esses dados podem ser gravados e armazenados ao longo do tempo, por exemplo, nas Planilhas Google e visualizados no painel do Data Studio. O AWP automatiza a parte trabalhosa de todo o processo, tornando-o uma ótima solução para seguir as tendências de laboratório e campo ao longo do tempo. Consulte Como visualizar os resultados da auditoria no Data Studio abaixo para ver mais detalhes.

Visão geral da arquitetura

A AWP é uma biblioteca modular com três tipos diferentes de módulos:

  • o mecanismo
  • Módulos de conector
  • módulos gatherer

O mecanismo recebe uma lista de testes de um conector (por exemplo, de um arquivo CSV local), executa auditorias de desempenho com coletores selecionados (como o PageSpeed Insights) e grava os resultados no conector de saída (por exemplo, Planilhas Google).

Um diagrama da arquitetura do AWP.

O AWP vem com vários coletores e conectores pré-implementados:

Automatizar auditorias com o AWP

O AWP automatiza as auditorias de desempenho usando suas plataformas de auditoria preferidas, como PageSpeed Insights, WebPageTest ou API CrUX. O AWP oferece a flexibilidade de escolher onde carregar a lista de testes e onde gravar os resultados.

Por exemplo, você pode executar auditorias para uma lista de testes armazenados em uma planilha Google e gravar os resultados em um arquivo CSV com o comando abaixo:

PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv

Auditorias recorrentes

É possível realizar auditorias recorrentes com frequência diária, semanal ou mensal. Por exemplo, é possível executar auditorias diárias para uma lista de testes definidos em um JSON local como este:

{
  "tests": [
    {
      "label": "web.dev",
      "url": "https://web.dev",
      "gatherer": "psi"
    }
  ]
}

O comando abaixo lê a lista de testes de auditoria do arquivo JSON local, executa auditorias em uma máquina local e gera os resultados em um arquivo CSV local:

PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv

Para executar auditorias todos os dias como um serviço em segundo plano continuamente, use o comando abaixo:

PSI_APIKEY=<YOUR_KEY> ./awp continue json:tests.json csv:output.csv

Como alternativa, configure o crontab em um ambiente semelhante ao Unix para executar o AWP como um cron job diário:

0 0 * * * PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv

Encontre mais maneiras de automatizar auditorias diárias e a coleta de resultados no repositório do AWP no GitHub.

Visualizar os resultados da auditoria no Data Studio

Além de medir continuamente as Core Web Vitals, é importante avaliar as tendências e descobrir possíveis regressões com métricas de usuários reais (RUM) ou dados do Relatório de UX do Chrome (CrUX) coletados pelo AWP. Observe que o Chrome UX Report (CrUX, na sigla em inglês) é uma agregação em movimento de 28 dias. Por isso, é recomendável usar seus próprios dados RUM junto com o CrUX para que você possa identificar regressões mais cedo.

O Data Studio é uma ferramenta de visualização gratuita que permite carregar métricas de desempenho com facilidade e criar tendências como gráficos. Por exemplo, os gráficos de série temporal abaixo mostram as Core Web Vitals com base nos dados do Relatório de UX do Chrome. Um dos gráficos mostra o aumento do Cumulative Layout Shift nas últimas semanas, o que significa regressões na estabilidade do layout de determinadas páginas. Nesse cenário, você precisa priorizar os esforços para analisar os problemas subjacentes dessas páginas.

Uma captura de tela dos resultados das Core Web Vitals no Data Studio.

Para simplificar o processo completo, desde a coleta de dados até a visualização, execute o AWP com uma lista de URLs e exporte automaticamente os resultados para o Planilhas Google com o seguinte comando:

PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv

Depois de coletar métricas diárias em uma planilha, você pode criar um painel do Data Studio que carrega os dados diretamente da planilha e mostra as tendências em um gráfico de série temporal. Consulte o Conectividade da API Google Sheets para conferir etapas detalhadas sobre como configurar o AWP com planilhas como uma fonte de dados para visualização no Data Studio.

A seguir

O AWP oferece uma maneira simples e integrada de minimizar os esforços para configurar um pipeline de monitoramento contínuo para medir as Core Web Vitals e outras métricas de performance. Por enquanto, o AWP abrange os casos de uso mais comuns e continuará fornecendo mais recursos para lidar com outros casos de uso no futuro.

Saiba mais no repositório AutoWebPerf.