Core Web Vitals - como fazer auditoria e relatórios automatizados passo a passo

Core Web Vitals: como fazer auditoria de páginas e relatórios automatizados [passo a passo]

Antes de começar a leitura, tenho uma dica bem legal de extensão de chrome: Core SERP Vitals. Essa nova extensão permite que você veja diretamente na SERP as métricas de cada página, inclusive de concorrentes!

Maio de 2021: a data já está marcada para a chegada das Core Web Vitals (CWV) como fatores de ranqueamento. 

Isso levanta muitas perguntas:

Será que vai impactar tanto assim? Preciso me preocupar? É um fator com pouco peso? 

Honestamente, não há como saber. O que podemos fazer é entender as possibilidades. 

As CWV fazem parte de um grupo de fatores chamado Page Experience, que incluem  HTTPS, site seguro, mobile friendly e propagandas intrusivas.

Ou seja, em Maio de 2021, o Google deixou claro que todos esses fatores também farão parte do update, não somente sobre as Core Web Vitals.

De qualquer forma, o fato é que esse é um fator de ranqueamento, portanto, pode impedir com que você fique na primeira posição do Google e deve ser levado a sério, não importando seu peso. 

Pessoalmente, acho que não devemos voltar toda a atenção para esse fator, a não ser que seu site esteja bem ruim neles, pois há muito outros fatores em jogo. Mas é um evento para o qual você deve se preparar com antecedência e que merece atenção. 

Separei este artigo para você aprender a fazer relatórios automáticos e auditorias completas para se preparar para o update!

Primeiro passo: criação dos relatórios de Core Web Vitals 

Um erro que cometi na prática foi não seguir esse passo no início!

É fundamental manter um histórico com as principais métricas de performance, desde o dia em que começou a fazer os testes.

Portanto, antes de entender as ações a fazer, crie seu relatório. Ele vai te ajudar não apenas com a auditoria, mas também para acompanhar o resultado de implementações feitas e a evolução desde o início do projeto. 

Com esses dados, fica bem mais fácil apresentar as mudanças feitas para coordenadores, heads e para o próprio time de desenvolvimento.

Porém, sei que é bem chato ficar coletando os dados manualmente, principalmente se você tem muitos sites/URLs para acompanhar.

Por isso, indico o uso de um script no Google Sheets que me ajudou bastante, presente neste site aqui. Ele basicamente usa a API aberta do PageSpeed Insights e atualiza nossa planilha de forma automática com os dados para cada URL.

Para utilizá-lo, basta seguir o passo a passo:

1. Faça uma cópia desta planilha

Planilha Core Web Vitals passo 1

2. Coloque as URLs que deseja acompanhar (podem ser quantas quiser basicamente)

URLs Core Web Vitals measure

3. Ao lado das URLs, insira os nomes das páginas que deseja criar na planilha

Nome das páginas Core Web Vitals

4. Clique em “Track  Core Web Vitals

Botão na planilha track core web vitals

5. Pronto!

Rápido assim, ele criará uma página na planilha para cada URL inserida, com diversas métricas do Pagespeed Insights, diariamente.

Mensurando as core web vitasl sheets

E o melhor de tudo: a planilha atualiza diariamente sem a necessidade de ficar ativando o script toda hora, é tudo automático! 

Essa solução é ótima para acompanhar as métricas do dia a dia de usuários (são usados os dados de campo do PageSpeed insights, explico melhor neste artigo). 

Agora saindo um pouco das planilhas, há outra solução interessante para acompanhar a evolução das métricas de usuários, através do CrUx Report!

Ele também mantém histórico dos dados reais de usuários para diversas métricas de performance, a diferença é que você pode acompanhá-lo pelo Data Studio de forma bem visual e macro.

Para utilizá-lo, siga os passos:

  • Em seguida, autorize o acesso no data studio:

Autorização CrUx report Core Web Vitals

  • Insira uma URL ou domínio que deseja analisar (sem o https://):

Domínio a analisar no CrUx Report

  • Clique em conectar
  • Por fim, clique em “Criar Relatório”, na parte superior direita da tela:

Criar Relatório CrUx

  • Pronto, você pode navegar pelas páginas já prontas com uma visualização bem legal de cada métrica:

CrUx Report Visualização

Simples, não é mesmo?

Nota: nos dois relatórios você pode acompanhar as métricas dos concorrentes, já que são dados abertos!

Pontos importantes parta considerar antes de priorizar tarefas de Core Web Vitals

Muitas ferramentas, extensões e possíveis ações, o que fazer com tudo isso?

Você não precisa ser um programador, mas é fundamental que tenha conhecimentos sobre CSS e JavaScript, principalmente. 

Por que? 

Basicamente, você precisará se comunicar com o time de desenvolvimento para implementar qualquer ação de CWV. 

Como algumas sugestões são mais complicadas, não basta apenas copiar as sugestões do PageSpeed Insights e enviar para o time. 

Você deve dar o máximo de contexto possível, pois só assim será ouvido com mais facilidade e suas tarefas serão priorizadas!

Para priorizar as tarefas certas com desenvolvimento, é preciso considerar ao menos três fatores:

  • Escalabilidade: o quanto aquele problema detectado se aplica a outras páginas do site e pode impactar nas métricas;
  • Viabilidade: o quão difícil é implementar essa ação e se é viável pensando nas limitações do time de desenvolvimento;
  • Impacto: o quanto a correção pode melhorar minhas métricas de performance, principalmente, as CWV.

Aqui, o ideal é focar em tarefas fáceis de implementar, altamente escaláveis e que terão impacto nas Core Web Vitals 

Por mais que não consiga fazer tudo até Maio de 2021, você deve se preparar o máximo, por isso o foco inicial deve ser nessas ações.

Um lazy load nos elementos de mídia das páginas, por exemplo, se encaixa nesse perfil: fácil, viável e escalável

Outro exemplo é o dimensionamento de imagens, anúncios e outros elementos da página (para corrigir CLS – mudanças no layout):

  • Costuma ser fácil (viabilidade) 
  • É escalável, pois, em geral, todas páginas costumam apresentar os mesmo elementos com problema de layout shif
  • Tem um forte impacto em CLS (umas das métricas das CWV) 

Enfim, chega de teoria, vamos à prática novamente:

Auditando uma página na prática: ferramentas, dicas e extensões

São tantas ferramentas, extensões, scripts e não sei o quê, que ficamos perdidos, não é mesmo?

Realmente temos muitas ferramentas úteis para utilizar quando queremos auditar uma página, mas gosto de reduzir esse número para não ficar muito confuso na hora de separar as ações mais importantes.

As ferramentas que uso e recomendo são:

  • PageSpeed Insights: a ferramenta é muito boa pois integra dados do lighthouse e CrUx, trazendo tanto dados reais do usuário, quanto de laboratório em um mesmo local; 

  • Análise de performance em “Inspecionar”: você pode rodar um teste de performance pelo “Inspecionar” na página, onde há dados muito ricos sobre cada elemento da página no processo de carregamento, para utilizar esse relatório, siga os passos:
    • Pressione Ctrl + Shift + I;
    • Na parte superior da tela, clique em “Performance”;
    • Após, clique no botão de reload:
    • Performance -- Reload
    • Aguarde a análise;
    • Pronto, meio confuso, não? Mas não é tão difícil quanto parece, explore bem o relatório pois ele tem informações ricas! Por exemplo, você pode clicar em LCP para ver exatamente qual foi o maior elemento na página:
    • Performance report métricas e gráficos
  • Coverage report: também dentro da ferramenta inspecionar, você pode ver quais arquivos de scripts e CSS não estão sendo utilizados na página. Para utilizá-lo, siga os passos:
    • Clique nos três pontos no canto superior direito da tela;
    • Passe o mouse sobre “More Tools
    • Clique em “Coverage”:
    • Covarage Report inspecionar
    • Você vai notar uma nova janela na parte inferior da tela. Clique nela e, após, selecione o botão de reload:
    • Reload Covarage report
    • Pronto, agora você pode ver a quantidade de bytes não utilizados por arquivo na página:
    • Scripts e CSS não utilizados que podem ser otimizados

  • Webpagetest: outra ferramenta desenvolvida com base no lighthouse. O motivo pelo qual gosto de usar ela, é que ela traz sugestões diferentes de otimização, que podem passar batido com uma auditoria apenas no Pagespeed Insights, por exemplo. 
  • Webpagetest
  • Layout shift tool: essa ferramenta gera um GIF que mostra de forma bem visual e prática quais elementos são responsáveis por causar mudanças no layout da página (CLS):
Layout Shift Tool Exemplo Magazine

Para quem usa o WordPress, há vários plugins muitos legais que fazem todo o trabalho para você (desde o diagnóstico até a implementação). Dois deles em particular acho bem úteis:

Claro que essas são apenas minhas preferências, mas, além dessas ferramentas, vocês pode usar várias que agregam diferentes informações, como:

Espero que tenha ajudado! Aproveite para ver meu artigo sobre dados estruturados, uma parte fundamental do SEO que pode destravar o potencial de seu site.

Últimos Posts

Categorias e Autor