Core web vitals em 2026: o que são LCP, INP e CLS e como melhorar cada um

O que são core web vitals

Core web vitals são as três métricas que o Google usa para medir a experiência de quem abre uma página: quanto tempo o conteúdo principal leva para aparecer, quanto a página demora para responder a um toque e quanto o layout se mexe enquanto carrega.

A diferença para um teste de velocidade comum é a origem dos dados. O Google usa as visitas reais de usuários do Chrome, reunidas no relatório CrUX. Se o seu site carrega rápido no seu computador, mas lento no celular de quem visita, vale o que o visitante viu.

Os limites de cada métrica

Para passar, pelo menos 75% das visitas precisam ficar na faixa "bom" das três métricas, separadamente no celular e no computador.

Como medir do jeito certo

1. PageSpeed Insights (pagespeed.web.dev): a parte de cima, "Descubra o que seus usuários reais estão vivenciando", mostra os dados de campo. A nota de 0 a 100 de baixo é simulação e não entra no ranqueamento.
2. Search Console, relatório Core Web Vitals: agrupa as URLs com o mesmo problema e mostra a evolução em 28 dias. É o melhor lugar para priorizar.
3. Extensão Web Vitals ou DevTools do Chrome: mostra o LCP, o INP e o CLS enquanto você navega, útil para achar qual elemento causa o problema.

Site novo, com pouca visita, não tem dados de campo. Nesse caso, use a simulação do Lighthouse como guia até o tráfego crescer.

Como melhorar o LCP

O LCP costuma ser a imagem de destaque ou o título principal. Em sites WordPress e lojas virtuais, a imagem é a causa na maioria dos casos.

• Converta imagens para WebP ou AVIF e sirva no tamanho em que aparecem na tela. Uma foto de 3.000 px exibida com 800 px desperdiça banda.
• Não use carregamento preguiçoso (lazy load) na imagem principal. Ela deve carregar primeiro, com o atributo fetchpriority="high".
• Reduza o tempo de resposta do servidor (TTFB). Hospedagem lenta, sem cache, trava todo o resto; compare opções no nosso guia de melhor hospedagem de sites.
• Use cache de página e uma CDN para entregar os arquivos de um servidor próximo do visitante.
• Carregue fontes com font-display: swap e pré-conecte o domínio das fontes.

Como melhorar o INP

O INP piora quando o navegador está ocupado executando JavaScript no momento do clique.

• Corte scripts que não são essenciais: widgets de chat, pop-ups, mapas de calor e pixels duplicados.
• Carregue scripts de terceiros com defer ou depois da interação.
• Em lojas e temas pesados, desative plugins que injetam JavaScript em todas as páginas quando só uma usa.
• Divida tarefas longas: tarefas acima de 50 ms travam a resposta. O painel Performance do Chrome mostra quais são.

Como melhorar o CLS

O CLS mede aquele salto de conteúdo que faz a pessoa clicar no lugar errado.

• Defina largura e altura em todas as imagens e vídeos, para o navegador reservar o espaço.
• Reserve altura fixa para banners de anúncio e avisos de cookies.
• Evite inserir conteúdo acima do que já foi exibido, como barras de promoção que aparecem depois.
• Use fontes com métricas parecidas com a fonte reserva, para o texto não mudar de tamanho quando a fonte carrega.

O que corrigir primeiro

Comece pelo relatório do Search Console e ataque o grupo de URLs com mais páginas. Em quase todo site, a ordem que dá mais resultado com menos trabalho é esta:

1. Imagem principal otimizada e sem lazy load.
2. Cache de página e CDN ativados.
3. Dimensões definidas em imagens e anúncios.
4. Scripts de terceiros adiados ou removidos.

Depois de corrigir, clique em "Validar correção" no Search Console. Como a janela é de 28 dias, a melhora aparece de forma gradual.

Core web vitals e SEO: o peso real

Core web vitals não fazem uma página fraca subir para o topo. Conteúdo que responde bem à busca continua sendo o fator principal, como explicamos em fatores de ranqueamento do Google. O ganho aparece em duas situações: no desempate entre páginas de qualidade parecida e na conversão, porque páginas rápidas perdem menos visitantes antes de carregar.

Core web vitals no WordPress

O WordPress concentra a maior parte dos problemas de core web vitals no Brasil, quase sempre pela soma de tema pesado, plugins demais e hospedagem sem cache.

Cache e otimização

• LiteSpeed Cache: gratuito e o mais completo quando a hospedagem usa servidor LiteSpeed. Faz cache de página, otimiza CSS e JavaScript e converte imagens.
• WP Rocket: pago, funciona em qualquer servidor e resolve boa parte do LCP com a configuração padrão.
• Perfmatters ou Asset CleanUp: desativam scripts e estilos nas páginas que não usam. É o caminho mais rápido para melhorar o INP.
• ShortPixel, Imagify ou EWWW: comprimem e convertem imagens para WebP ou AVIF no envio.

Use um plugin de cache por vez. Dois plugins minificando o mesmo arquivo costumam quebrar o layout e piorar o CLS.

Tema e construtor de páginas

Construtores visuais como Elementor e Divi carregam muito CSS e JavaScript em toda página. Não é preciso abandonar, mas vale desligar os widgets e recursos que você não usa. Temas leves como GeneratePress, Kadence e Astra partem de uma base bem menor e facilitam passar nas três métricas.

Fontes e ícones

Hospede as fontes no próprio servidor em vez de carregar do Google Fonts a cada visita, use no máximo duas famílias e dois pesos, e troque bibliotecas inteiras de ícones por SVGs dos ícones que você realmente usa.

Core web vitals em lojas virtuais

Em plataformas prontas, como Nuvemshop e Shopify, você não mexe no servidor, mas ainda controla o que mais pesa:

• Carrossel na página inicial: é o vilão mais comum do LCP. Um banner fixo carrega mais rápido e costuma converter igual.
• Aplicativos instalados: cada app de avaliação, chat, pop-up ou contador de estoque adiciona scripts. Remova os que não trazem venda.
• Fotos de produto: envie no tamanho que a plataforma exibe, não a foto original da câmera.
• Selos e banners de frete: reserve o espaço no layout para não empurrar o conteúdo depois de carregar.

Se a loja estiver em dúvida entre plataforma pronta e loja própria, a comparação completa está em Nuvemshop ou WooCommerce.

Diagnóstico por sintoma

Ferramentas para acompanhar

Um cenário comum e como resolvê-lo

Um blog em WordPress com tema pesado, imagem de destaque de 2 MB, carregamento preguiçoso em todas as imagens, chat flutuante e três pixels de anúncio. No celular, o LCP fica perto de 5 segundos e o INP acima de 400 ms.

A sequência que costuma resolver:

1. Converter a imagem de destaque para WebP com a largura real exibida, o que derruba o peso para algo entre 80 e 150 KB.
2. Tirar o lazy load da primeira imagem e marcar como prioridade.
3. Ativar cache de página e CDN.
4. Carregar o chat só depois de um clique no ícone.
5. Adiar os pixels para depois do carregamento.

Só os passos 1 a 3 costumam levar o LCP para a faixa boa. Os passos 4 e 5 resolvem a maior parte do INP.

Checklist de core web vitals

• Imagem principal em WebP ou AVIF, sem lazy load e com fetchpriority="high".
• Largura e altura definidas em todas as imagens, vídeos e iframes.
• Cache de página ativo e CDN na frente do site.
• TTFB abaixo de 800 ms no PageSpeed.
• Scripts de terceiros com defer ou carregados após interação.
• Espaço reservado para anúncios, banners e aviso de cookies.
• No máximo duas famílias de fonte, hospedadas no próprio domínio.
• Validação solicitada no Search Console depois de cada correção.