Glossário de SEO: Google Core Web Vitals

Quais são os Core Web Vitals existentes e quais são suas funções?

O Google definiu três Core Web Vitals que estão particularmente preocupados com os requisitos técnicos de um site: Com que rapidez o conteúdo é fornecido, quando o site responde ao usuário e qual é a estabilidade do conteúdo visual? Os seguintes Core Web Vitals são usados para medir isso:

 

1. Maior tinta com conteúdo (LCP)
2. Interação com o Next Paint (INP)
3. Deslocamento cumulativo de layout (CLS)

 

Se você já se familiarizou com o tópico, poderá notar que um Web Vital desapareceu e um novo valor foi adicionado. E de fato: em março de 2024, o Google substituiu o Web Vital First Input Delay (FID) pela métrica Interaction to Next Paint (INP). Explicaremos o motivo em breve. Mas, primeiro, vamos dar uma olhada nos Core Web Vitals atuais e em suas funções.

 

LCP: a velocidade de carregamento de um site

O LCP (Largest Contentful Paint ) descreve o tempo necessário para que o conteúdo principal ou o maior elemento relevante para o usuário se torne visível após um clique em uma página. Inicialmente, isso se refere apenas ao conteúdo acima da dobra, ou seja, blocos de texto ou imagens que aparecem no site sem rolagem.

 

No passado, a duração até o aparecimento do primeiro elemento no site era geralmente medida em vez do LCP: o First Contentful Paint (FCP). Isso poderia ser, por exemplo, a aparência das barras de carregamento, o índice ou a barra de entrada nos mecanismos de pesquisa. O LCP agora é muito mais fácil de usar, pois a intenção do usuário é levada em consideração. Isso ocorre porque o usuário está interessado principalmente no conteúdo principal do site.

 

Se analisar suas métricas, você se perguntará: Qual é um bom valor para meu LCP? O Google fornece as seguintes dicas:

 

• Bom: velocidades de carregamento abaixo de 2,5 segundos
• Há espaço para melhorias: velocidades de carregamento entre 2,5 e 4 segundos
• Ruim: velocidades de carregamento acima de 4 segundos

 

Você também pode descobrir como melhorar os Core Web Vitals, como o Largest Contentful Paint, em nosso artigo.

 

INP: a velocidade de resposta de um site

O Web Vital Interaction to Next Paint é uma medida da interatividade de um site. Todas as ações do usuário são registradas, ou seja, cliques, pressionamentos de teclas e toques em telas sensíveis ao toque. O tempo que leva para que a reação desejada se torne visível para o usuário é então medido.

 

Um INP baixo indica que o site responde de forma suave e rápida para mais de 75% de todos os usuários . Isso significa que as ações são executadas em menos de 200 milissegundos. Os valores atípicos não são levados em conta. Se o tempo de resposta for superior a 500 milissegundos, o INP é ruim; qualquer coisa entre 200 e 500 milissegundos precisa ser melhorada.

 

Por que a medição do INP substituiu o Core Web Vital FID?

Como já mencionado, o INP é um recurso vital da Web relativamente novo e substituiu a medição do FID (First Input Delay) em março de 2024. O INP foi disponibilizado pela primeira vez para testes pelo Google em 2022. Após sua introdução, rapidamente ficou claro que esse Web Vital leva em conta a experiência do usuário melhor do que o FID. Mas por que isso acontece?

 

O First Input Delay só conseguia visualizar a primeira impressão de um site porque apenas a primeira interação do usuário era medida. O INP agora fornece uma imagem muito mais abrangente da velocidade de reação, pois registra todas as interações do usuário em um site.

 

Além disso, o INP mede o tempo até que o consumidor receba uma representação visual ou uma reação reconhecível em sua tela. Isso também foi diferente com o Web Vital FID. Ele registrou apenas o tempo até que o navegador começasse a processar a interação. O FID não mostrava quando o usuário realmente recebia uma reação à sua ação.

 

CLS: A estabilidade visual de um site

O CLS (Cumulative Layout Shift) é o terceiro elemento vital da Web que o Google definiu para medir a experiência do usuário em um site. Isso envolve a estabilidade visual de blocos de texto, elementos de imagem e gráficos. Assim que o layout muda inesperadamente durante o carregamento, a rolagem ou outras interações do usuário, são feitas as duas medições a seguir:

 

1. Qual é a porcentagem da área de exibição que o elemento ocupa, incluindo o deslocamento? Com uma fração de impacto de 60%, o valor medido seria 0,6.
2. A que distância o elemento se deslocou em relação ao tamanho da área de exibição? Com uma fração de distância de 20%, o valor medido seria 0,2.

 

Se você multiplicar os valores, obterá a pontuação de deslocamento de layout. Se estiver abaixo de 0,1, esse é um bom valor de CLS. Qualquer valor acima desse precisa ser melhorado. Em nosso exemplo, o deslocamento de layout é 0,12 (0,6 * 0,2). Portanto, ele precisaria ser otimizado. Timo Specht explicará agora onde você pode encontrar as métricas do Core Web Vitals.

 

Como os Core Web Vitals podem ser medidos?

Os Core Web Vitals são medidos pelo Google tanto em termos de compatibilidade com dispositivos móveis quanto para as versões de desktop de uma página. Graças à sua orientação para o usuário, os valores também são fáceis de entender para quem não é especialista.

 

Se agora você deseja medir os Core Web Vitals de seus sites, talvez esteja se perguntando qual é a melhor e mais fácil maneira de fazer isso. Há duas maneiras de fazer isso: coletar dados de laboratório e medir as experiências reais dos usuários. É melhor combinar as duas opções.

 

Dados de laboratório (Lab Data)

Ao medir dados de laboratório, são usadas ferramentas que imitam o acesso do usuário ao seu site e, assim, medem os principais sinais vitais da Web. Isso é particularmente útil antes da publicação de uma ou mais páginas, a fim de evitar que surjam problemas com a experiência real da página.

 

As ferramentas a seguir são usadas com mais frequência na coleta de dados laboratoriais:

 

• Ferramentas de desenvolvedor do Chrome(Google Lighthouse)
• Google PageSpeed Insights

 

A desvantagem dos dados do farol e de outros dados de laboratório é que eles não são um fator de classificação e, portanto, são irrelevantes para o posicionamento nos resultados dos mecanismos de pesquisa. Tudo o que importa são os dados de campo. Além disso, o Web Vital INP não pode ser medido porque exige a entrada real do usuário. Em vez disso, um valor semelhante é coletado: TBT (Total Blocking Time, tempo total de bloqueio). Ele deve ser inferior a 300 milissegundos.

 

Experiências reais do usuário (dados de campo)

Os dados de laboratório não são apenas desinteressantes para a classificação de suas páginas nas SERPs, mas também costumam levar a resultados divergentes em comparação com as medições de campo. Isso ocorre porque os usuários usam dispositivos diferentese têm condições de rede diferentes.

 

A memória de trabalho e o desempenho da CPU, bem como as interações com o site , também diferem de usuário para usuário e, acima de tudo, de usuário para laboratório. Em contraste com as medições de laboratório, os dados de campo fornecem um quadro mais realista.

 

Várias ferramentas diferentes são adequadas para medir as experiências reais do usuário, como

 

• Relatório sobre a experiência do usuário no Chrome (Google PageSpeed Insights)
• Relatório do Google Core Web Vitals
• JavaScript (biblioteca do Web Vitals)
• Extensão Web Vitals para o Chrome
• Provedores externos de RUM (Real User Monitoring)

 

No entanto, os dados de campo também têm suas desvantagens. Por exemplo, novos problemas em sites só são visíveis nos relatórios após cerca de um mês. Os dados de laboratório podem ser muito úteis para visualizar os índices com mais regularidade. Especialmente após otimizações ou alterações no site , eles fornecem informações imediatas sobre os possíveis efeitos nos Core Web Vitals.

 

As dicas mais importantes para aprimorar o Core Web Vitals

Se quiser melhorar os Core Web Vitals individuais ou todos eles, primeiro você precisa encontrar a causa de um LCP, INP ou CLS ruim. A boa notícia é que, com o Google PageSpeed Insights, você pode não apenas visualizar as métricas de todos os Core Web Vitals do seu site, mas também encontrar um diagnóstico dos Web Vitals individuais e dicas sobre como melhorá-los.

Opções para otimizar o LCP

O Largest Contentful Paint, ou seja, o maior elemento relevante para o usuário na sua página, pode consistir em um texto ou em um elemento de imagem. Para melhorar o tempo de carregamento, você deve primeiro descobrir qual elemento o Google define como o elemento principal. Isso pode parecer diferente dependendo do dispositivo do usuário. Com o PageSpeed Insights, você deve, portanto, analisar sua página tanto na visualização para celular quanto para desktop.

 

Na seção Diagnóstico, você encontrará o elemento Largest Contentful Paint, bem como outras dicas úteis para melhorar seus Web Vitals. Para melhorar seu tempo de LCP, esse elemento de conteúdo deve ser carregado o mais rápido possível. Para fazer isso, você pode fazer as seguintes configurações em sistemas de gerenciamento de conteúdo, como o WordPress:

 

• Configure o desconto do navegador para obter uma resposta mais rápida do servidor
• Otimize a hospedagem de seu site para obter um TTFB (Time to First Bite) mais curto
• Use a Content Delivery Network para fornecer conteúdo mais rapidamente
• Remover/mover JavaScript e CSS desnecessários para uma renderização mais rápida dos elementos LCP
• Se o seu elemento LCP for uma imagem, você deverá compactá-la.

 

Embora o aprimoramento do LCP possa exigir muito conhecimento técnico, você deve se concentrar em duas coisas primeiro: Garantir que o tempo de resposta do servidor seja mais rápido e disponibilizar o elemento LCP para o usuário o mais rápido possível.

 

Como você pode obter um INP melhor

O Web Vital INP só pode ser medido com dados de campo. Como regra geral, os dados CrUX fornecidos pelo Google, que podem ser encontrados no relatório de experiência do usuário do Chrome, são suficientes para isso. O tempo de resposta à interação de um usuário pode ser afetado nos três locais a seguir:

 

1. Durante a entrada (atraso de entrada)
2. Durante o processamento (longo tempo de processamento)
3. Durante a apresentação (atraso na apresentação)

 

Para acelerar a interação com o usuário, você deve otimizar o código Java Script. Garanta menos trabalho no thread principal e exclua o código JavaScript desnecessário de provedores de terceiros. As tarefas JavaScript longas também devem ser divididas em várias partes. Isso permite que as ações do usuário ocorram entre elas sem que o JavaScript tenha que terminar o trabalho completamente primeiro.

 

Para acelerar o processamento e a apresentação do conteúdo, você deve descartar problemas de layout fornecendo conteúdo de forma assíncrona. Um tamanho menor do DOM também contribui para uma renderização mais rápida do conteúdo da página.

 

Como você pode melhorar o CLS

A causa mais comum de uma leitura de CLS alta é a falta de atribuição de tamanhos de imagem. Para minimizar as mudanças no layout, você deve especificar a largura e a altura dos elementos no código HTML usando "width" e "height". Isso reservará espaço no layout da página para suas imagens e vídeos, mesmo que outros elementos já tenham sido carregados.

 

Você deve reservar com antecedência um espaço suficientemente grande no layout da página para anúncios e banners cujo tamanho você não tem influência. Se isso também não for possível, o conteúdo dinâmico, em particular, deve ser colocado mais abaixo na área de exibição.

 

Ao usar fontes da Web, podem ocorrer mudanças de layout após o carregamento dessas fontes. Para evitar que isso aconteça, o operador do site pode fazer as seguintes otimizações:

 

• Sorg dafür, dass die Webschriftart so früh wie möglich lädt (<link rel=preload>).
• Use uma fonte alternativa que seja semelhante em tamanho e estilo à fonte da Web.
• Adapte o fallback e a fonte da Web entre si usando APIs.
• Diminua o tempo de carregamento da fonte da Web usando a API de carregamento de fontes.

 

Você pode descobrir se as otimizações deram resultado no relatório de experiência do usuário do Chrome após 28 dias.

 

Bons Core Web Vitals e classificações SERP ruins? Esse pode ser o motivo!

Os Core Web Vitals são uma das poucas maneiras de tornar a facilidade de uso de um site mensurável e comparável em números . No entanto, seu site pode não ser classificado nos principais resultados dos mecanismos de pesquisa, apesar dos Web Vitals otimizados. Observe que outros fatores de classificação também contribuem para a experiência do usuário e, portanto, para melhores classificações no Google.

 

Um bom SEO também inclui a otimização na página, que é obtida, por exemplo, por meio de medidas de link building, um design atraente, otimização de palavras-chave e conteúdo relevante com valor agregado. Se você levar esses pontos em consideração, os Core Web Vitals representam uma oportunidade de subir algumas posições nas SERPs. Na Timo Specht, nós o ajudamos a aprimorar suas medidas de SEO e SEA de forma holística e a fazer com que seus sites fiquem em primeiro lugar no Google.