A tão falada atualização do Core Web Vitals está chegando e, com ela, algumas mudanças importantes devem ocorrer. O grande ponto é que as novas métricas do Google chegam para colocar, de uma vez por todas, a (boa) experiência do usuário como prioridade.
Para que você fique por dentro dos principais impactos dessas alterações, preparamos esse texto que explica cada uma das novas métricas e como otimizar o seu site. É importante destacar que trazemos algumas recomendações básicas, mas que é essencial fazer uma análise mais aprofundada e pontual para cada caso.
Outro ponto bem importante é que Core Web Vitals, apenas, não é o suficiente para conseguir melhoria nos rankings. Além de CWV, você também precisa ter uma página segura, com HTTPS, mobile friendly e uma boa experiência com ADS.
O que é Core Web Vitals?
Basicamente, Core Web Vitals são métricas que analisam diferentes aspectos de uma página ou um site em relação à experiência do usuário, como a capacidade de resposta a interações, a velocidade de carregamento e como os elementos de uma página se comportam durante a renderização, por exemplo. Elas são importantes pois se tornam um fator de posicionamento, impactando diretamente na pontuação e no ranqueamento do site.
O Google anunciou essas mudanças em 2020 e, inicialmente, elas entrariam em vigor em maio deste ano, porém esse prazo foi adiado para junho. Ou seja, os sites que ainda não se adaptaram precisam fazer isso o quanto antes se quiserem garantir um bom posicionamento nos resultados do Google.
Não é novidade que a experiência do usuário deva ser priorizada, mas também sabemos que alguns sites não se preocupam muito com isso. Por isso, a estratégia do Google em trazer à público essas alterações nas métricas é uma maneira de estimular melhores resultados.
Quais são as métricas do Core Web Vitals?
Para medir tudo isso, três novas métricas começam a valer e se tornam os principais: LCP, FID, CLS (abaixo, vamos explicar cada uma deles).
As novas métricas chegam para somar às outras quatro que já existiam. Elas observam toda a jornada do usuário dentro de um site, desde o momento em que ele clica no primeiro link até a página estar completamente carregada. Embora Core Web Vitals não esteja diretamente ligado ao conteúdo e sim à performance, continua sendo essencial produzir conteúdos relevantes e de qualidade, que carreguem rápido e que tragam uma boa experiência de navegação ao usuário.
Essas métricas utilizam dados reais gerados pelos usuários que acessam um site pelo Chrome (ou qualquer navegador baseado nele). Caso 75% do total de usuários do site tenham uma boa experiência, significa que a página passou no teste e está otimizada para os mecanismos de busca.
Novas métricas Core Web Vitals
LCP (Largest Contentful Paint)
Essa métrica considera o tempo que o site leva para carregar o maior bloco de conteúdo da área crítica, seja ele um bloco de texto ou uma imagem. A área crítica é como chamamos aquela primeira tela que o usuário visualiza assim que acessa um site.
Aqui, a principal diferença é que antes o Google dizia que o site ou página devia ser carregado em três segundos. Agora, com essa métrica, o maior elemento da área crítica precisa ser carregado em até dois segundos e meio.
O reflexo disso é que se perde um pouco do tempo, entretanto fica mais fácil conseguir atingir esse objetivo já que, inicialmente, não é necessário se preocupar com o carregamento de todo o conteúdo neste tempo e sim com a primeira parte visível do site.
Dicas para reduzir o LCP
De imediato, existem algumas recomendações que podem auxiliar para que o seu site esteja de acordo com essa nova métrica. Porém, é claro, pode não ser suficiente. Por isso, é muito importante analisar caso a caso.
- Ao utilizar imagens no cabeçalho (seja um slider ou imagem estática) elas devem estar otimizadas. Ou seja, esse arquivo precisa ser comprimido e ocupar pouco espaço. Além disso, o servidor onde esse arquivo está armazenado deve ter capacidade de processamento suficiente para responder a requisição em pouco tempo.
- Adie requisições externas até que o usuário role a tela. Um exemplo: você usa o plugin do Facebook para curtir a página na rede social. A sugestão é deixar para carregar esse script no rodapé, depois que todo o conteúdo já tenha sido carregado. Assim, evita que isso impacte no tempo de carregamento.
- Mantenha o cache otimizado, sempre definindo um valor de TTL (Time to Live) superior a 30 dias para arquivos com pouca edição, ou de pelo menos 7 dias para arquivos que são frequentemente alterados.
- Utilize CDN sempre que possível.
FID (First Input Delay)
Essa métrica leva em consideração o tempo que a página leva para responder após alguma interação do usuário, seja um botão, banners ou slides.
Esse item é impactado pela renderização de scrips JavaScript. Isso porque esses arquivos normalmente ocupam a thread principal de carregamento e enquanto aquele script está sendo processado e renderizado, o elemento que depende dele fica inacessível.
Isso é comum, por exemplo, num slider em que o próximo item seja carregado de maneira dinâmica. Se o usuário clicar e nada acontecer em mais do que 100 milissegundos, isso já é considerado um atraso de interação e irá impactar nessa métrica.
Outro ponto é que, hoje em dia, existem vários recursos que podemos integrar ao site e tudo isso pode gerar mais tempo para carregar uma página, consumindo processamento e reduzindo a performance do site. Por isso, é importante ser mais crítico em relação ao que será integrado.
Dicas para reduzir o FID
- Evitar a execução de JavaScripts pesadas, quebrando tasks longas sempre que possível.
- Utilizar carregamentos assíncronos (que ocorrem separadamente).
- Fazer poucas requisições e de arquivos pequenos.
CLS (Cumulative Layout Shift)
Por último, a métrica CLS é um pouco mais complexa. Ela considera o quanto os blocos de conteúdo já carregados se deslocam na página na medida em que outros elementos são renderizados.
Quem nunca passou pela experiência de acessar um site e, antes de conseguir ler o conteúdo, aparece um banner ou anúncio que desloca tudo para baixo? Ou até mesmo um botão que acabou jogando pelo menos 10% da tela pra baixo?
Nem precisamos dizer que para o usuário, isso é muito ruim. Ele acaba clicando em um botão errado e abrindo uma página que não queria, entre outros inconvenientes.
Essa métrica chega para tentar resolver isso. O cálculo é feito com base nas proporções do display que o usuário está acessando. Se for por desktop, é mais fácil de adequar pois tem mais espaço disponível. Mas, no caso mobile, o display é bem menor.
Por isso, pode ser um pouco mais complexo chegar numa boa pontuação com essa métrica, pois são dois esforços diferentes: desktop e o segundo, bem mais desafiador, mobile.
Dicas para reduzir o CLS
- Sempre definir o tamanho dos elementos de imagem e vídeo, especificando uma altura fixa e largura proporcional através de CSS aspect ratio.
- Utilizar CCS transform em animações.
- Ao carregar conteúdo dinâmico, como textos ou anúncios, defina a altura da DIV container desses elementos.
Essas são algumas das mudanças que, de acordo com o Google, já começam a valer neste mês. O seu site está pronto para ser avaliado a partir dessas métricas? Se a resposta é não ou se você ainda ficou com dúvidas, nós podemos te ajudar! Chama a gente e vamos conversar.
