Core Web Vitals e SEO: como a atualização do algoritmo do Google afeta seu site e o que fazer para se adaptar

O comportamento do usuário mudou significativamente e os conteúdos precisam se adaptar a esse novo modelo de acesso, pensando em carregamentos rápidos que gerem boa experiência para que o usuário encontre a resposta que precisa.

Justamente por isso o Google trouxe à tona os Core Web Vitals, que servem para medir de forma mais eficaz a experiência das páginas de um site, em resultados da Pesquisa Google.

Se a experiência do usuário já era um tema bem importante e muito discutido quando falávamos em técnicas de melhorias para performance de sites, hoje com essas métricas sendo utilizadas como um fator de ranqueamento ainda mais importante, é imprescindível pensar e adaptar a entrega de páginas com qualidade para que o usuário esteja o mais satisfeito possível.

Como define a própria equipe do Google: “As pessoas têm a expectativa de experiências digitais cada vez mais rápidas e melhores”. Por isso, neste artigo vamos explicar em detalhes tudo que você precisa saber sobre o assunto. Continua comigo!

O que é o Core Web Vitals?

O Core Web Vitals (CWV) é uma atualização das métricas e regras de ranqueamento usadas pelo Google para classificar os melhores conteúdos aos seus usuários nas primeiras posições de forma orgânica.

Essas novas regras foram somadas às regras de performance de sites que já existiam, e entrou em vigor em Maio de 2021, fazendo com que muitos produtores de conteúdo e profissionais de marketing ficassem de cabelo em pé.

Mas afinal, o que essa nova métrica leva em consideração?

Em primeiro lugar, a experiência do usuário.

Isso não quer dizer que a preocupação com ranqueamento e otimização de keywords, backlinks e outras estratégias de SEO voltadas para o conteúdo tenham deixado de ter importância.

Essa atualização significa que o Google está trazendo para as suas soluções formas cada vez mais objetivas de entender e entregar o seu melhor para os usuários, pensando no comportamento não-linear que utilizamos ao consumir conteúdo na internet.

Por exemplo: a plataforma já entendeu que um site de carregamento lento ou com uma interface ruim, com várias falhas técnicas, ou sites que não são pensados para mobile, são fatores que nos levam a desistir da página, não importa quão bom seja o conteúdo.

Nesta nova atualização, o CWV leva em consideração três parâmetros para metrificar o seu site dentro de uma escala, sendo eles: LCP (Large Contentful Paint), FID (First Input Delay) e CLS (Cumulative Layout Shift). 

Em resumo, são medidos a velocidade de carregamento da página de um site, a capacidade de resposta e a estabilidade visual.

LCP (Large Contentful Paint)

O Largest Contentful Paint (LCP) é uma métrica importante, que leva em consideração a velocidade de carregamento dos elementos das páginas de um site. 

O LCP é diferente da primeira métrica do Google, que também levava essa questão em consideração. O FCP (First Contentful Paint) fazia uma mensuração do carregamento das páginas do site como um todo.

A nova métrica (LCP) leva em consideração quando o conteúdo principal da página foi carregado, ou seja, o carregamento do maior conteúdo visível para o usuário, podendo ser um bloco de texto, imagem, vídeo ou qualquer outro elemento de destaque. 

Usando como exemplo o site da Conexorama, é possível ver que o LCP (linha tracejada roxa) considerou a primeira dobra do site, onde existe o carregamento de um vídeo institucional.

Esse elemento principal tem que carregar em no máximo 2,5 segundos depois do carregamento principal da página, para ter uma pontuação considerada “boa”.

O Google entendeu que, mesmo que toda a extensão da sua página inicial tenha sido exibida, isso não significa que os elementos mais relevantes para o usuário tenham carregado. Podem haver elementos que ficaram quebrados, ou que demoraram tempo demais para carregar, fazendo com que o usuário encontre uma informação desconexa, ou até mesmo desista e vá para outro site buscar o que procura.

Imagine por exemplo, que você entrou no site da Conexorama, e o vídeo que mostrei no print anterior demorou mais de 6 segundos para carregar. 

O vídeo ocupa um espaço de destaque na primeira dobra do site, e funciona como uma peça importante para contextualizar o resto da página. Porém, se ele demora para carregar, deixa um grande espaço em branco na parte superior da tela, o que causaria uma má experiência para o usuário.

Por isso, além de ser um fator de ranqueamento nos motores de busca, um bom LCP tende a melhorar a duração média das sessões.

FID (First Input Delay)

O First Input Delay (FID) mede a capacidade de resposta das páginas de um site, ou seja, ao interagir com algum elemento da página, quanto tempo demora para que o navegador responda à ação feita pelo usuário. 

O FID mede apenas o “atraso” no processamento do evento, e não o tempo de carregamento da nova página em si. Ou seja, o atraso entre o clique ser realizado, até o navegador ser capaz de responder.

Você já deve ter passado por situações em sites em que você clicou diversas vezes em algum elemento do site, e o carregamento demorou bastante e você acabou desistindo daquele site, não é mesmo?

Dependendo da necessidade, e até mesmo ansiedade do usuário em acessar determinada informação por um link, clicando em um botão ou outro elemento que precise de um novo carregamento, uma experiência negativa pode fazer com que um usuário saia da sua página e nunca mais volte. 

Para a métrica de FID, uma boa experiência é considerada quando ocorre o chamado “atraso de primeira entrada” acontece em até 100 milissegundos. 

Para deixar mais visual o entendimento usamos como exemplo o site da Conexorama. Aqui podemos notar um Call to action (CTA) que leva para a nossa página de cases de sucesso.

O tempo de resposta da página, a partir do clique do usuário até o momento que o navegador entende que uma nova página precisa ser carregada, representa o FID. 

Neste caso que usamos como exemplo, o tempo de carregamento foi de 61,500ms, portanto o “input” aconteceu rapidamente e o site conseguiu gerar uma boa experiência para o usuário, sem que fosse preciso esperar vários segundos para acessar a página. 

O que pode causar esse atraso?

Sites muito robustos, com um html “sujo”, imagens de alta resolução, muitos arquivos CSS e principalmente Javascripts grandes que não são utilizados ou não foram compactados fazem com o que o servidor de resposta do seu navegador esteja ocupado fazendo uma leitura nesses dados irrelevantes.

Neste caso, o navegador está em processo de carregamento de outros dados, executando uma outra tarefa, o que causa uma espera e, até que esteja concluída a primeira ação, haverá um tempo de espera do usuário (FID) na página.

Esse atraso logo na primeira interação pode causar uma má impressão do usuário sobre o site como um todo, e aqui vale lembrar que a primeira impressão é a que fica, não é mesmo?

CLS (Cumulative Layout Shift)

O CLS é uma das principais métricas que leva em consideração a experiência do usuário com o seu site, mapeando erros ou falhas inesperadas que um site possa apresentar, ou seja, neste critério é levado em consideração a estabilidade visual do site.

Para ficar mais claro, imagine que você está preenchendo um formulário em uma página qualquer e, inesperadamente, o CTA (botão clicável) se movimenta, fazendo com que você clique numa opção que não desejava.  

Essa má experiência pode ser frustrante para o usuário e  aumenta consideravelmente a chance de abandono das páginas. 

Entendendo que isso causa um impacto negativo em seus usuários, o Google passou a metrificar através do Cumulative Layout Shift os momentos em que ocorrem mudanças inesperadas de layout, considerando o tempo de acesso do usuário como um todo.

Imagem: web.dev

Você pode estar se perguntando como esta métrica afeta o seu site, visto que os elementos dos sites responsivos mudam o layout frequentemente para levar melhor experiência para o usuário, porém nem todas as mudanças são ruins, aplicativos dinâmicos que se adaptam facilmente para mobile não serão impactados negativamente pelo CLS.

Como posso ajustar meu site para boas métricas do CWV?

Use as ferramentas do próprio servidor a seu favor, no Google Search Console por exemplo, você pode comparar páginas que tiveram picos de quedas após a atualização do algoritmo. 

Análise essas páginas e procure por erros técnicos, como o tamanho dos arquivos inseridos nessas páginas, velocidade de carregamento, problemas de redirecionamento, links quebrados, etc.

Existem ferramentas gratuitas que podem facilitar esse processo, como o PageSpeed Insights ou o WebPageTest.

Para entender de forma rápida como estão as notas de LCP, FID e CLS do seu site, existem extensões que podem ser instaladas rapidamente no Google Chrome, como o Core Web Vitals Annotations.

Outro passo importante é avaliar a estrutura do site como um todo, avaliando se existe uma arquitetura de informações, afinal os dados precisam estar distribuídos de forma lógica, hierárquica e conectados para facilitar a experiência do usuário. 

Priorize as informações indispensáveis, seja claro e não utilize muitos elementos que irão apenas causar um maior tempo de carregamento, como elementos do seu CSS e Javascript.

Além das ferramentas que mencionamos, o Google também disponibiliza outras que podem ajudar neste processo, como o Web-vitals JS e o Relatório de experiência do usuário do Chrome. 

A seguir, vamos listar quais são os principais erros e impactos de elementos que podem ser corrigidos dentro dos critérios de LCP, FID e CLS. 

É importante ressaltar que cada site precisa ser analisado de forma única, vamos te mostrar aqui os principais erros e como corrigir, mas isso não significa que são apenas esses. Ok?

Como diagnosticar e otimizar o LCP?

Para o LCP, existem inúmeras ferramentas que podem ajudar neste diagnóstico. Todas que indicamos anteriormente podem ser utilizadas, como o Pagespeed Insights ou o WebPageTest, por exemplo.

Abaixo, deixamos algumas dicas para solucionar os principais problemas que você pode estar enfrentando:

Avalie a velocidade do servidor

O tempo de resposta do servidor afeta o carregamento das páginas e pode ser um dos principais problemas para um LCP ruim. Para resolver o problema, é preciso fazer uma varredura para entender as possíveis causas. 

Usar uma hospedagem compartilhada também pode ser um problema, uma vez que muitos sites utilizam um único servidor, gerando um carregamento mais lento do que no caso de um servidor dedicado.

Analisar e melhorar a eficiência do servidor irá melhorar diretamente o tempo que leva para o navegador receber os dados.

Ativar o cache do servidor

Ativar o cache do navegador pode ajudar a armazenar arquivos localmente no navegador do usuário, evitando que os dados sejam recarregados desnecessariamente para usuários recorrentes e melhorando assim o tempo de carregamento da página nos próximos acessos.

Compactar JavaScript, CSS e HTML

Remover arquivos de CSS, JavaScript e HTML não utilizados e reduzir ao máximo o tamanho dos ficheiros também pode otimizar o carregamento das páginas. 

Adiar o carregamento de JavaScripts e CSSs não críticos para acelerar o carregamento do conteúdo principal de sua página da web também é uma boa estratégia. 

Otimize suas imagens

As imagens são em geral os maiores elementos das páginas de um site, por isso é necessário otimizar e comprimir imagens, sendo indicado que as imagens tenham 100KB ou menos para obter um bom desempenho.

Converta imagens em formatos mais recentes (JPEG 2000, JPEG XR ou WebP) e utilize imagens responsivas.

Utilize o recurso de estilo do CSS background-size para ajustar as imagens do background deixando de forma responsiva, ao invés de mostrar a imagem apenas no seu tamanho real.

Como diagnosticar e otimizar o FID

Um diagnóstico do FID pode ser feito diretamente no PageSpeed ​​Insights. Com essa ferramenta uma auditoria será feita no seu site, e um relatório geral do carregamento das páginas será metrificado, junto com tarefas que você pode realizar para otimizar o seu site, e consequentemente gerar uma boa métrica de FID.

Confira as principais dicas:

Reduza o impacto do código de terceiros

Muitos sites incluem tags e análises de terceiros como Google Tag Manager, Google Analytics, Google Maps, pixels de redes sociais, Hotjar, plugins ou outros códigos de terceiros, que podem manter a rede ocupada e causar um atraso no carregamento. 

Reduza o tempo de execução do JavaScript

Um tempo de atraso também pode ser causado por JavaScript e CSS não otimizados, bem como fontes, animações e imagens. Revise os elementos internos e remova o que não for utilizado.

Minimize o trabalho da thread principal

O Google utiliza essa métrica como um dos maiores fatores do atraso no tempo total de bloqueio, causado por tarefas longas (mais de 50 milissegundos) que bloqueiam o carregamento principal do site. 

Esse tópico também está relacionado com CSS e JavaScript pesados. Através do relatório gerado no PageSpeed Insights é possível ver quanto tempo o navegador gastou fazendo download de JavaScript e CSS, análise, renderização e coleta de lixo.

Mantenha a contagem de solicitações baixa e os tamanhos de transferência pequenos

Enquanto uma página da tarefa no seu HTTP está sendo carregada, uma nova tarefa solicitada pelo usuário não será carregada e a página não conseguirá responder de forma rápida à entrada do usuário. 

Para otimizar essas solicitações, remova plugins desnecessários ou substitua por outros mais leves, compacte arquivos CSS e JavaScript. Ah! E fontes personalizadas também acionam outro pedido no HTTP. 

Como diagnosticar e otimizar o CLS 

Para o CLS, você também pode diagnosticar seu site através do Pagespeed Insights. Com esta ferramenta, é possível entender os principais pontos de melhoria que precisam ser feitos no seu site para melhorias desta métrica.

Os principais pontos de atenção, neste caso, são os seguintes:

Multimídia sem dimensões

Imagens e elementos de vídeo precisam de atribuições para as suas dimensões de tamanho de largura e altura. Caso isso não seja possível, deixe reservado espaços com caixas de proporções adequadas para os elementos visuais dentro do seu CSS.  

Os navegadores definem a proporção padrão das imagens com base nos atributos de largura e altura de uma imagem, portanto, é importante defini-los para evitar mudanças de layout.

Cuidado com os anúncios

Os anúncios são um dos maiores fatores para as mudanças do layout das páginas, por isso é ideal dedicar um espaço estático para banners e iframes no seu site. Reserve o maior tamanho possível para o local dos anúncios, e evite colocá-los no topo das páginas. 

Uma outra dica, é analisar o histórico e ver quais tamanhos são exibidos com maior frequência no seu site. Assim será possível reservar um espaço mais adequado para receber estes anúncios.

Atenção aos Pop-ups 

Os pop-ups também precisam ser usados com cautela, sem sobrecarregar as páginas e incomodar o usuário.

Opte por tamanhos menores, e tome cuidado para exibir apenas um pop-up na página, para que não se sobreponham e gerem uma mudança brusca no conteúdo.

Uma outra solução, é destinar um espaço suficiente na janela de visualização usando um marcador de posição para que o navegador entenda com antecedência o carregamento. 

Com essa atualização o SEO do conteúdo deixa de ter importância?

O Core Web Vitals é uma métrica importante para medir a experiência do usuário que deve andar de mãos dadas, e de forma inseparável das estratégias de SEO. 

Afinal, do que adianta você ter um excelente conteúdo no seu site, e ter uma alta taxa de rejeição nas suas páginas, pois a experiência foi ruim?

O mesmo vale para o oposto: não basta ter um site otimizado para o CWV, se seus conteúdos são ruins e superficiais. A experiência do usuário também será prejudicada e ele provavelmente não voltará ao seu site.

Desenvolver um SEO de qualidade continua sendo muito importante para as estratégias do seu negócio, principalmente quando você atua com Inbound Marketing, e precisa atrair e se mostrar referência no seu nicho de mercado com seus conteúdos, fazendo com que a conversão ocorra naturalmente.

Otimizar seu site para boas métricas de CWV trará um ganho de oportunidades nos motores de busca, tendo um bom conteúdo uma ótima primeira impressão vai ser gerada, e isso pode aumentar as conversões dos visitantes. 

O que mudou é que agora existem novos fatores que também são importantes para que você ofereça um conteúdo de qualidade para os usuários. 

Não é de hoje que falamos que o comportamento do consumidor mudou na internet, e se antes da pandemia pensar nesse novo perfil já era necessário, agora se tornou vital.

E você, já começou a trabalhar em otimizações das páginas do seu site, focando no Core Web Vitals? Quais ferramentas você usou e mais gostou para metrificar seu site?

E não se esqueça que aqui na Conexorama temos um time altamente qualificado e especializado em técnicas de SEO que podem ajudar a sua empresa a priorizar e entender o que precisa ser otimizado!