Web Vitals, como a experiência do usuário vai afetar o SEO do seu site?

Web Vitals, como a experiência do usuário vai afetar o SEO do seu site?

Thiago Nunes Batista

Escrito por: Thiago Nunes Batista

Antes de falarmos sobre o que é Web Vitals, primeiro precisamos entender o que é SEO?

SEO, sigla para Search Engine Optimization, ou em Português, Otimização para Motores de Busca, são um conjunto de técnicas que buscam otimizar um site de forma que os Search Crawlers ou robôs de busca dos motores de busca como Google, Bing e DuckDuckGo possam conhecer e indexar as páginas do seu site.

Quanto mais otimizado o seu site estiver, maior será a change de ele aparecer nas primeiras posições dos SERPs (Search Engine Result Pages) ou Resultados de Busca, o que aumentará a chance de acessos ao seu site.

Podemos categorizar o SEO da seguinte forma:

  • On-Page: otimização de conteúdo, palavras-chave, meta tags, e estrutura do site.
  • Off-Page: estratégias externas, como backlinks de outros sites.
  • Técnico: melhorias na performance do site, como tempo de carregamento, segurança (HTTPS), e estrutura de dados.

E os Web Vitals?

Criados pelo Google em 2020, os Web Vitals são um conjunto de métricas que buscam medir de forma quantitativa a qualidade da experiência do usuário ao utilizar um site.

Os Web Vitals entram em cena justamente no SEO técnico, onde ao fazer otimizações, você irá garantir que o site carregue mais rápido, seja mais responsivo, entre outras melhorias e dessa forma, oferecendo uma melhor experiência para o usuário.

Em resumo, o SEO foca em aprimorar a visibilidade de um site nos mecanismos de busca, enquanto os Core Web Vitals asseguram uma experiência do usuário rápida e eficiente. Ao integrar essas duas áreas, você maximiza as chances de alcançar um posicionamento destacado nos resultados de pesquisa, aumentando tanto o tráfego quanto o engajamento dos visitantes.

Core Web Vitals

Os Core Web Vitals são um subconjunto das métricas do Web Vitals, que atualmente são compostos pelas métricas:

  • CLS, Cumulative Layout Shift
  • LCP, Largest Contentful Paint
  • INP, Interaction to Next Point

Essa separação entre Web Vitals e Core Web Vitals existe principalmente por conta dos seguintes motivos:

  • Priorização: Definindo as métricas principais, facilita a priorização de onde os desenvolvedores devem focar em realizar as otimizações.
  • Simplificação: Se concentrando em algumas métricas, facilita o entendimento de quais otimizações devem ser realizadas.
  • Alinhamento com os objetivos do Google: O Google é o motor de busca mais utilizado no mundo, ele busca entregar a melhor qualidade de busca pros seus usuários, onde um dos aspectos para isso são os Core Web Vitals, estando alinhado com isso, a sua página estará entregando o tipo de experiência que o Google busca entregar para seus usuários.

Cumulative Layout Shift (CLS)

CLS, a métrica do Web Vitals que mede a estabilidade visual de um website

"Métrica de CLS do Web Vitals" por web.dev , licenciado sob CC BY 4.0

O CLS é uma métrica que mede a estabilidade visual de uma página. Ele avalia o quanto os elementos na tela se movem inesperadamente durante o carregamento. Um valor alto de CLS indica que a página sobre mudanças bruscas no seu layout.

Exemplos de erros de CLS

O primeiro de exemplo de problema de CLS que é bastante comum é quando uma imagem é carregada depois dos outros conteúdos na página, fazendo com que o conteúdo na página seja "empurrada" para liberar espaço para renderizar a imagem em tela. A solução simples para esse desafio é definir uma altura e largura para a imagem, de forma que esse espaço da imagem será reservado pelo navegador de internet, evitando que o conteúdo da tela que carrega primeiro seja "empurrado" para baixo na página.

<img src="/codigo-ao-ponto.jpg" width="600" height="400" />

O segundo exemplo é o de carregamento lento de fontes de texto personalizadas, o navegador de internet precisa baixá-las antes de renderizar o texto corretamente.

Para resolver esse desafio, você pode fazer o pré-carregamento de fontes através das meta tags

Largest Contentful Paint (LCP)

CLS, a métrica do Web Vitals que mede a estabilidade visual de um website

"Métrica de CLS do Web Vitals" por web.dev , licenciado sob CC BY 4.0

Interaction to Next Point (INP)

CLS, a métrica do Web Vitals que mede a estabilidade visual de um website

"Métrica de CLS do Web Vitals" por web.dev , licenciado sob CC BY 4.0

TBT

O Ciclo de Vida das métricas do Web Vitals

o ciclo de vida das métricas dos Web Vitals que é composto pelas fase de Experimental, Pending e Stable

"The stages of the Core Web Vitals lifecycle" por web.dev , licenciado sob CC BY 4.0

Conclusão

Respondendo o título do artigo: "a experiência do usuário vai afetar o SEO do seu site?"