Home Artigos técnicos Como medir os Web Vitals principais do meu site
Applications

Como medir os Web Vitals principais do meu site

About The Author

Outline

Fonte original: Layer0

Em abril de 2021, o Google começou a lançar a atualização de experiência de página, que inclui uma alteração de algoritmo de classificação, favorecendo páginas da web de alto desempenho nos resultados da pesquisa. O desempenho é baseado no Core Web Vitals de um site, uma métrica de página da web que impacta muito a experiência do usuário.

Continue lendo para entender rapidamente se seu site passa ou falha no Core Web Vitals.

O que são Core Web Vitals

Como parte do esforço do Google para criar uma Web mais rápida para todos, a equipe do Chrome tem trabalhado para padronizar um conjunto de métricas para medir como os usuários experimentam o desempenho de uma página. Core Web Vitals tornou-se uma peça importante na resolução deste quebra-cabeça de desempenho; estas métricas focam-se no carregamento, interatividade e estabilidade visual.

As seguintes métricas compõem Core Web Vitals:

  • Maior Contentful Paint (LCP): Mede quando o maior elemento de conteúdo está totalmente visível na tela. LCPs de 2,5 segundos ou menos são consideradas boas experiências de carregamento.
  • First Input Delay (FID): Mede o tempo desde quando um usuário interage pela primeira vez com uma página (clique ou toque) até o momento em que o navegador é capaz de responder a essa interação. FIDS de 100 milissegundos ou menos é considerado boas experiências interativas.
  • Deslocamento de layout cumulativo (CLS): Mede a frequência com que os usuários experimentam mudanças inesperadas de layout. CLS de .1 ou menos é considerada uma experiência muito visualmente estável.

Para passar pelo Core Web Vitals, cada uma das métricas acima precisa atingir o alvo recomendado para 75% de todos os usuários que visitam sua página, segmentados em dispositivos móveis e desktop.

Como medir Core Web Vitals

Quando um site passa Core Web Vitals, os usuários têm 24% menos probabilidade de abandonar páginas. Dito isto, qualquer proprietário do site pode e deve medir essas métricas. A maneira mais fácil de verificar se seu site passa seus Core Web Vitals é através do PageSpeed Insights.

1. Vá para https://developers.google.com/speed/pagespeed/insights

2. Digite o URL do seu site na caixa de pesquisa, pressione Analisar e aguarde 5-10 segundos

Analisador PageSpeed Insights

3. Role para baixo até Dados do campo. Imediatamente, você verá se o seu site passa ou não na avaliação Core Web Vitals no texto acima dos gráficos de barras.

Dados do campo

4. Para avaliar as métricas do Core Web Vitals, preste atenção às medições LCP, FID e CLS, ainda em dados de campo. O símbolo de marcador azul também marca estes.

Maior Contentful Paint (LCP), Primeiro Atraso de Entrada (FID), Mudança de Layout Cumulativa (CLS)

5. Verifique suas pontuações médias. LCPs de 2,5 segundos ou menos, FIDs de 100 milissegundos ou menos e um CLS de .1 ou menos são considerados boas experiências do usuário.

Dados métricos médios

6. Para determinar se você passa por uma única métrica vital Core Web, verifique a porcentagem na barra verde. Se for 75% ou superior, você passa. Isso significa que sua página da Web oferece uma boa experiência de usuário para essa métrica específica pelo menos 75% do tempo que alguém a visita.

Limite vital da Web principal – percentil 75

Ignorar dados de laboratório

Existem dados de laboratório e de campo na página do PageSpeed Insights. Dados de campo são de usuários reais que realmente carregam e interagem com sua página. Os dados de laboratório são medidos com um teste controlado sob condições ideais e não captam gargalos reais (ou seja, dispositivo, condições de rede, configurações, etc.).

O Google não usa dados de laboratório ou a pontuação de desempenho do Lighthouse para classificar seu site. A classificação é baseada apenas nos dados de campo mostrados na imagem abaixo.

A classificação é baseada em dados de campo

Como melhorar seus Core Web Vitals

Você provavelmente não está passando Core Web Vitals devido a várias razões. O PageSpeed Insights oferece auditorias para LCP e CLS. Embora o FID não esteja incluído, a otimização que melhora o tempo de bloqueio total (TBT) também deve melhorar o FID no campo.

Para ver sua auditoria, siga as etapas abaixo:

Role para baixo até a seção Oportunidades da página e consulte Auditorias para obter métricas específicas.

Oportunidades do PageSpeed Insights

2. Clique na métrica que você deseja melhorar e você terá acesso a técnicas mais detalhadas para melhorar os tempos de carregamento, interatividade ou estabilidade visual em sua página da web.

Auditorias do PageSpeed Insights

Geralmente, existem algumas razões comuns pelas quais um Core Web Vital falha.

O maior Contentful Paint é facilmente afetado pelos seguintes fatores:

  1. Tempos de resposta lentos do servidor
  2. Bloqueio de renderização JavaScript e CSS
  3. Longos tempos de carregamento de recursos
  4. Problemas de renderização do lado do cliente

O primeiro atraso de entrada é afetado por:

  1. Tarefas longas que bloqueiam o thread principal por 50 milissegundos ou mais
  2. Execução de script em primeira parte atrasando a prontidão da interação
  3. Tempo de execução de JavaScript pesado

Instabilidade visual, ou Mudança de Layout Cumulativa, é um problema quando:

  1. Uma imagem, vídeo ou anúncio redimensiona-se
  2. A fonte é carregada tarde e é exibida maior ou menor do que o pretendido

Para obter soluções sobre como corrigir cada um desses problemas, consulte este blog do Core Web Vitals Otimization.

Prepare seu site para uma boa experiência do usuário

Até agosto, o Google mudará completamente o ranking de atualização da experiência da página. Se o seu site passar Core Web Vitals, você verá um SEO mais alto e taxas de rejeição mais baixas. Mais importante ainda, você vai oferecer uma experiência excecional que satisfaz seus usuários o suficiente para ficar e voltar.

Layer0 construiu uma ferramenta gratuita para rastrear, medir e otimizar seus Core Web Vitals. Seu site não precisa ser hospedado no Layer0 para aproveitar essas análises. É seu com apenas uma tag de script.

O Guide to Iceland, o maior site de viagens da Islândia, falhou todas as três métricas antes de entrar na plataforma Layer0. Sua velocidade do site melhorou em 55% e passa Core Web Vitals com cores voadoras.

Se você tiver dúvidas sobre a atualização da experiência da página ou como acelerar seu site, entre em contato com um especialista em velocidade do site hoje mesmo. Se você está pronto para experimentar a plataforma, inscreva-se aqui!