Core Web Vitals: o guia completo para melhorar LCP, INP e CLS

Os Core Web Vitals são três números que o Google usa para saber se uma página é agradável de usar. Eles fazem parte da avaliação de experiência na página, que conta como um dos sinais de classificação nas buscas.

Mais importante do que o Google, porém, é o visitante: cada um desses números corresponde a uma irritação real. Página que demora a aparecer, botão que não responde, texto que pula na hora do toque. Melhorar os três é melhorar a vida de quem visita o seu site.

Os três números, em uma tabela

Entre "bom" e "ruim" fica a faixa precisa melhorar.

Como o Google mede (e por que o seu teste pode dar diferente)

Existem dois tipos de medição, e entender a diferença evita muita confusão:

• Dados de laboratório: um teste simulado, feito num aparelho e numa conexão definidos. É o que você vê ao testar uma página. Serve para encontrar problemas e conferir se uma correção funcionou.
• Dados de campo: medições de visitantes reais que usam o Chrome, reunidas no Chrome User Experience Report. É esse que o Google usa para avaliar o seu site.

Nos dados de campo, o Google olha os últimos 28 dias e considera a página aprovada quando 75% das visitas ficam na faixa "bom". Por isso:

• Uma correção leva algumas semanas para aparecer no relatório do Google.
• Sites com pouca visita podem não ter dados de campo. Nesse caso, guie-se pelo teste de laboratório.
• O INP só existe com interação real, então o teste de laboratório usa o TBT (tempo total de bloqueio) como aproximação.

Onde ver os seus números

1. Teste de Performance: mostra LCP, CLS e as outras métricas de laboratório, com dicas do que corrigir.
2. Google Search Console, no relatório "Core Web Vitals": dados de campo, agrupando as páginas com o mesmo problema.
3. PageSpeed Insights: mostra campo e laboratório lado a lado para uma página.

Olhe primeiro o celular. O Google avalia o site pela versão mobile, e é nela que os números costumam ser piores.

Como melhorar o LCP (carregamento)

O LCP marca o momento em que aparece o maior elemento visível da tela, normalmente a imagem do topo ou o título principal. Ele depende de quatro etapas: o servidor responder, o navegador descobrir a imagem, baixá-la e desenhá-la.

1. Deixe a imagem principal leve

• Use WebP ou AVIF e o tamanho certo para a tela (uma foto de 4.000 px não precisa ir para um celular).
• Entregue versões diferentes para celular e computador com srcset.

2. Faça o navegador buscar essa imagem logo

• Não use carregamento preguiçoso (loading="lazy") na imagem do topo. Ele é ótimo para o resto da página, mas atrasa justamente a principal.
• Marque a imagem principal com fetchpriority="high".
• Evite que o topo dependa de JavaScript para aparecer, como em carrosséis montados por script.

3. Acelere o servidor

• Ative cache de página e use uma CDN.
• Se o tempo de resposta do servidor (TTFB) passa de 0,8 s, a hospedagem pode ser o gargalo.

4. Tire o que bloqueia a página

• CSS e fontes que travam o carregamento: carregue só o necessário para o topo e use font-display: swap nas fontes.

Como melhorar o INP (resposta ao toque)

O INP mede a demora entre uma interação (toque, clique, tecla) e a próxima atualização da tela. Quando o navegador está ocupado rodando JavaScript, ele não consegue responder, e o visitante sente o site travado.

1. Corte scripts de terceiros Chats, pop-ups, mapas de calor, pixels de anúncio e widgets disputam o mesmo processador. Faça uma lista e remova o que não traz resultado.

2. Adie o que não é urgente Scripts que não são necessários no primeiro momento podem carregar depois, com defer, ou só quando a pessoa chega perto daquela parte da página.

3. Divida tarefas longas Para quem programa: tarefas de JavaScript acima de 50 ms bloqueiam a página. Quebre o trabalho em partes menores e dê ao navegador a chance de responder entre elas.

4. Cuidado com páginas enormes Páginas com milhares de elementos deixam qualquer atualização mais lenta. Listas muito longas podem ser paginadas ou carregadas aos poucos.

Como melhorar o CLS (estabilidade visual)

O CLS mede o quanto o conteúdo se desloca sem o visitante pedir. É aquele botão que desce no momento do toque porque algo apareceu em cima.

1. Defina largura e altura de imagens e vídeos Com width e height no HTML (ou aspect-ratio no CSS), o navegador reserva o espaço antes de a imagem chegar.

2. Reserve espaço para anúncios, banners e incorporações Dê uma altura mínima ao espaço onde eles vão aparecer.

3. Não insira conteúdo acima do que já está na tela Avisos de cookies, barras de promoção e mensagens devem ficar sobrepostos, presos ao rodapé, ou reservar espaço desde o início.

4. Cuide das fontes A troca da fonte provisória pela definitiva pode mudar o tamanho do texto. Usar fontes com medidas parecidas e pré-carregar a fonte principal reduz o salto.

Um plano de ação em 5 passos

1. Meça a página mais importante (normalmente a home ou a página que mais vende) no celular.
2. Escolha o pior dos três números e comece por ele.
3. Corrija uma coisa de cada vez e teste de novo, para saber o que funcionou.
4. Repita nas outras páginas importantes; problemas costumam se repetir no site todo, porque usam o mesmo tema.
5. Acompanhe no Search Console nas semanas seguintes, para ver os dados de campo melhorarem.

Não persiga a nota 100. Para o Google, o que importa é estar na faixa "bom" nos dados reais. Depois disso, conteúdo útil e relevante pesa muito mais do que alguns pontos a mais no teste.