Core Web Vitals: como passar em LCP, INP e CLS
Os Core Web Vitals são três métricas que mostram como a página se comporta para quem de fato a usa: quão rápido o conteúdo principal aparece, quão rápido a página reage aos toques e se o layout fica parado. Não substituem conteúdo bom, mas indicam um site agradável de usar. Veja como entender, medir e corrigir.
Resumo rápido
- LCP mede o carregamento, INP mede a resposta às interações e CLS mede a estabilidade visual.
- Limites bons, no percentil 75 das visitas: LCP até 2,5 s, INP até 200 ms e CLS até 0,1.
- Use dados de campo (Search Console e PageSpeed Insights) para priorizar e dados de laboratório para diagnosticar.
- Corrija por modelo de página e monitore todo mês, porque mudanças de design e plugins costumam causar regressões.
O que são os Core Web Vitals
- LCP (Largest Contentful Paint): tempo até o maior elemento visível, geralmente a imagem principal ou um bloco de texto, aparecer.
- INP (Interaction to Next Paint): rapidez com que a página responde visualmente a toques, cliques e teclas ao longo da visita. O INP substituiu o FID como métrica essencial em 2024.
- CLS (Cumulative Layout Shift): quanto o conteúdo “pula” de lugar de forma inesperada.
Importam porque o usuário percebe: imagem principal lenta, botão que não reage e layout que se mexe na hora do toque fazem as pessoas desistir.
Os limites considerados bons
| Métrica | Bom | Precisa melhorar | Ruim |
|---|---|---|---|
| LCP | até 2,5 segundos | 2,5 a 4 s | acima de 4 s |
| INP | até 200 ms | 200 a 500 ms | acima de 500 ms |
| CLS | até 0,1 | 0,1 a 0,25 | acima de 0,25 |
Arraste a tabela para o lado para ver todas as colunas.
A avaliação usa o percentil 75 das visitas: para ser considerada boa, pelo menos três de cada quatro visitas precisam atingir o limite. Os limites são os mesmos em celular e computador, mas o celular costuma ter resultados piores.
Dados de campo e dados de laboratório
- Campo: vem de visitantes reais ao longo do tempo (relatório de Core Web Vitals no Search Console e a seção de campo do PageSpeed Insights). Mostra se há problema e em quais páginas.
- Laboratório: teste simulado em um aparelho e uma rede (por exemplo, Lighthouse). Ajuda a descobrir por que o problema acontece, porque pode ser repetido.
Uma nota excelente no laboratório não garante dados bons no campo. Para decidir prioridades, use os dados de campo; para diagnosticar, use o laboratório.
Como medir, passo a passo
- Abra o relatório de Core Web Vitals no Search Console e veja os grupos de URLs com problema no celular.
- Escolha uma URL representativa de cada grupo e rode no PageSpeed Insights.
- Use as ferramentas do navegador (painel Desempenho) para achar elementos lentos, tarefas longas e mudanças de layout.
- Corrija o problema no modelo de página, porque o mesmo erro costuma afetar o grupo inteiro.
- Aguarde: os dados de campo são coletados em uma janela contínua, então a confirmação leva semanas.
Se ainda não conectou o site ao Search Console, veja como fazer o Google encontrar o seu site.
Como melhorar o LCP
- Descubra o elemento LCP (muitas vezes a imagem do topo) e otimize esse primeiro.
- Acelere o servidor: cache, CDN e hospedagem adequada. Páginas estáticas ajudam muito.
- Deixe a imagem principal leve: comprima, use o tamanho realmente exibido e formatos modernos como WebP ou AVIF.
- Não use carregamento preguiçoso na imagem principal. Esse recurso serve para imagens abaixo da dobra; dê prioridade alta à imagem do topo.
- Reduza o que bloqueia a renderização: CSS crítico, scripts adiados e fontes leves.
Como melhorar o INP
- Quebre tarefas longas para o navegador responder entre uma etapa e outra.
- Reduza e adie o JavaScript: remova bibliotecas sem uso e carregue o que não é crítico depois.
- Revise scripts de terceiros: chat, tags, mapas de calor e anúncios costumam pesar. Carregue só onde precisa e, quando exigido, depois do consentimento.
- Mantenha a página enxuta: estruturas com milhares de elementos deixam cada interação lenta.
- Dê retorno imediato ao toque (estado do botão) e faça o trabalho pesado depois.
Como melhorar o CLS
- Defina largura e altura (ou aspect-ratio) em imagens, vídeos e incorporações para reservar o espaço.
- Reserve espaço para anúncios, banners e avisos de cookies em vez de inseri-los acima do conteúdo já visível.
- Cuide das fontes: estratégia de font-display e fonte substituta com medidas parecidas evitam o texto “pular”.
- Evite inserir conteúdo acima do que a pessoa já está lendo, exceto após uma ação dela.
- Anime com transform e opacity, não com propriedades que alteram o layout.
Em blogs com anúncios, defina alturas mínimas para os espaços de anúncio, para que não empurrem o texto depois do carregamento.
Correções por sintoma
| Sintoma | Causa provável | Correção |
|---|---|---|
| LCP lento no celular | Imagem pesada, servidor lento | Comprimir, cache, CDN |
| Menu ou filtro demora a reagir | JavaScript pesado, scripts de terceiros | Adiar scripts, quebrar tarefas |
| Página pula quando imagens aparecem | Imagens sem dimensões | Definir largura e altura |
| Layout muda no topo | Banner, aviso de cookies ou anúncio tardio | Reservar espaço |
| Nota boa no laboratório e ruim no campo | Usuários com aparelhos mais lentos | Testar com limitação de rede e reduzir peso |
Arraste a tabela para o lado para ver todas as colunas.
Perspectiva e monitoramento
Os Core Web Vitals fazem parte da experiência na página, mas conteúdo relevante e útil pesa muito mais. Trate-os como parte de um site agradável e inclua a checagem em uma auditoria regular. Revise todo mês e após cada redesign, plugin ou tag nova. Para o conjunto técnico, veja SEO técnico: checklist. Se quiser que a equipe da MetaEX meça e corrija o desempenho do seu site, faça o diagnóstico gratuito.
Perguntas frequentes
Core Web Vitals são fator de ranqueamento?
Fazem parte da experiência na página, que o Google considera, mas relevância e conteúdo útil pesam muito mais. Uma experiência muito ruim ainda prejudica usuários e conversões.
Por que minha nota no laboratório difere do Search Console?
O laboratório simula um aparelho e uma rede em um momento. O Search Console mostra visitantes reais ao longo do tempo. Use o campo para julgar e o laboratório para diagnosticar.
Quanto tempo leva para as melhorias aparecerem?
Os dados de campo são coletados em uma janela contínua, então espere algumas semanas depois da correção.
Os limites são diferentes no celular e no computador?
Não, são os mesmos, mas o celular costuma ter resultados piores por causa de aparelhos e redes mais lentos. Priorize o celular.
O que corrigir primeiro?
O que reprova nos dados de campo nos modelos mais visitados, geralmente o LCP primeiro e depois INP e CLS. Corrigir um modelo melhora várias URLs de uma vez.
Fontes
Quer uma leitura da sua operação digital?
O diagnóstico é gratuito, sai na hora e devolve nota de 0 a 100 com ordem de prioridade.
Fazer o diagnóstico gratuito