Core Web Vitals. Tudo o que precisas saber

A experiência do utilizador é um dos aspetos fundamentais do posicionamento orgânico, uma vez que, como sabemos, o Google sempre cuidou dos teus utilizadores e cada vez mais leva isso em conta.

Por esta razão, em maio de 2020, o Google anunciou o que chamam de “Core Web Vitals”, uma série de métricas cujo principal objetivo é ajudar a entender a experiência do utilizador de uma forma objetiva, mais clara e, consequentemente, melhorá-la de forma mais eficiente.

Podes estar a perguntar-te o que medem exatamente essas métricas, como detetamos o que estão a dizer-nos e, é claro, como melhorá-las. Bem, veremos tudo isso abaixo.

O que são os Sinais Vitais da Web?

Já mencionámos que os Vitais da Web são métricas que ajudam a compreender melhor a experiência que um utilizador obtém num determinado website, tanto para o Google como para nós.

A experiência do site deve ser levada em conta para otimizá-la e oferecer a melhor experiência aos potenciais visitantes do site.

Neste sentido, cada um dos Sinais Vitais da Web representa um aspeto diferente da experiência do utilizador.

De acordo com as informações que recebemos do Google, o Core Web Vitals está a evoluir ao longo do tempo e atualmente concentra-se em 3 aspetos fundamentais: carga, interatividade e estabilidade visual.

• Largest Contentful Paint (LCP)
• First input Delay (FID)
• Cumulative Layout Shift  (CLS)

A seguir, analisaremos cada uma dessas métricas separadamente: o que significam, como podemos medí-las, como podemos melhorá-las?

Largest Contentful Paint (LCP)

A Largest Contentful Paint mede o tempo de renderização do maior elemento de conteúdo visível, ou seja, o maior elemento visível dentro do viewport. Um viewport é a primeira captura de ecrã do site quando o utilizador acessa o mesmo.

Em termos mais simples, refere-se à velocidade a que um site aparece no ecrã, medindo o ponto em que o maior elemento de conteúdo aparece no ecrã quando a página está carregando

Por exemplo, se tiveres uma página de destino com texto, títulos, legendas e uma imagem grande, os maiores elementos da página (possivelmente a imagem), serão considerados Largest Contentful Paint (LCP).

Por vezes, a otimização das imagens ou vídeos no site para que carreguem mais rapidamente resultará na otimização do site para o Google, o que irá melhorar esta métrica.

LCP é relativamente fácil de medir e interpretar, mas é importante entender que não mede o tempo que leva para todo o site carregar completamente, apenas mede o tempo que leva para o maior item de conteúdo aparecer para os utilizadores dentro do viewport

Como é que sabemos se temos um bom LCP

Normalmente o carregamento de um site começa com texto e continua com imagens e vídeos. Se qualquer elemento do site demora muito tempo a carregar, pode prejudicar a tua classificação orgânica por não proporcionar uma boa experiência ao utilizador.

Para ser considerado bom, o LCP deve realizar-se dentro de 2,5 segundos após o carregamento da página.

Em qualquer caso, as ferramentas de medição podem mostrar-nos 3 cenários diferentes.

• Bom: Para cargas de menos de 2,5 segundos.
• Necessita de melhorias: Para cargas entre 2,5 e 4 segundos.
• Pobre: Para cargas superiores a 4 segundos.

Como medir LCP

O LCP pode ser medido com base em dados de laboratório ou com base em dados de campo. Este último está mais próximo da realidade, pois leva em conta fatores que podem surgir ao longo do tempo, enquanto os dados laboratoriais dão uma medição precisa.

Vamos dar uma olhada nas ferramentas para medir LCP

Ferramentas de campo

• Relatório de experiência do utilizador do Google Chrome
• Velocidade da Página
• Google Search Console (Core Web Vitals Report)

Ferramentas de laboratório

• Lighthouse
• Webpagetest
• DevTools de Chrome

Como melhorar a LCP

Há quatro fatores nos quais os proprietários de sites podem concentrar-se para garantir as melhores práticas de LCP:

• Tempos lentos de resposta do servidor
• Múltiplos tempos de carga de recursos
• Renderização do lado do utilizador final
• Bloqueio por JavaScript e CSS

First input Delay (FID)

Esta métrica refere-se à velocidade ou interatividade com que um website reage à entrada de um novo utilizador. Em outras palavras, mede o tempo que o site leva para responder quando um utilizador interage. Em português, é mais conhecida como Latência na primeira entrada

Este é um indicador chave de desempenho, pois quanto mais rápido um site carrega e é funcional para o utilizador, mais provável é que o utilizador permaneça na página.

Como é que sabemos se temos um bom FID

De acordo com as informações fornecidas pelo Google, para ter um bom FID, esta métrica tem de ser inferior a 100ms e, tal como o LCP, esta métrica também é apresentada em intervalos.

• Bom: Até 100ms.
• Necessita de melhorias: Até 300ms.
• Pobre: Mais de 300ms.

Como medir o FID

No caso do FID, só podemos medi-lo com ferramentas que utilizam dados de campo, e olhamos para eles abaixo.

• Firebase Performance Monitoring (Beta)
• Relatório de experiência do utilizador do Chrome
• PageSpeed Insights
• Search Console (relatório Core Web Vitals)

Razões pelas quais podemos ter FIDs pobres ou a melhorar

Há várias razões para termos um FID pobre, vamos dar uma olhada nalgumas delas, as mais relevantes.

Execução pesada JavaScript

Se houver uma execução excessivamente pesada de elementos JavaScript, o navegador não será capaz de responder corretamente às interações do utilizador, o que pode causar frustração e conseqüentemente uma má experiência do utilizador.

Para remediar isso, o Google recomenda comprimir arquivos JavaScript e excluir aqueles que não estão em uso

Tarefa Longa Quebrada

Cartões longos JavaScript quebrados ou bloqueados podem causar atrasos de até 50ms na resposta do site a partir do momento em que o utilizador executa a ação.

Podemos resolver isto dividindo os processos grandes em processos menores. Isto irá melhorar os tempos de processamento e os tempos de execução JavaScript.

Cumulative Layout Shift (CLS)

Esta métrica mede a soma de todas as mudanças em relação ao design que podem ocorrer num site. Em outras palavras, determina a estabilidade visual do site medindo quantas vezes os elementos do design (texto, imagens, arquivos de áudio, vídeo, etc.) aparecem durante o carregamento da página.

Vemos isto com um exemplo de um caso possível e simples. Nalgumas páginas, quando o carregamento começa, alguns elementos podem ser vistos num lugar e quando o carregamento termina, eles aparecem num lugar diferente. O tempo que leva para os elementos aparecerem no seu lugar final é o que conhecemos como CLS.

Como é que sabemos se temos um bom CLS

De acordo com as informações fornecidas pelo Google, para que um website cumpra com os padrões Core Web Vitals em relação ao CLS, este deve ser inferior a 1,1s

Como nas métricas anteriores, podemos ver os resultados segmentados:

• Bom: Até 0.1.
• Necessita de melhorias: Até 0,25.
• Pobre: Mais de 0,25.

Como medir o CLS

Neste caso, temos ferramentas que nos fornecem dados de campo e ferramentas nas quais podemos consultar dados de laboratório.

Ferramentas de campo

• Relatório de experiência do utilizador do Google Chrome
• Page Speed Insights
• Google Search Console (Core Web Vitals Report)

Ferramentas de laboratório

• Lighthouse
• Webpagetest
• DevTools do Chrome

Como posso melhorar o CLS no meu site?

Aqui estão algumas ações que podemos tomar para melhorar o CLS.

• Otimizar o tamanho das imagens
• Redimensionar banners e anúncios
• Evita usar conteúdos dinâmicos, como barras deslizantes ou pop ups

Como o Core Web Vital afeta o SEO

Desde maio de 2021, o Google adicionou o Core Web Vitals como um dos fatores a serem levados em conta para o ranking.

Como mencionámos neste post, o Google sempre cuida dos utilizadores, e esta atualização tem a clara intenção de continuar nesta linha, mais especificamente para a experiência do utilizador. É por isso que os Core Web Vitals têm um peso importante em termos de posicionamento orgânico, ou seja, SEO.

Além disso, se olharmos para o painel do Google Search Console para webmasters, veremos que foi introduzido um painel no qual se mostram estas métricas. Isso dá-nos uma importante pista ou sinal sobre a importância dessas métricas para o Google.

Como disse, atualmente está a focar nas métricas que explicámos neste post, mas novas métricas podem ser adicionadas. Na verdade, o Google já deu avisos neste sentido, que serão adicionados dentro da ideia de melhorar a experiência da página.

Conclusões

As ações ou novas atualizações que o Google faz, sempre ou na maioria dos casos, estão focadas no utilizador. Neste caso em particular, o Core Web Vitals tem como objetivo melhorar a experiência do utilizador ao navegar no site.

São um fator importante a ter em conta para melhorar o posicionamento orgânico, por isso é importante conhecê-los, interpretá-los, medi-los e otimizá-los corretamente.