Uma nova ferramenta modular que permite a coleta automática de dados de desempenho de várias fontes.
O que é o AutoWebPerf (AWP)?
O AutoWebPerf (AWP) é uma ferramenta modular que permite a coleta automática de dados de performance 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 pode ser acessada no repositório público AutoWebPerf (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 porque fornece um mecanismo e integrações de API pré-criadas, que podem ser configuradas programaticamente 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 mais pesada de todo o processo, tornando-se uma ótima solução para acompanhar as tendências de laboratório e de campo ao longo do tempo. Consulte Como visualizar os resultados da auditoria no Data Studio abaixo para 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 usa 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).
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 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. O relatório de experiência do usuário do Chrome (CrUX) é uma agregação móvel de 28 dias. Portanto, é recomendável usar seus próprios dados do RUM com o CrUX para detectar regressões mais rapidamente.
O Data Studio é uma ferramenta de visualização sem custo financeiro na qual você pode carregar facilmente 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 Relatório de UX do Chrome. Um dos gráficos mostra o aumento da Cumulative Layout Shift nas últimas semanas, o que significa regressões na estabilidade do layout em determinadas páginas. Nesse cenário, você precisa priorizar os esforços para analisar os problemas subjacentes dessas páginas.
Para simplificar o processo de ponta a ponta, da coleta de dados à visualização, é possível executar o AWP com uma lista de URLs para exportar automaticamente os resultados para as 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 vai continuar oferecendo mais recursos para atender a outros casos de uso no futuro.
Saiba mais no repositório AutoWebPerf.