Como você pode medir os Core Web Vitals #ÚltimasNotícias #tecnologia

O Google definiu um conjunto de métricas nas quais os proprietários de sites devem se concentrar ao otimizar a experiência da página. As métricas Core Web Vitals são parte dos fatores de experiência da página do Google que todos os sites devem se esforçar para atender.

As expectativas dos usuários em relação às experiências na web podem variar de acordo com o site e o contexto, mas algumas permanecem consistentes independentemente de onde estejam na web.

Especificamente, o Google identifica as principais necessidades de experiência do usuário, como velocidade de carregamento, interatividadee estabilidade visual.

O que são as pontuações do Core Web Vitals?

O Google recomenda que os proprietários de sites tenham métricas CWV abaixo do limite “bom” especificado abaixo:

Qualquer coisa entre bom e ruim é considerada moderada e deve ser melhorada.

Diagrama mostrando três métricas de desempenho do Core Web Vitals

O Google explica por que essas três métricas, em particular, são tão importantes:

“Todas essas métricas capturam resultados importantes centrados no usuário, são mensuráveis ​​em campo e têm equivalentes e ferramentas de diagnóstico laboratorial de suporte.

Por exemplo, embora o Largest Contentful Paint seja a métrica de carregamento principal, ele também depende muito do First Contentful Paint (FCP) e do Time to First Byte (TTFB), que continuam sendo essenciais para monitorar e melhorar.”

Continue após a publicidade

Como o Google mede os Core Web Vitals

O relatório Google CrUX usa dados do Chrome quando os usuários navegam em sites para coletar dados de usuários do mundo real de seus dispositivos. Pelo menos 75% das visualizações de página do site devem ter pontuações “boas” para que o site atenda aos limites do CWV.

Observe que ele usa 75% das visualizações de página de todo o site, o que significa que páginas com CWV ruim e menos tráfego não afetarão a pontuação geral do site.

É por isso que você pode descobrir que sites com uma pontuação “boa” têm páginas com CWVs terríveis e vice-versa.

Esse método de medição garante que um baixo número de visitas percentuais devido a condições lentas da rede não reduza a pontuação “boa” de todo o site.

Veja como essas métricas podem ser medidas.

Como medir os principais sinais vitais da Web

O Google incorpora recursos de medição do Core Web Vitals em muitas de suas ferramentas existentes.

O Core Web Vitals pode ser medido usando estas ferramentas gratuitas:

Vamos mergulhar em como usar cada uma dessas ferramentas gratuitas de SEO para medir os Core Web Vitals.

Insights de velocidade de página

O PageSpeed ​​Insights permite que você meça o Core Web Vitals com dados de laboratório e de campo incluídos nos relatórios.

A seção de laboratório do relatório fornece dados coletados de dispositivos de usuários reais em todas as regiões e diferentes condições de rede, enquanto a seção de campo mostra dados de dispositivos simulados usando apenas um dispositivo.

Relatório de insights do Pagespeed. Dados de campo vs. laboratório

Se suas páginas tiverem poucas visitas ou forem novas, pode não haver dados históricos suficientes para que os dados de campo mostrem um relatório. Nesse caso, a pontuação média de campo para todo o site será usada como fallback, se disponível; caso contrário, não mostrará dados.

Depois de executar os relatórios, você terá uma lista de recomendações sobre como melhorar suas pontuações abaixo. Você pode ler nosso guia sobre o relatório PageSpeed ​​Insights para aprender como usá-lo.

Extensão Web Vitals

Usar a ferramenta PageSpeed ​​Insights é sempre uma ótima maneira de depurar e auditar o desempenho, mas geralmente não é conveniente. Você tem que abrir uma nova aba no seu navegador e navegar para longe da página, o que distrai.

Felizmente, há uma extensão disponível para instalação na Chrome Web Store que mede as métricas do Core Web Vitals em tempo real durante sua navegação e também carrega dados de campo, se disponíveis.

Pontuações do Core Web Vitals

Além desta UI padrão, este addon também oferece oportunidades de depuração mais granulares por meio da aba ‘console’ do DevTools do navegador. Aqui está um guia rápido em vídeo sobre como fazer isso.

Depurar a métrica Interaction Next Paint é bem desafiador, pois ela pode degradar em qualquer ponto durante a jornada de interação do usuário. No PageSpeed ​​Insights, você obtém apenas um valor médio em todas as interações, não qual interação no elemento específico da página foi lenta.

Ao usar esta extensão, você pode interagir com a página e identificar elementos que degradam a métrica INP verificando os logs do console. Por exemplo, você pode clicar em botões e verificar o console para ver quanto tempo a interação levou.

Assim que você identificar qual elemento está lento para responder, você pode verificar seu código JavaScript para ver se algum script está bloqueando a interação.

Farol

O Lighthouse é uma ferramenta de código aberto que você pode usar para auditar o desempenho da sua página da web, que também está disponível no DevTools do Chrome.

Todos os relatórios fornecidos pelo Lighthouse são atualizados para refletir a versão mais recente.

Exemplo de relatório de farol no navegador Chrome DevTools

Uma ressalva a ser observada é que, ao executar o Lighthouse no seu navegador, ele também carrega muitos recursos das suas extensões do Chrome, o que pode afetar suas métricas no relatório do Lighthouse.

A mensagem indicou problemas com a execução do Lighthouse e mencionou especificamente que as extensões do Chrome impactaram negativamente o desempenho de carregamento da página.

É por isso que sugiro usar o Chrome Canary para depuração como uma boa prática. O Chrome Canary tem uma instalação isolada do seu navegador Chrome regular, onde você pode acessar recursos experimentais. Isso permite que você teste seu site com recursos que serão incluídos em versões futuras do Chrome.

Fiz um experimento rápido para ver o quanto as pontuações de velocidade de página do Lighthouse podem variar drasticamente na instalação limpa do Canary em comparação ao seu navegador com complementos habilitados.

Duas capturas de tela dos resultados da auditoria Lighthouse do Google Chrome DevTools. Esquerda: versão estável do Chrome com complementos e direita: Canary sem complementos.

Um recurso importante que o Lighthouse habilita é medir pontuações durante a interação com a página da web e medir como certas interações afetam suas pontuações, especialmente a métrica Interação com a próxima pintura (INP).

Período de tempo da opção no Chrome Lighthouse DevTools

Sugiro que você se aprofunde e domine o uso do Lighthouse lendo nosso guia escrito por dois dos especialistas técnicos em SEO mais experientes do mundo.

Painel CrUX

O relatório CrUX é um conjunto de dados públicos de dados de experiência de usuário real em milhões de sites. O relatório Chrome UX mede versões de campo de todos os Core Web Vitals, o que significa que ele relata dados do mundo real em vez de dados de laboratório.

Com o PageSpeed ​​Insights, Lighthouse ou o complemento Web Vital que discutimos, agora você sabe como medir o desempenho de URLs individuais. Mas como você vê o quadro geral de um site com milhares de URLs? Qual porcentagem de URLs tem pontuações “boas” ou pontuações de alguns meses atrás para comparar?

É aqui que o painel gratuito do Looker Studio do CrUX do Google ajuda. Você pode verificar segmentos e ver seus dados históricos.

Para fazer isso, basta copiar e colar seu domínio no inicializador do painel do CrUX.

Iniciador de painel CrUX

Então, aproveite lindos relatórios de graça. Aqui está um exemplo de relatório para o Search Engine Journal, caso você queira explorar um painel real.

Exemplo de painel CrUX para Search Engine Journal

Neste painel, você pode encontrar muito mais além das métricas CWV. Se você não atingir as pontuações “boas” do CWV, mas os dados de laboratório mostrarem que você está atingindo todos os limites, pode ser porque seus visitantes têm uma conexão ruim.

É aqui que o relatório de distribuição de conexão é muito valioso: ele pode ajudar você a entender se o baixo desempenho de suas pontuações é devido a problemas de rede.

Distribuição de conexão no relatório CrUX

Infelizmente, este painel não fornece um detalhamento das métricas do CWV por país, mas há uma ferramenta gratuita, treo.sh, que você pode usar para verificar métricas de desempenho por região.

Análise das métricas CWV por regiões geográficas, o que ajuda a entender onde elas ficam aquém de boas pontuações

Console de pesquisa

O GSC é outra ferramenta para ver as métricas gerais de CWV do seu site.

Um painel do Google Search Console exibindo “Core Web Vitals”

O relatório identifica grupos de páginas que exigem atenção com base em dados do mundo real do relatório Chrome UX. Se você abrir o relatório clicando no link do canto superior direito, verá um detalhamento dos seus problemas.

Relatório Core Web Vitals para dispositivos móveis no GSC

Com este relatório, esteja ciente de que ele extrai dados do CruX, e os URLs serão omitidos se não tiverem uma quantidade mínima de dados de relatório, o que significa que você pode ter páginas com métricas CWV ruins que não são relatadas aqui.

Web-Vitals.JS e GA4

web-vitals.js é uma biblioteca de código aberto que mede com precisão as métricas CWV da mesma forma que o Chrome ou o PageSpeed ​​Insights. A extensão web vitals que discutimos acima, na verdade, usa essa biblioteca para relatórios e registros.

No entanto, você pode integrá-lo com o Google Analytics 4 para obter um relatório de desempenho detalhado em escala em um site com muitas páginas. Abaixo está um exemplo de código para a integração gtag do GA4.

No exemplo de código, ‘value’ é um parâmetro integrado, e ‘metric_id’, ‘metric_value’, ‘metric_delta’, ‘metric_rating’ e ‘debug_target’ são dimensões personalizadas opcionais que você pode incluir conforme suas necessidades.

Se você quiser ver essas dimensões nos relatórios de exploração do GA4, precisará adicioná-las no administrador de definições personalizadas do GA4. Caso contrário, se você decidir enviar esses parâmetros e não adicioná-los via administrador, poderá acessar dados brutos somente via BigQuery. Isso fornece muito mais flexibilidade, mas requer experiência em SQL.

Se você decidir incluir ‘metric_id’, que, no caso de sites com muito tráfego, terá um número indefinido de valores exclusivos, isso poderá causar problemas de cardinalidade em relatórios de exploração.

Portanto, talvez você queira habilitar esses parâmetros personalizados adicionais por um curto período para coletar dados de amostra para solução de problemas.

Para enviar dados de métricas CWV via Google Tag Manager, consulte este guia criado pela equipe de soluções de marketing do Google. Como prática recomendada, você deve usar a integração GTM, e o código acima (que é totalmente funcional) demonstra a mecânica fundamental da coleta e do relatório de dados CWV.

Além do que discutimos, ferramentas freemium ou pagas, como Debugbear, treo.sh, Oncrawl, Lumar ou Semrush, podem ajudar você a identificar suas pontuações em todas as páginas em uma escala e em tempo real.

No entanto, gostaria de ressaltar que, das ferramentas listadas, Debugbear e treo.sh são altamente especializadas em métricas CWV e fornecem insights de alta granularidade com segmentações avançadas.

E quanto a outras métricas valiosas?

Por mais importantes que sejam os Core Web Vitals, eles não são os apenas métricas de experiência de página nas quais se concentrar.

Garantir que seu site use HTTPS, seja compatível com dispositivos móveis, evite intersticiais intrusivos e mantenha uma distinção clara entre os sites são partes cruciais dos fatores de classificação da experiência da página.

Então pense nisso também do ponto de vista do usuário, e não apenas porque é um fator de classificação.

Por exemplo, de uma perspectiva de conversões, se você tiver um site de comércio eletrônico lento, seus clientes em potencial poderão sair, o que causará perdas de receita.

Mais recursos:

Imagem em destaque: BestForBest/Shutterstock