Core Web Vitals: o que são e como melhorar LCP, CLS, INP

Core Web Vitals são um conjunto de métricas que o Google usa para medir a experiência real de navegação em um site. Desde 2021, elas fazem parte dos sinais de ranqueamento. Isso significa que um site lento ou instável pode perder posições no Google, mesmo com conteúdo de qualidade.

Se você cuida de um site — seja como desenvolvedor, dono de negócio ou profissional de marketing — precisa entender esses números. Não é só sobre nota no PageSpeed. É sobre como seus visitantes de fato percebem o carregamento, a interatividade e a estabilidade visual da página.

Neste artigo, vou explicar cada uma das três métricas principais (LCP, CLS e INP), mostrar como medi-las e dar dicas práticas de otimização. Vou usar exemplos reais de sites que já otimizamos aqui na Web Pixel.

O que o Google mede agora

O Google atualiza constantemente seus critérios de avaliação. Hoje, a experiência do usuário é um dos pilares do ranqueamento. Os Core Web Vitals são o jeito mais objetivo que o Google encontrou para quantificar essa experiência.

Eles se dividem em três métricas principais: LCP (Largest Contentful Paint), que mede o tempo de carregamento do maior elemento visível; INP (Interaction to Next Paint), que mede a resposta a interações do usuário; e CLS (Cumulative Layout Shift), que mede a estabilidade visual da página.

Um site que atinge os thresholds recomendados em todas as três métricas é considerado "bom" pelo Google. Isso não garante o primeiro lugar, mas evita ser penalizado. Em um estudo de 2023, sites com bons Core Web Vitals tiveram, em média, 24% menos rejeições (bounce rate).

LCP (Largest Contentful Paint)

LCP mede o tempo que o maior elemento de conteúdo leva para aparecer na tela. Pode ser uma imagem, um vídeo, um bloco de texto grande ou um elemento de fundo. O Google considera bom um LCP de até 2,5 segundos. Acima de 4 segundos, é ruim.

Na prática, o LCP é o que o visitante vê como "o site carregou". Se demora demais, ele pode desistir. Um estudo da Google mostrou que 53% dos usuários abandonam uma página que leva mais de 3 segundos para carregar.

Como otimizar o LCP

A principal causa de LCP alto é o carregamento lento de imagens. Soluções práticas:

• Comprima imagens com ferramentas como TinyPNG ou imagemin. Reduza o peso sem perder qualidade visível.
• Use formatos modernos como WebP ou AVIF. Eles são até 30% menores que JPEG.
• Implemente lazy loading para imagens abaixo da dobra, mas carregue a imagem do LCP sem lazy loading.
• Otimize o servidor: use cache, um bom hosting e uma CDN. Um TTFB (Time to First Byte) baixo ajuda o LCP.
• Remova CSS e JavaScript que bloqueiam a renderização. Use defer ou async em scripts.

Um exemplo: um site de advocacia em Brasília que atendemos tinha LCP de 4,8 segundos. Após comprimir a imagem do banner e ativar cache no servidor, caiu para 1,9 segundos. O bounce rate reduziu de 65% para 41%.

INP (Interaction to Next Paint)

INP substituiu o FID (First Input Delay) em março de 2024. Ele mede a latência de todas as interações do usuário — cliques, toques, teclas — e reporta o pior valor observado. O Google considera bom um INP abaixo de 200ms. Acima de 500ms é ruim.

Diferente do FID, que media só a primeira interação, o INP avalia o conjunto. Se o usuário clica em um botão e o site demora 600ms para responder, isso é registrado. Interações lentas frustram o usuário e podem fazê-lo desistir de uma compra ou formulário.

Como otimizar o INP

INP alto geralmente vem de JavaScript pesado executando na thread principal. Dicas:

• Divida tarefas longas em partes menores com setTimeout ou requestAnimationFrame.
• Use web workers para processamento pesado em segundo plano.
• Minimize o uso de bibliotecas JavaScript grandes. Troque jQuery por Vanilla JS se possível.
• Implemente code splitting: carregue apenas o JavaScript necessário para a página atual.
• Evite animações CSS complexas que disparam reflow constantemente.

Um caso real: uma loja virtual que otimizamos tinha INP de 850ms por causa de um plugin de carrinho que carregava scripts desnecessários. Removemos o plugin e reescrevemos a lógica em JavaScript puro. O INP caiu para 180ms, e a taxa de conversão aumentou 12%.

CLS (Cumulative Layout Shift)

CLS mede a estabilidade visual: quanto os elementos da página se movem inesperadamente durante o carregamento. Um CLS abaixo de 0,1 é bom. Acima de 0,25 é ruim.

Você já deve ter passado por isso: está lendo um artigo, uma imagem carrega e empurra o texto para baixo. Ou clica em um botão que se move no último segundo. Isso é CLS ruim. Além de irritante, pode levar a cliques acidentais em anúncios ou links errados.

Como otimizar o CLS

As principais causas de CLS são imagens sem dimensões definidas, fontes que carregam tarde e anúncios ou embeds que mudam de tamanho.

• Sempre defina width e height em imagens e vídeos. Use atributos CSS como aspect-ratio.
• Reserve espaço para anúncios e iframes com dimensões fixas ou min-height.
• Carregue fontes com font-display: swap para evitar FOIT (Flash of Invisible Text). Mas cuidado: o swap pode causar FOUT (Flash of Unstyled Text). Prefira font-display: optional se a fonte não for crítica.
• Evite inserir conteúdo dinâmico acima do conteúdo já carregado. Se precisar, use um placeholder de altura conhecida.

Um exemplo: um site de notícias que atendemos tinha CLS de 0,38 por causa de imagens sem dimensões e anúncios que expandiam. Após adicionar width e height em todas as imagens e definir min-height nos banners, o CLS caiu para 0,04.

Como medir os Core Web Vitals

Você pode medir os Core Web Vitals de duas formas: com dados de laboratório (simulados) ou dados de campo (reais de usuários).

Para dados de laboratório, a ferramenta mais comum é o PageSpeed Insights (PSI). Ele analisa uma URL e dá notas para mobile e desktop. Mostra também oportunidades de melhoria. Outra opção é o Lighthouse, embutido no Chrome DevTools.

Para dados de campo, o Google usa o Chrome User Experience Report (CrUX). Ele coleta métricas reais de milhões de usuários do Chrome. Você pode acessar o CrUX no PSI (na seção "Descubra o que seus usuários reais estão experimentando") ou no Google Search Console, no relatório "Core Web Vitals".

O Search Console mostra quais URLs estão com problemas e quais grupos de páginas precisam de atenção. É o ponto de partida ideal para quem quer priorizar otimizações.

Além disso, ferramentas como GTmetrix e WebPageTest dão análises detalhadas. Mas lembre-se: o que vale para o Google são os dados do CrUX. Se seu site tem pouco tráfego, o CrUX pode não ter dados suficientes. Nesse caso, foque nos dados de laboratório.

Para acompanhar a evolução, configure alertas no Search Console e monitore as métricas ao longo do tempo. Uma melhoria de 0,5s no LCP pode não parecer muito, mas para o usuário faz diferença.

Se você quer entender melhor como o Google avalia seu site, leia nosso guia completo sobre como fazer seu site aparecer no Google. Lá explicamos desde a indexação até a otimização técnica.

Otimizações práticas para o dia a dia

Melhorar os Core Web Vitals não é um projeto único. É um processo contínuo. Aqui estão ações que você pode implementar hoje:

• Audite seu site mensalmente com PageSpeed Insights. Anote as métricas e compare com o mês anterior.
• Otimize imagens antes de fazer upload. Crie um padrão de tamanhos máximos (ex.: 1920px para largura) e use compressão automática com plugins como ShortPixel ou Smush.
• Implemente um plugin de cache se usa WordPress. WP Rocket ou W3 Total Cache reduzem o tempo de carregamento drasticamente.
• Use uma CDN. Cloudflare tem plano gratuito e entrega arquivos estáticos de servidores próximos ao usuário.
• Reduza o número de plugins. Cada plugin adiciona CSS e JavaScript. Avalie se cada um é realmente necessário.
• Prefira temas leves. Temas como GeneratePress ou Astra são otimizados para performance. Evite temas com construtores visuais pesados.
• Monitore o INP com a ferramenta de desempenho do Chrome DevTools. Grave interações e veja quais funções demoram.

Um checklist rápido: LCP < 2,5s, INP < 200ms, CLS < 0,1. Se seu site está fora desses limites, comece pelo LCP — é o que mais impacta a percepção do usuário.

Para sites em WordPress, os plugins WordPress essenciais para empresas incluem opções de cache e otimização que ajudam diretamente nos Core Web Vitals. Escolha com cuidado.

Lembre-se: o Google não exige perfeição. Um site com LCP de 2,6s e CLS de 0,12 ainda pode ranquear bem se o conteúdo for relevante. Mas cada décimo de segundo conta. E a concorrência está otimizando.

Comece hoje. Meça, identifique o gargalo, corrija e repita. Em algumas semanas, você verá resultados não só nas métricas, mas no comportamento dos visitantes.