Como Usar a API do PageSpeed Insights para Monitorar o Desempenho da Página

Existem ferramentas para ajudar a monitorar o desempenho das páginas e avaliar suas melhorias. Uma das melhores é o PageSpeed Insights. Ele está disponível como um aplicativo da web e como a aba Lighthouse nas Ferramentas de Desenvolvedor do Chrome (as mesmas Ferramentas de Desenvolvedor também estão disponíveis no Edge, Opera, Brave e Vivaldi).

O desempenho da página da web é mais importante do que nunca. Os usuários esperam uma experiência ágil e responsiva que seja comparável com aplicativos de desktop. Além disso, o Core Web Vitals do Google medem o desempenho da página – isso influencia o PageRank e seus esforços de Otimização de Mecanismos de Pesquisa (SEO).

O WordPress roda mais de um terço de todos os sites, mas o desempenho é afetado por uma hospedagem ineficaz, temas lentos e uma confiança excessiva em plugins. Você pode corrigir a maioria dos problemas mudando para um bom provedor de hospedagem de sites e usando as melhores práticas de desempenho.

Acessando o Lighthouse

Inicie o Lighthouse abrindo a página que você deseja examinar e pressionando Ctrl/Cmd + Shift + I ou escolhendo “Developer Tools” em “More tools” no menu. Alterne para a aba Lighthouse e clique no botão “Page Load“. Os resultados serão exibidos após alguns segundos:

Você pode detalhar as porcentagens de nível superior para descobrir mais informações e dicas que abordam os problemas conhecidos. A ferramenta é inestimável, mas há desvantagens:

• Você deve iniciar manualmente uma execução para cada página que você estiver testando.
• Não é fácil registrar como os fatores têm melhorado ou piorado ao longo do tempo.
• Há muitos dados para verificar e é fácil obter algo errado.
• Os detalhes técnicos são fornecidos para os desenvolvedores. Pode ser esmagador para clientes e gerentes que desejam uma visão geral rápida do progresso.
• As execuções do Lighthouse podem ser influenciadas pela velocidade do dispositivo local e da rede, o que pode levar a suposições falsas.

A API PageSpeed Insights fornece uma maneira de resolver esses problemas para que os testes possam ser automatizados, registrados e comparados.

O que é API PageSpeed Insights?

O Google fornece gratuitamente a PageSpeed Insights REST API que retorna dados em formato JSON contendo todas as métricas do Lighthouse e muito mais. Isso permite automatizar execuções de páginas, armazenar os dados resultantes, acompanhar mudanças ao longo do tempo e exibir as informações exatas de que você precisa.

A PageSpeed Insights API emula como o Google vê o seu site. Você pode executar um relatório a cada poucos dias ou sempre que você lançar uma atualização de desempenho.

Os resultados são úteis, mas não necessariamente indicativos da experiência real do usuário. A API de desempenho do navegador é uma opção melhor quando você quer monitorar o desempenho real em todos os dispositivos e redes do seu usuário.

Guia de início rápido da API do PageSpeed Insights

Copie o seguinte endereço para o seu navegador e edite o url para avaliar o desempenho da sua página:

https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://www.yoursite.com/

Firefox é ideal porque ele tem um visualizador JSON embutido, embora o Chrome tenha extensões que fornecem a mesma funcionalidade. A pontuação geral de desempenho do Lighthouse é destacada abaixo:

Você pode mudar a string de consulta de acordo com suas próprias páginas e preferências. O único parâmetro obrigatório é a URL

url=https://mysite.com/page1

Um teste de desktop é executado por padrão, mas você pode solicitá-lo explicitamente com:

strategy=desktop

ou mude para o celular com:

strategy=mobile

Somente testes de desempenho são executados a menos que você especifique uma ou mais categorias de interesse:

category=performance
category=accessibility
category=best-practices
category=seo
category=pwa

Um idioma específico pode ser definido definindo um local – como o francês:

locale=fr-FR

e os detalhes da campanha do Google Analytics podem ser definidos com:

utm_campaign=<campaign>
utm_source=<source>

O serviço é gratuito para pedidos infrequentes, mas você precisará se inscrever para uma chave API do Google se você planeja executar muitos testes a partir do mesmo endereço IP em um curto período. A chave é adicionada à URL com:

key=<api-key>

Você pode construir a string de consulta da URL especificando seus parâmetros escolhidos separados com caracteres ampersand (&). A URL da API a seguir testa a página em https://mysite.com/ usando um dispositivo móvel para avaliar o desempenho e os critérios de acessibilidade:

https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://mysite.com/&strategy=mobile&category=performance&category=accessibility

Você pode construir suas próprias URLs ou usar a ferramenta construtor de URLs API do Google PageSpeed caso você precise de mais assistência.

Resultados JSON da API do PageSpeed Insights

Os testes normalmente retornarão cerca de 600Kb de dados JSON, dependendo das categorias escolhidas, do número de ativos na página e da complexidade das capturas de tela (incorporadas no formato base64).

A quantidade de dados é assustadora, há alguma duplicação, e a documentação dos resultados nem sempre é clara. O JSON é dividido em quatro seções, como descrito abaixo.

loadingExperience

Estas são métricas calculadas para a experiência de carregamento da página do usuário final. Inclui informações como CUMULATIVE_LAYOUT_SHIFT_SCORE, FIRST_CONTENTFULT_PAINT_MS, e FIRST_INPUT_DELAY_MS. Detalhes e um valor de “categoria” retornam RÁPIDO (FAST), MÉDIO (AVERAGE), LENTO (SLOW) ou NENHUM (NONE) se nenhuma medição foi feita. Exemplo:

"loadingExperience": {
"metrics": {
"CUMULATIVE_LAYOUT_SHIFT_SCORE": {
"percentile": 0,
"distributions": [
{
"min": 0,
"max": 10,
"proportion": 0.970
},
{
"min": 10,
"max": 25,
"proportion": 0.017
},
{
"min": 25,
"proportion": 0.012
}
],
"category": "FAST"
},

originLoadingExperience

Essas são métricas agregadas calculadas para todas as experiências de carregamento de página dos usuários. As seções são idênticas às de loadingExperience acima, e sites com menos tráfego provavelmente não mostrarão diferenças nos números.

lighthouseResult

Esta é a maior seção e contém todas as métricas do Lighthouse. Ela fornece informações sobre o teste:

• requestedUrl – a URL que você solicitou
• finalUrl – a página real testada após seguir todos os redirecionamentos
• lighthouseVersion – a versão do software
• fetchTime – a hora em que o teste foi realizado
• userAgent – a string de agentes de usuários do navegador utilizado para o teste
• environment – informações estendidas do agente do usuário
• configSettings – as configurações passadas para a API

Isso é seguido por uma seção “audits” com muitas seções, incluindo unused-javascript, unused-css-rules, total-byte-weight, redirects, dom-size, largest-contentful-paint-element, server-response-time, network-requests, cumulative-layout-shift, first-meaningful-paint, screenshot-thumbnails e full-page-screenshot.

A maioria das métricas de auditoria fornece uma seção “details” que contém fatores como “overallSavingsBytes” e “overallSavingsMs”, que estimam os benefícios da implementação de uma melhoria de desempenho.

As seções “screenshot” de página completa e em miniatura contêm dados de imagem base64 integrados.

Uma seção “metrics” fornece um resumo de todas as métricas em um array “items”, por exemplo:

"metrics": {
"id": "metrics",
"title": "Metrics",
"description": "Collects all available metrics.",
"score": null,
"scoreDisplayMode": "informative",
"details": {
"type": "debugdata",
"items": [{
"observedFirstVisualChange": 234,
"observedFirstContentfulPaint": 284,
"interactive": 278,
"observedFirstPaintTs": 1579728174422,
"observedDomContentLoaded": 314,
// ... etc ...
}]
},
"numericValue": 278,
"numericUnit": "millisecond"
},

A seção “audits” é seguida por “categories”, que fornece pontuações gerais do Lighthouse para as categorias escolhidas passadas na URL da API:

"categories": {
"performance": {
"id": "performance",
"title": "Performance",
"score": 0.97,
"auditRefs": [
//...

A “pontuação” é um número entre 0 e 1, normalmente mostrado como uma porcentagem em relatórios do Lighthouse. Em geral, uma pontuação de:

• 0.9 a 1.0 é bom
• 0.5 a menos de 0,9 indica que é necessário melhorar
• abaixo de 0,5 é pobre e requer atenção mais urgente

A seção “auditRefs” fornece uma lista de todas as métricas e as ponderações usadas para calcular cada pontuação.

analysisUTCTimestamp

Finalmente, o horário de análise é relatado. Isso deve ser idêntico ao horário mostrado em lighthouseResult.fetchTime.

Métricas úteis de resultados JSON

Recomendo que você salve e examine o resultado JSON em um editor de texto. Alguns têm formatação JSON integrada ou disponível como plugins. Alternativamente, você pode usar ferramentas on-line gratuitas como:

• JSON Formatter & Validator
• JSON Formatter
• jsonformatter.io

É provável que as seguintes métricas sejam úteis. Lembre-se de definir as opções de categoria associadas na URL, conforme necessário.

Resumo das métricas

Pontuações gerais de 0 a 1:

Métricas de desempenho

Estes incluem as pontuações do Core Web Vitals de 0 a 1:

Outras pontuações de desempenho úteis incluem:

Você geralmente pode obter números e unidades reais, como, por exemplo:

• lighthouseResult.audits.total-byte-weight.numericValue –
  o tamanho total da página, por exemplo, 450123
• lighthouseResult.audits.total-byte-weight.numericUnit –
  as unidades usadas para o tamanho total da página, por exemplo, “byte”

Alternativamente, “displayValue” geralmente contém uma mensagem legível tanto com a figura quanto com a unidade:

• lighthouseResult.audits.server-response-time.displayValue –
  uma mensagem sobre o tempo de resposta, por exemplo, “Root document took 170 ms”
• lighthouseResult.audits.dom-size.displayValue –
  uma mensagem sobre o número de elementos no DOM, por exemplo, “543 elementos”

Criando um painel de desempenho sem código

Os feeds API em tempo real podem ser lidos e processados em muitos sistemas, incluindo o Microsoft Excel. (De forma um tanto bizarra, o Google Sheets não suporta JSON feeds sem mais plugins ou código macro. Ele suporta XML)

Para importar a pontuação de desempenho geral em tempo real para o Excel, inicie uma nova planilha, mude para a aba Data e clique em From Web. Digite a URL da API PageSpeed Insights e clique em OK:

Clique em Connect no próximo diálogo e mantenha a configuração padrão (Anônimo). Você irá prosseguir para a ferramenta Query Settings:

Clique em Record à direita da métrica de resultados do lighthouse. Em seguida, clique o mesmo nas categories e em performance para detalhar a hierarquia de objetos JSON:

Clique no ícone Into Table, na parte superior das opções do menu do botão direito do mouse.

Você pode então clicar na seta de filtro no cabeçalho da tabela para remover tudo, exceto a score, antes de clicar em OK:

Finalmente, clique em Close & Load para mostrar a pontuação da performance em tempo real em sua planilha:

Você pode seguir o mesmo processo para outras métricas de interesse.

Criando um painel de desempenho web

Esta Demonstração do Codepen fornece um formulário onde você pode inserir uma URL e escolher uma análise desktop ou móvel para obter resultados.

O código cria uma URL do PageSpeed Insights, chama a API e, em seguida, renderiza vários resultados em uma tabela de resumo que é mais rápida de visualizar do que um relatório padrão do Lighthouse:

A função assíncrona startCheck() é chamada quando o formulário é submetido. Ela cancela o evento de envio e esconde os resultados anteriores:

// make API request
async function startCheck(e) {
e.preventDefault();
show(resultTable, false);
show(status);
show(error, false);

Ele então constrói apiURL a partir dos dados do formulário e desabilita os campos:

  const
form = e.target,
fields = form.firstElementChild,
data = new FormData(form),
qs = decodeURIComponent( new URLSearchParams(data).toString() ),
apiURL = form.action + '?' + qs;
fields.disabled = true;

A API Fetch é usada para chamar a URL PageSpeed, obter a resposta e analisar a string JSON em um objeto JavaScript utilizável. Um bloco try/catch assegura que as falhas sejam capturadas:

  try {
// call API and get result
const
response = await fetch(apiURL),
result = await response.json();

O objeto resultado é passado para uma função showResult(). Isso extrai propriedades e as coloca na tabela de resultados ou qualquer outro elemento HTML que tenha atributo de ponto de dados definido para uma propriedade PageSpeed API, por exemplo:

<td data-point="lighthouseResult.categories.performance.score"></td>

O fim do bloco de tentativas:

    // output result
showResult(result);
show(status, false);
show(resultTable);
}

Finalmente, um bloco de captura lida com erros e os campos do formulário são reativados para que mais testes possam ser executados:

  catch(err) {
// API error
console.log(err);
show(status, false);
show(error);
}
fields.disabled = false;
}

Outras opções de desenvolvimento

O código de exemplo acima busca um resultado da API do PageSpeed Insights quando você o solicita. O relatório é mais configurável do que o Lighthouse, mas a execução ainda é um processo manual.

Se você planeja desenvolver seu próprio painel de controle, pode ser prático criar um pequeno aplicativo que chama a API PageSpeed Insights e armazena o JSON resultante em um novo registro do banco de dados contra a URL testada e a data/hora atual. A maioria dos bancos de dados tem suporte JSON, embora o MongoDB seja ideal para a tarefa. Um cron job pode chamar seu aplicativo com base no tempo – talvez uma vez por dia durante as primeiras horas da manhã.

Um aplicativo no lado do servidor pode então implementar sua própria API REST de acordo com seus requisitos de relatório, por exemplo, retornar as alterações em métricas de desempenho específicas entre duas datas. Essa API pode ser chamada pelo JavaScript do lado do cliente para exibir tabelas ou gráficos que ilustram melhorias de desempenho ao longo do tempo.

Se você quiser criar relatórios complexos com quantidades significativas de dados, é preferível pré-calcular os números uma vez por dia no ponto em que novos dados PageSpeed estiverem disponíveis. Afinal, você não quer mostrar como o desempenho está melhorando em um relatório que leva minutos para ser gerado!

Resumo

A ferramenta Lighthouse do Chrome é excelente, mas é trabalhoso avaliar frequentemente muitas páginas. A API do PageSpeed Insights permite avaliar o desempenho do site usando técnicas programáticas. Os benefícios são:

• Os testes de desempenho podem ser automatizados. Você não pode esquecer de fazer um teste.
• Os resultados são coletados em servidores do Google para que os dispositivos locais e os fatores de velocidade da rede tenham menos influência.
• As métricas incluem informações que normalmente não estão disponíveis no Lighthouse.
• Métricas e monitoradas ao longo do tempo para garantir que o desempenho da página tenha melhorado com cada atualização.
• As informações de desempenho, acessibilidade e SEO podem ser mostradas em relatórios simplificados para que estejam disponíveis rapidamente para desenvolvedores, gerentes e clientes.

Craig Buckler

Freelance UK web developer, writer, and speaker. Has been around a long time and rants about standards and performance.

• Site
• LinkedIn
• Twitter
• YouTube