Se você já recebeu um relatório do Google Search Console ou do PageSpeed Insights, provavelmente viu as siglas LCP, INP e CLS, acompanhadas de cores verde, amarela ou vermelha. Elas formam o que o Google chama de Core Web Vitals, ou “métricas essenciais da web”.
Parece assunto de programador, mas cada uma dessas métricas mede algo que o seu cliente sente na pele ao usar o site. Vamos traduzir.
O que são as Core Web Vitals
São três medidas que o Google usa para avaliar a experiência de uso de uma página:
- quão rápido o conteúdo principal aparece (LCP);
- quão rápido a página responde quando a pessoa interage (INP);
- quão estável a página fica enquanto carrega (CLS).
Elas fazem parte dos sinais que o Google considera, mas não são o fator decisivo sozinhas: uma página muito relevante pode aparecer bem mesmo sem notas perfeitas. O motivo principal para cuidar delas é outro: visitantes desistem de sites lentos e confusos.
LCP: o conteúdo principal apareceu?
LCP significa Largest Contentful Paint, algo como “maior elemento exibido”. Mede quanto tempo leva para o maior elemento visível da tela aparecer, geralmente a imagem principal do topo ou o bloco de texto de abertura.
Na prática: é o momento em que o visitante sente que “a página carregou”.
Referência do Google: até 2,5 segundos é considerado bom.
O que costuma piorar o LCP:
- imagem de destaque muito pesada ou em formato antigo, sem compressão;
- carrosséis e vídeos no topo da página;
- hospedagem lenta para responder;
- fontes e arquivos de estilo que bloqueiam a exibição;
- conteúdo que só aparece depois que muito JavaScript é executado.
INP: a página respondeu ao clique?
INP significa Interaction to Next Paint, ou “da interação até a próxima atualização da tela”. Mede o tempo entre uma ação do visitante (tocar num botão, abrir um menu, digitar num campo) e a resposta visível da página.
Na prática: é a diferença entre um botão que responde na hora e um que parece “travado”, levando a pessoa a tocar de novo.
Referência do Google: até 200 milissegundos é considerado bom.
O que costuma piorar o INP:
- muitos scripts de terceiros rodando ao mesmo tempo (chats, pixels de anúncio, widgets);
- plugins em excesso, comum em sites WordPress sem manutenção;
- construtores de página que geram código pesado;
- menus e efeitos animados mal implementados;
- celulares mais simples, que sentem mais o peso do código.
CLS: a página ficou parada?
CLS significa Cumulative Layout Shift, ou “deslocamento acumulado do layout”. Mede o quanto os elementos mudam de lugar enquanto a página carrega.
Na prática: sabe quando você vai tocar num link e, no último instante, o conteúdo desce e você acaba tocando em outra coisa? Isso é CLS alto.
Referência do Google: até 0,1 é considerado bom. É um número sem unidade, que combina quanto da tela se moveu e o quanto se deslocou.
O que costuma piorar o CLS:
- imagens e vídeos sem tamanho definido no código;
- banners, avisos ou anúncios que surgem empurrando o conteúdo;
- fontes que carregam depois e mudam o tamanho do texto;
- aviso de cookies que aparece no topo e desloca a página.
Resumo em uma tabela
| Métrica | O que mede | Sensação do visitante | Bom (referência do Google) |
|---|---|---|---|
| LCP | Tempo até o conteúdo principal aparecer | “Carregou” | Até 2,5 s |
| INP | Tempo de resposta a cliques e toques | “Respondeu” | Até 200 ms |
| CLS | Estabilidade visual | “Ficou parado” | Até 0,1 |
Dados de laboratório e dados reais
Existem duas formas de medir, e isso confunde muita gente:
- Dados de laboratório: uma simulação feita na hora, como a nota de 0 a 100 do PageSpeed Insights. Útil para diagnosticar, mas varia a cada teste.
- Dados reais (de campo): medições de visitantes reais que usaram o site ao longo do tempo, coletadas pelo navegador Chrome. São esses que o Google usa na avaliação.
Sites com poucas visitas podem não ter dados reais suficientes, e aí só aparece a simulação. Não se preocupe com a nota exata de 0 a 100; preste atenção nas métricas e no que está vermelho ou amarelo.
Como verificar o seu site
- PageSpeed Insights (pagespeed.web.dev): cole o endereço de uma página e veja os resultados para celular e computador.
- Google Search Console, no relatório Core Web Vitals: mostra grupos de páginas com problema, com base em dados reais. Veja o que olhar no Search Console.
- Seu próprio celular: abra o site com a conexão móvel, não o Wi-Fi do escritório, e observe se demora, trava ou pula.
Teste mais de uma página: a inicial, uma página de serviço e a de contato.
O que fazer com o resultado
Quase sempre, os problemas se concentram em poucas causas: imagens pesadas, excesso de scripts e plugins, hospedagem fraca ou um tema mal construído. Correções típicas:
- otimizar e redimensionar imagens;
- remover plugins e scripts que ninguém usa;
- definir tamanhos para imagens e espaços reservados para banners;
- melhorar a hospedagem ou o cache;
- em casos mais graves, reconstruir o site com uma base mais leve.
Mais detalhes em meu site está lento e no artigo sobre hospedagem barata ou gerenciada.
Próximo passo
Se o seu site está vermelho nessas métricas, peça uma análise do site para entender as causas e o que vale corrigir primeiro. Também tratamos desempenho dentro do trabalho de SEO e manutenção. Fale com a gente.