Core Web Vitals: LCP, INP e CLS Explicados na Prática

Um site bonito que demora para carregar, trava quando você clica ou fica "pulando" enquanto as imagens aparecem gera frustração, e o usuário vai embora. Para medir esses aspectos da experiência de forma objetiva, o Google criou os Core Web Vitals, um conjunto de três métricas que também fazem parte dos sinais considerados em seus sistemas de classificação de busca. Neste artigo, vou explicar cada uma delas, os valores recomendados e as técnicas mais eficazes para melhorá-las.

O que são os Core Web Vitals?

São métricas focadas em três dimensões da experiência do usuário:

Carregamento: LCP (Largest Contentful Paint).
Interatividade: INP (Interaction to Next Paint).
Estabilidade visual: CLS (Cumulative Layout Shift).

Um detalhe importante: em março de 2024, o INP substituiu oficialmente o antigo FID (First Input Delay) como métrica de interatividade. Muitos tutoriais antigos ainda citam o FID, então fique atento.

Para que uma página seja considerada "boa", o Google avalia o percentil 75 dos acessos reais, ou seja, pelo menos 75% das visitas devem atingir os valores recomendados.

LCP: Largest Contentful Paint

O LCP mede quanto tempo leva para o maior elemento visível da tela (normalmente uma imagem de destaque, um banner ou um bloco grande de texto) ser exibido. É a métrica que mais se aproxima da percepção do usuário de que "a página carregou".

Bom: até 2,5 segundos.
Precisa melhorar: entre 2,5 e 4 segundos.
Ruim: acima de 4 segundos.

Como melhorar o LCP

Otimize as imagens: use formatos modernos como WebP ou AVIF, comprima os arquivos e sirva tamanhos adequados para cada tela com o atributo srcset.
Priorize a imagem principal: não use loading="lazy" na imagem que aparece no topo. Ao contrário, adicione fetchpriority="high" a ela.
Reduza o tempo de resposta do servidor: use cache, uma boa hospedagem e uma CDN próxima do seu público.
Elimine recursos que bloqueiam a renderização: CSS e JavaScript carregados no head atrasam a exibição. Carregue scripts com defer ou async e minimize o CSS crítico.
Cuidado com fontes web: use font-display: swap e pré-conecte aos servidores de fontes.

INP: Interaction to Next Paint

O INP mede a rapidez com que a página responde visualmente às interações do usuário, como cliques, toques e teclas pressionadas, ao longo de toda a visita. Ele considera o tempo entre a interação e a próxima atualização da tela, e reporta um valor representativo das interações mais lentas.

Bom: até 200 milissegundos.
Precisa melhorar: entre 200 e 500 milissegundos.
Ruim: acima de 500 milissegundos.

Um INP ruim é aquela sensação de clicar em um botão e nada acontecer por um instante. A causa mais comum é o excesso de JavaScript ocupando a thread principal do navegador, que é a mesma responsável por responder aos cliques e desenhar a tela.

Como melhorar o INP

Reduza o JavaScript: remova bibliotecas que não são necessárias e carregue código apenas nas páginas que o utilizam (code splitting).
Quebre tarefas longas: tarefas que ocupam a thread principal por mais de 50 ms prejudicam a resposta. Divida processamentos pesados em partes menores.
Dê feedback visual imediato: atualize a interface primeiro (por exemplo, mostrando um indicador de carregamento) e faça o processamento pesado depois.
Revise scripts de terceiros: widgets de chat, pixels de rastreamento e anúncios podem pesar bastante. Avalie se todos são necessários.
Evite manipulações excessivas do DOM e páginas com quantidades enormes de elementos.

CLS: Cumulative Layout Shift

O CLS mede a estabilidade visual: o quanto os elementos da página mudam de posição inesperadamente durante o carregamento. Sabe quando você vai clicar em um link e, de repente, um anúncio aparece e empurra tudo para baixo, fazendo você clicar no lugar errado? Isso é layout shift.

Bom: até 0,1.
Precisa melhorar: entre 0,1 e 0,25.
Ruim: acima de 0,25.

Como melhorar o CLS

Defina dimensões para imagens e vídeos: use os atributos width e height ou a propriedade CSS aspect-ratio, para que o navegador reserve o espaço antes do carregamento.
Reserve espaço para anúncios e embeds: defina uma altura mínima para os blocos de anúncio e iframes. Isso é especialmente importante em sites com Google AdSense.
Evite inserir conteúdo acima do que já está na tela, como banners que surgem no topo depois do carregamento.
Cuidado com fontes: a troca da fonte padrão pela fonte personalizada pode alterar o tamanho do texto. Pré-carregue as fontes principais e escolha fontes de fallback com métricas parecidas.
Prefira animações com transform: animar propriedades como top, height ou margin causa reposicionamento, enquanto transform e opacity não.

Dados de laboratório x dados de campo

É importante entender a diferença entre dois tipos de medição:

Dados de laboratório: testes simulados em condições controladas, como os do Lighthouse. São ótimos para diagnosticar problemas durante o desenvolvimento.
Dados de campo: coletados de usuários reais do Chrome, no relatório chamado CrUX (Chrome User Experience Report). São esses dados que o Google usa na avaliação oficial.

Como o INP depende de interações reais, ele só aparece nos dados de campo. Em testes de laboratório, a métrica Total Blocking Time (TBT) é um bom indicador aproximado.

Ferramentas para medir

PageSpeed Insights: mostra dados de campo (quando o site tem tráfego suficiente) e de laboratório, com sugestões de melhoria.
Google Search Console: o relatório de Core Web Vitals agrupa as páginas do seu site por status e mostra quais precisam de atenção.
Lighthouse: disponível nas ferramentas de desenvolvedor do Chrome (F12), na aba Lighthouse.
Biblioteca web-vitals: uma pequena biblioteca JavaScript do Google para medir as métricas dos seus próprios usuários e enviá-las para uma ferramenta de análise.

Outras otimizações que ajudam todas as métricas

Além das ações específicas para cada métrica, algumas práticas melhoram a performance como um todo:

Reduza o número de requisições: cada arquivo extra é uma nova ida ao servidor, o que pesa principalmente em conexões móveis. Agrupe scripts quando fizer sentido, use ícones em SVG inline em vez de bibliotecas inteiras de ícones e remova arquivos que não são usados.
Aproveite o cache do navegador: configure cabeçalhos de cache para arquivos estáticos, como CSS, JavaScript, fontes e imagens. Assim, quem volta ao site não precisa baixar tudo de novo.
Use lazy loading com critério: o atributo loading="lazy" é ótimo para imagens e iframes que ficam abaixo da primeira tela, mas, como vimos, nunca deve ser usado na imagem principal.
Comprima as respostas: servidores e CDNs modernos oferecem compressão Gzip ou Brotli, que reduz bastante o tamanho de HTML, CSS e JavaScript.

Responsividade e indexação mobile-first

Não dá para falar de experiência de página sem falar de celular. O Google usa a indexação mobile-first: ele considera prioritariamente a versão móvel do seu site para indexar e classificar as páginas. Se o conteúdo, os links ou os dados estruturados existem só na versão desktop, para o Google é como se eles não existissem.

Na prática, isso significa:

Use a meta tag viewport (<meta name="viewport" content="width=device-width, initial-scale=1">) e layouts fluidos com unidades relativas e media queries.
Garanta o mesmo conteúdo no celular e no desktop, inclusive títulos, textos, imagens com alt e links internos.
Textos legíveis sem zoom e botões e links com área de toque confortável, sem elementos colados uns nos outros.
Nada de rolagem horizontal: imagens, tabelas e blocos de código devem caber na tela ou ter rolagem própria.
Teste sempre em dispositivos reais ou no modo de dispositivo das ferramentas de desenvolvedor do navegador, e não só na tela do computador.

As métricas de campo do Google também são separadas por tipo de dispositivo, e é comum um site ter bons resultados no desktop e ruins no celular, onde os processadores são mais lentos e as conexões, mais instáveis. Por isso, priorize sempre a avaliação móvel.

Core Web Vitals e SEO

As métricas fazem parte dos sinais de experiência de página considerados pelo Google, mas é preciso ter perspectiva: conteúdo relevante e de qualidade continua sendo o fator mais importante. Uma página extremamente rápida com conteúdo fraco não vai ranquear bem. Por outro lado, entre páginas com conteúdo de qualidade semelhante, a experiência pode fazer diferença. E, independentemente do SEO, sites rápidos e estáveis têm menores taxas de abandono e mais conversões.

Conclusão

Os Core Web Vitals traduzem em números aquilo que o usuário sente ao usar seu site: se ele carrega rápido (LCP), responde rápido (INP) e se mantém estável (CLS). Comece medindo com o PageSpeed Insights, ataque primeiro os problemas mais graves, que geralmente são imagens pesadas e excesso de JavaScript, e acompanhe a evolução no Search Console. Pequenas melhorias somadas fazem uma grande diferença na experiência.