Core Web Vitals: o que são LCP, INP e CLS e como melhorar cada métrica

Um site pode parecer bonito quando termina de carregar, mas ainda oferecer uma experiência ruim durante a navegação.

A imagem principal pode demorar para aparecer, um botão pode levar alguns segundos para responder ou o conteúdo pode mudar de lugar enquanto a pessoa tenta ler. Esses problemas causam irritação, dificultam a navegação e podem fazer o visitante abandonar a página.

Para ajudar a avaliar situações como essas, o Google utiliza um conjunto de métricas chamado Core Web Vitals.

As três métricas principais são:

• LCP, relacionado ao carregamento;
• INP, relacionado à resposta às interações;
• CLS, relacionado à estabilidade visual.

Elas fazem parte da análise de experiência das páginas e ajudam a identificar problemas que nem sempre ficam evidentes apenas olhando o visual do site.

Os Core Web Vitals também fazem parte do trabalho de SEO técnico, pois envolvem estrutura, carregamento, scripts, imagens, servidor e comportamento das páginas em diferentes dispositivos.

O que são Core Web Vitals?

Core Web Vitals são métricas utilizadas para avaliar aspectos importantes da experiência real de navegação.

Atualmente, o conjunto é formado por:

• Largest Contentful Paint — LCP: mede quanto tempo o principal conteúdo visível demora para carregar;
• Interaction to Next Paint — INP: mede quanto tempo a página demora para responder a uma interação;
• Cumulative Layout Shift — CLS: mede o quanto os elementos mudam inesperadamente de posição.

Segundo a documentação do Google sobre Core Web Vitals, uma página deve apresentar bons resultados nas três métricas para oferecer uma experiência considerada satisfatória.

Isso não significa que atingir uma pontuação específica garantirá o primeiro lugar no Google. As métricas fazem parte de um conjunto maior de fatores que inclui relevância, qualidade do conteúdo, intenção de busca, autoridade e organização do site.

O objetivo principal deve ser melhorar a experiência dos visitantes, e não perseguir uma nota perfeita apenas para exibi-la em um relatório.

O que é LCP?

LCP é a sigla de Largest Contentful Paint, que pode ser traduzida como maior renderização de conteúdo.

Essa métrica avalia quanto tempo o maior elemento visível da página demora para aparecer na tela.

Esse elemento pode ser:

• a imagem principal;
• um banner;
• uma fotografia de produto;
• um grande bloco de texto;
• a imagem de destaque de um artigo;
• o título principal acompanhado de uma imagem.

O Google considera como bom um LCP de até 2,5 segundos.

Resultados entre 2,5 e 4 segundos indicam necessidade de melhoria. Acima de 4 segundos, o desempenho é considerado ruim.

O que pode deixar o LCP lento?

Algumas causas frequentes são:

• imagens grandes e sem compressão;
• servidor com resposta demorada;
• excesso de plugins;
• arquivos CSS e JavaScript pesados;
• imagens carregadas por scripts;
• fontes externas em excesso;
• banners ou vídeos muito grandes;
• ausência de cache;
• carregamento tardio da imagem principal.

Em sites WordPress, é comum que a imagem destacada ou o banner do topo seja o elemento responsável pelo LCP.

Se essa imagem tiver tamanho muito maior que o necessário ou estiver configurada para carregar com atraso, o visitante pode ficar olhando para uma área vazia enquanto o restante da página começa a aparecer.

Como melhorar o LCP?

Algumas ações que podem ajudar são:

• comprimir as imagens antes de publicá-las;
• utilizar formatos modernos, como WebP ou AVIF;
• servir imagens no tamanho adequado para cada tela;
• melhorar o tempo de resposta da hospedagem;
• configurar cache corretamente;
• reduzir arquivos CSS e JavaScript desnecessários;
• evitar vídeos pesados no início da página;
• priorizar o carregamento da imagem principal;
• remover plugins que acrescentam recursos sem necessidade.

Também é importante não aplicar carregamento tardio à imagem principal que aparece logo no começo da página. O lazy loading costuma ser útil para imagens mais abaixo, mas pode atrasar o LCP quando utilizado no elemento principal.

O que é INP?

INP é a sigla de Interaction to Next Paint.

Essa métrica avalia a capacidade de resposta da página durante as interações do visitante.

Ela observa situações como:

• clicar em um botão;
• abrir o menu;
• selecionar uma opção;
• preencher um campo;
• abrir uma janela;
• utilizar um filtro;
• avançar em um formulário.

Depois da interação, a página precisa apresentar uma resposta visual. Quando isso demora, a pessoa pode pensar que o botão não funcionou e clicar novamente.

Um INP de até 200 milissegundos é considerado bom. Entre 200 e 500 milissegundos, a página precisa de melhorias. Acima de 500 milissegundos, a resposta é considerada ruim.

O que pode prejudicar o INP?

Entre os problemas mais comuns estão:

• JavaScript em excesso;
• tarefas longas executadas pelo navegador;
• plugins que carregam muitos scripts;
• formulários pesados;
• menus complexos;
• pop-ups;
• ferramentas de chat;
• mapas incorporados;
• códigos de rastreamento em excesso;
• scripts de terceiros.

O problema nem sempre está em uma única ferramenta. Muitas vezes, vários recursos pequenos funcionam bem separadamente, mas juntos deixam a página lenta para responder.

Um site pode ter plugin de formulário, chat, mapa, redes sociais, rastreamento, pop-up, animações e banners. Cada recurso adiciona scripts e aumenta o trabalho do navegador.

Como melhorar o INP?

Algumas medidas importantes são:

• remover JavaScript que não está sendo utilizado;
• adiar scripts que não são essenciais para o carregamento inicial;
• dividir tarefas longas em operações menores;
• revisar plugins instalados;
• reduzir animações desnecessárias;
• simplificar formulários e menus;
• carregar ferramentas externas apenas quando necessário;
• testar a resposta dos botões no celular;
• evitar muitos recursos funcionando ao mesmo tempo.

Também é importante testar páginas diferentes.

A página inicial pode responder rapidamente, enquanto uma página com formulário, mapa ou ferramenta externa apresenta um INP ruim.

O que é CLS?

CLS é a sigla de Cumulative Layout Shift.

Essa métrica mede a estabilidade visual da página durante o carregamento.

Imagine que uma pessoa está prestes a clicar em um botão. De repente, uma imagem aparece acima dele, o conteúdo muda de posição e o clique atinge outro elemento.

Esse deslocamento inesperado é um problema de estabilidade visual.

O CLS também pode ser percebido quando:

• o texto desce depois que uma imagem carrega;
• um anúncio ocupa espaço repentinamente;
• o menu muda de tamanho;
• uma fonte altera a posição dos textos;
• um banner surge no topo;
• um botão se desloca durante a navegação.

Um CLS de até 0,1 é considerado bom. Entre 0,1 e 0,25, há necessidade de melhoria. Acima de 0,25, a estabilidade visual é considerada ruim.

O que pode causar CLS alto?

As causas mais frequentes incluem:

• imagens sem largura e altura definidas;
• banners inseridos depois do carregamento;
• anúncios sem espaço reservado;
• fontes que alteram o tamanho do texto;
• vídeos incorporados sem dimensões definidas;
• formulários que mudam de tamanho;
• barras de aviso;
• animações que movimentam o layout;
• elementos adicionados acima do conteúdo já carregado.

Como melhorar o CLS?

Algumas correções importantes são:

• definir largura e altura das imagens;
• reservar espaço para vídeos e anúncios;
• evitar inserir conteúdo acima de elementos já visíveis;
• configurar corretamente o carregamento das fontes;
• reduzir banners que aparecem repentinamente;
• revisar pop-ups e barras de aviso;
• manter botões e campos estáveis;
• testar as páginas em diferentes tamanhos de tela.

Uma página visualmente estável transmite mais segurança e facilita a leitura, especialmente em dispositivos móveis.

Como medir os Core Web Vitals?

Uma das ferramentas mais conhecidas é o PageSpeed Insights.

Basta inserir o endereço da página e iniciar a análise. O resultado apresenta informações para dispositivos móveis e computadores.

O relatório pode mostrar dois tipos principais de dados.

Dados reais de usuários

Também conhecidos como dados de campo, são coletados a partir de experiências reais de navegação.

Esses dados refletem diferentes aparelhos, velocidades de conexão, localidades e condições de uso.

Sites novos ou com pouco tráfego podem não ter quantidade suficiente de dados reais. Isso não significa necessariamente que exista um erro na ferramenta.

Dados de teste

São produzidos em um ambiente controlado e ajudam a investigar problemas técnicos específicos.

Eles podem indicar recursos que bloqueiam o carregamento, imagens pesadas, JavaScript desnecessário e oportunidades de melhoria.

Os dados de teste são úteis para diagnóstico, mas podem variar de uma análise para outra. Por isso, não é recomendável tomar decisões apenas com base em uma única execução.

Como acompanhar os Core Web Vitals no Search Console?

O Google Search Console possui um relatório específico para Core Web Vitals.

Ele agrupa páginas semelhantes e apresenta os resultados nas categorias:

• bom;
• melhorias necessárias;
• ruim.

O relatório utiliza dados reais de usuários e pode separar os resultados entre dispositivos móveis e computadores.

Como ele trabalha com grupos de páginas, um problema encontrado em determinado modelo pode afetar vários endereços. Um erro no layout dos artigos, por exemplo, pode aparecer em diversos posts que utilizam a mesma estrutura.

A documentação do relatório de Core Web Vitals no Search Console também explica que apenas páginas indexadas e com quantidade suficiente de dados aparecem nessa área.

Core Web Vitals afetam o posicionamento no Google?

Os Core Web Vitals são utilizados pelos sistemas de classificação do Google como parte da avaliação da experiência das páginas.

Porém, eles não trabalham sozinhos.

Uma página rápida, mas com conteúdo fraco, não se torna automaticamente mais relevante. Da mesma forma, um artigo excelente pode perder oportunidades quando a experiência de navegação é muito ruim.

O Google afirma que não existe um único sinal de experiência responsável pelo posicionamento. A pesquisa considera diversos elementos, e alcançar boas métricas não garante uma posição específica.

O melhor cenário combina:

• conteúdo útil;
• intenção de busca bem atendida;
• estrutura clara;
• boa experiência no celular;
• carregamento adequado;
• estabilidade visual;
• navegação fácil;
• links internos relevantes;
• páginas acessíveis aos mecanismos de busca.

Por isso, a análise de performance deve fazer parte de um checklist de SEO técnico, junto com indexação, sitemap, robots.txt, links quebrados, URLs canônicas e redirecionamentos.

Problemas comuns de Core Web Vitals no WordPress

Sites WordPress podem apresentar dificuldades de performance quando acumulam recursos ao longo do tempo.

Alguns exemplos são:

• tema muito pesado;
• plugins duplicados;
• construtores visuais com muitos elementos;
• imagens enviadas diretamente da câmera;
• excesso de fontes;
• sliders grandes;
• vídeos carregados automaticamente;
• scripts de redes sociais;
• cache mal configurado;
• hospedagem com poucos recursos.

Instalar vários plugins de otimização ao mesmo tempo também pode causar conflitos.

Um plugin pode tentar compactar arquivos enquanto outro altera a ordem de carregamento dos scripts. O resultado pode ser instabilidade, erros visuais ou até piora na pontuação.

Antes de instalar novas ferramentas, é importante identificar a causa real. Muitos problemas de SEO técnico não são resolvidos adicionando mais plugins, mas revisando o que o site já utiliza.

Checklist rápido para melhorar os Core Web Vitals

Durante a análise, verifique:

• qual elemento está sendo identificado como LCP;
• se a imagem principal está comprimida;
• se o servidor responde rapidamente;
• se existem scripts desnecessários;
• se botões e menus respondem sem atraso;
• se imagens possuem dimensões definidas;
• se o conteúdo muda de posição ao carregar;
• se o desempenho no celular é pior que no computador;
• se plugins sem uso podem ser removidos;
• se as páginas comerciais apresentam problemas;
• se o Search Console mostra grupos de URLs ruins;
• se as alterações foram testadas depois da implementação.

A prioridade deve estar nas páginas mais importantes para o negócio, como página inicial, serviços, produtos, formulários e conteúdos que recebem mais visitas.

Conclusão

LCP, INP e CLS ajudam a compreender como o visitante experimenta uma página durante o carregamento e a navegação.

O LCP mostra quanto tempo o conteúdo principal demora para aparecer. O INP avalia a rapidez da resposta às interações. O CLS mede se os elementos permanecem estáveis na tela.

Melhorar essas métricas exige mais do que instalar um plugin ou comprimir algumas imagens. É necessário analisar servidor, tema, códigos, recursos externos, estrutura das páginas e comportamento no celular.

Quando o site apresenta lentidão, instabilidade ou baixa resposta nas interações, uma análise de Performance e Core Web Vitals ajuda a identificar os gargalos reais, definir prioridades e aplicar correções sem depender de tentativas aleatórias.