Uma nova ferramenta modular que permite a coleta automática de dados de desempenho de várias fontes.
O que é AutoWebPerf (AWP)?
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 de sites em diferentes escopos (laboratório e campo), como o Chrome UX Report, PageSpeed Insights ou WebPageTest. Ele oferece integração com várias ferramentas de auditoria com uma configuração simples. Assim, você pode monitorar continuamente o desempenho do site em um só lugar.
A publicação das orientações das Métricas da Web 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 o AWP para automatizar uma parte manual, recorrente e demorada das atividades diárias. Hoje, a AWP atingiu um nível de maturidade e está pronta para ser compartilhada amplamente, para que qualquer pessoa possa se beneficiar da automação que ela proporciona.
A ferramenta pode ser acessada no repositório público AutoWebPerf (link em inglês) no GitHub.
Para que serve a AWP?
Há várias ferramentas e APIs disponíveis para monitorar o desempenho de páginas da Web, mas a maioria delas expõe dados medidos em um momento específico. Para monitorar um site de forma adequada e manter o bom desempenho das principais páginas, é recomendável fazer medições contínuas das Core Web Vitals ao longo do tempo e observar as tendências.
O AWP facilita esse processo fornecendo um mecanismo e integrações de API pré-criadas que podem ser configuradas programaticamente para automatizar consultas recorrentes a várias APIs de monitoramento de desempenho.
Por exemplo, com o AWP, você pode definir um teste diário na sua 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, no Planilhas Google e visualizados no painel do Data Studio. O AWP automatiza a parte complicada de todo o processo, tornando-o uma ótima solução para acompanhar as tendências de laboratório e campo ao longo do tempo. Consulte Como visualizar os resultados da auditoria no Data Studio abaixo para mais detalhes.
Informações gerais da arquitetura
A AWP é uma biblioteca baseada em módulos 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 por meio de coletores selecionados (como o PageSpeed Insights) e grava os resultados no conector de saída (por exemplo, Planilhas Google).
O AWP vem com vários coletores e conectores pré-implementados:
- Coletores pré-implementados:
- Conectores pré-implementados:
- Planilhas Google
- JSON
- CSV
Como automatizar auditorias com AWP
O AWP automatiza as auditorias de desempenho por meio das suas plataformas de auditoria preferidas, como PageSpeed Insights, WebPageTest ou API CrUX. Com o AWP, você tem a flexibilidade de escolher onde carregar a lista de testes e onde gravar os resultados.
Por exemplo, é possível executar auditorias para uma lista de testes armazenada 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 abaixo:
{
"tests": [
{
"label": "web.dev",
"url": "https://web.dev",
"gatherer": "psi"
}
]
}
O comando abaixo lê a lista de testes de auditoria no 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, é possível configurar 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 GitHub do AWP (em inglês).
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 as métricas de usuários reais (RUM, na sigla em inglês) ou os dados do Chrome UX Report (CrUX, na sigla em inglês) coletados pelo AWP. Observe que o Chrome UX Report (CrUX, na sigla em inglês) é uma agregação móvel de 28 dias. Portanto, é recomendável usar também seus próprios dados RUM com o CrUX para que você possa detectar regressões mais cedo.
O Data Studio é uma ferramenta de visualização sem custo financeiro em que é fácil carregar métricas de desempenho e desenhar 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 Chrome UX Report. Um dos gráficos mostra um aumento na Mudança de layout cumulativa nas últimas semanas, o que significa regressões na estabilidade do layout em determinadas páginas. Nesse cenário, é importante priorizar os esforços para analisar os problemas subjacentes dessas páginas.
Para simplificar o processo completo, desde a coleta de dados até a visualização, execute o AWP com uma lista de URLs para exportar os resultados automaticamente 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 as métricas diárias em uma planilha, crie um painel do Data Studio que carrega os dados diretamente da planilha e traça as tendências em um gráfico de série temporal. Confira o Google Sheets API Connector para ver etapas detalhadas sobre como configurar o AWP com planilhas como uma fonte de dados a ser visualizada no Data Studio.
Qual é a próxima etapa?
A AWP oferece uma maneira simples e integrada de minimizar os esforços de configurar um pipeline de monitoramento contínuo para medir as Core Web Vitals e outras métricas de desempenho. Por enquanto, a AWP abrange os casos de uso mais comuns e continuará fornecendo mais recursos para abordar outros casos de uso no futuro.
Saiba mais no repositório AutoWebPerf (link em inglês).