loader image
Imagem de um buscador. Na barra de pesquisa aparece "WTF is Core Web Vitals?". Abaixo, a ilustração de um usuário usando um computador.

Core Web Vitals: o que são e como otimizá-los para melhorar o SEO

Share on linkedin
Share on email

No final de 2020, o mundo do marketing digital recebeu a notícia de que uma grande mudança seria implementada pelo Google para definir o ranqueamento das páginas. A partir de um conjunto de métricas que pretende medir a experiência dos usuários na web — os chamados Core Web Vitals (ou, em tradução literal, os sinais vitais da web) —, a companhia do Vale do Silício pretende dar mais peso a certos indicadores e, assim, priorizar páginas que garantam uma boa experiência aos usuários nos sites. 

Essa novidade pegou muitos profissionais e marcas de surpresa. Por isso, resolvi preparar esse conteúdo para compartilhar alguns pontos que aprendi e que considero importantes na hora de traçar um plano de ação para otimizar seu site. 

Neste conteúdo, vou explicar o que são os três indicadores criados pela equipe do principal buscador do mundo para avaliar a experiência em uma web. A ideia é passar por cada conceito e te ajudar a entender o que está em jogo nessa atualização que promete agitar a rotina de qualquer profissional de SEO.

______________________________________________________________________

Índice

______________________________________________________________________

Largest Contentful Paint (LCP) 

A primeira métrica que faz parte desse conjunto de indicadores criados pelo Google é o LCP. O Largest Contentful Paint se refere ao tempo de carregamento do maior elemento de conteúdo de uma página.

Em outras palavras, o que o Google está nos dizendo é: veja quanto tempo o conteúdo mais pesado de uma página está demorando para ser exibido ao usuário e tente tornar esse processo o mais rápido possível.

O maior buscador do mundo considera que um site que leva até 2,5 segundos para carregar seu maior conteúdo apresenta bons resultados. As páginas que demoram entre 2,5 e 4 segundos precisam promover melhoras. E os que demoram mais de 4 segundos proporcionam uma experiência pobre aos seus usuários.

Você deve estar se perguntando? “Ok. Já entendi qual caminho devo seguir, mas como avanço nesse sentido?”. 

Como otimizar o LCP do meu site?

Vamos lá.  É aí que entra um “tequiniquês” um pouco mais complicado. 

De maneira resumida, existem quatro linhas de trabalho bem comuns dentro do guarda-chuva do LCP:

  1. Melhorar o tempo de resposta do servidor do seu site
  2. Reduzir ou eliminar elementos JavaScript ou CSS que “bloqueiam” a renderização do conteúdo
  3. Otimize ou comprima elementos que possam atrapalhar o carregamento de conteúdo, como imagens ou vídeos.

Talvez essa discussão fique bastante técnica para quem minimamente não conhece a linguagem dos desenvolvedores. Por isso, vou deixar um link de um guia do Google (em inglês) para implementar essas melhorias e garantir que o LCP esteja otimizado, caso você queira delegar esse projeto para um profissional mais especializado.

First Input Delay (FID)

O segundo indicador que faz parte das principais métricas da web do Google é o First Input Delay (FID). 

Ele mede, basicamente, a interatividade do usuário com seu site. 

Com essa métrica, o que o Google pretende é mensurar o tempo de resposta entre a primeira interação do usuário e o tempo em que o navegador começa a processar aquele comando

Vou te colocar um exemplo para você entender melhor. 

Se você é um daqueles que gostar de jogar Fifa no videogame, essa explicação, sem dúvida, vai ter fazer compreender melhor a ideia desse indicador criado pelo Google.

Imagina que você vá jogar uma partida com seu amigo, vai ser dada a saída da bola no meio campo. O FID seria justamente o tempo de “atraso” que a máquina leva para processar o momento em que você apertou “X” no seu controle e o instante em que ela recebeu o “sinal” para fazer o jogador tocar bola. 

Ok. Você deve estar se perguntando: “mas por qual motivo o Google só mede a primeira interação?”. A resposta é simples e faz sentido. O maior buscador do mundo entende que a primeira impressão do usuário sobre um site é a mais relevante.  O famoso ditado do “a primeira impressão é a que fica”.

E não é só isso. A companhia acredita também que assegurar que as melhorias na primeira impressão sejam implementadas nos sites vão gerar maior impacto sobre as experiências para os usuários.

Como otimizar o FID do meu site?

A imagem mostra a escala de pontuação recomendada pelo Google para FID.

O Google indica aos proprietários de sites que uma boa pontuação de First Input Delay é de até 100 milissegundos. As páginas que têm entre 100 a 300 milissegundos são sites que podem promover melhorias ainda. E os que tem menos de 100 milisegundos são URLs pobres.

Se você mensurou sua pontuação, essas são as indicações mais comuns dadas pelo Google para otimizar seu site para este indicador: 

  • Reduzir o impacto de códigos de terceiros
  • Diminuir tempo de execução de JavaScript
  • Minimizar o processo de renderização de uma página

Outro ponto importante a ser considerado na hora de traçar o plano de ação para melhorar esse indicador é ter em mente também a métrica de Total Block Time (TBT), acrônimo para tempo total de bloqueio. 

Isso porque, na prática, tudo o que é feito para melhorar esse indicador também afeta positivamente o indicador FID. Ou seja, há uma correlação direta entre essas duas métricas. 

Quer saber mais detalhes? Confira aqui sobre como otimizar o First Input Delay (em inglês).

Cumulative Layout Shift (CLS)

O terceiro indicador de Core Web Vitals é o Cumulative Layout Shift, conhecido também pelo acrônimo de CLS.

Em tradução literal, esse indicador significa “mudança de layout acumulada” e, na prática, ele quer medir a experiência do usuário na hora de interagir com algum componente de uma página.

Ainda não está claro? Vou te colocar um exemplo para você não ficar com nenhuma dúvida.

Sabe quando você tenta clicar em algum elemento de um site, mas, no exato momento em que você clica, a página termina de carregar algo e te faz interagir com outro elemento que não tinha nada a ver com a história? Pois é. É justamente esse tipo de experiência negativa que o Google está tentando evitar.

Ao estabelecer o CLS como um parâmetro de peso considerável na hora de ranquear os sites nos seus mecanismos de buscas, o que a empresa do Vale do Silício quer é assegurar que os sites cumpram uma qualidade mínima de estabilidade visual de uma página, evitando assim que muitos usuários “passem raiva” com um clique indevido.

Exemplo de conteúdo que é penalizado pelo Google.

Como otimizar o CLS do meu site?

Para proporcionar uma boa experiência aos usuários, o Google considera que os sites devem ter 0,1 ou menos na pontuação desse indicador. Uma página é considerada como “melhorável” entre 0,1 e 0,25 e, como pobre, com um CLS acima de 0,25.



Para isso, existem três importantes linhas de trabalho para otimizar o CLS das páginas do seu site. 

  • Incluir atributos de width e height para imagens e vídeos.
  • Reservar espaços fixados para conteúdos dinâmicos (como propagandas)em seu site.
  • Priorizar uso de conteúdos embedados com iframes que tenham dimensões estabelecidas 

Ferramentas úteis

Depois dessa surra de conceitos complicados acompanhada dessa sopa de letrinhas, imagino que você deva estar se perguntando: quais ferramentas eu posso usar para medir essa grande quantidade de métricas?

Eu te respondo: existem algumas opções.

Eu vou te falar as que eu considero mais práticas e mais simples de usar no dia a dia.

Search Console (Core Web Vitals report)

O Google Search Console é a ferramenta do Google voltada para que proprietários de sites possam entender como suas páginas são indexadas pelos mecanismos de buscas

O mais interessante é que recentemente foi lançada uma aba exclusiva para detalhar os indicadores de Core Web Vitals. A partir dela, é possível avaliar a performance das páginas de um site em cada um dos indicadores mencionados aqui. 


PageSpeed Insights

Outra ferramenta oferecida pelo Google. Nesse caso, o acesso é um pouco mais simples que a opção anterior, que demanda que o proprietário configure o site na ferramenta. O PageSpeed Insights permite extrair dados da performance de qualquer URL disponível na web. 

Ou seja, para avaliar quão otimizada estão as páginas do site da sua concorrência, essa ferramenta é mão na roda.

Lighthouse

Outra poderosa ferramenta para saber a pontuação dos Core Web Vitals de um site é instalando a extensão do Lighthouse.

Um bom atalho para você fazer um diagnóstico detalhado de qualquer site com poucos sites.

WebPageTest

Não posso deixar de incluir nessa seleta lista também a ferramenta da Catchpoint, uma plataforma de monitoramento de experiência digital.

O grande ponto positivo dessa ferramenta é a possibilidade de incluir algumas condições na hora realizar diversos testes de performance da otimização do seu site. É possível, por exemplo, simular a otimização em dispositivos específicos e variar o navegador usado.

VAMOS CONVERSAR?

contato@guibarbosa.com.br

Copyright GUILHERME BARBOSA 2024 © Todos os direitos reservados.