Core Web Vitals: LCP, INP, CLS Explicados e Como Corrigi-los

31 de março de 2026 · 12 min de leitura

Core Web Vitals são as métricas oficiais do Google para medir a experiência do usuário na web. Desde que se tornaram um fator de classificação em junho de 2021, elas transformaram fundamentalmente como desenvolvedores, profissionais de SEO e proprietários de sites abordam o desempenho de páginas. Este guia abrangente detalha cada métrica, explica o que causa pontuações ruins e fornece correções concretas e práticas que você pode implementar imediatamente.

Seja você otimizando um site de e-commerce, uma plataforma de conteúdo ou uma aplicação SaaS, entender e melhorar Core Web Vitals não é mais opcional—é essencial tanto para visibilidade em buscas quanto para satisfação do usuário.

O Que São Core Web Vitals?

Core Web Vitals (CWV) são um conjunto de três métricas específicas que o Google considera essenciais para oferecer uma boa experiência ao usuário. Elas medem três dimensões críticas do desempenho de páginas que impactam diretamente como os usuários percebem e interagem com seu site.

Os três Core Web Vitals são:

• Largest Contentful Paint (LCP) — Mede o desempenho de carregamento rastreando quando o maior elemento de conteúdo visível é renderizado
• Interaction to Next Paint (INP) — Mede a interatividade avaliando quão rapidamente a página responde a todas as interações do usuário
• Cumulative Layout Shift (CLS) — Mede a estabilidade visual quantificando mudanças inesperadas de layout durante o carregamento da página

Diferentemente de testes sintéticos de laboratório que rodam em ambientes controlados, o Google avalia Core Web Vitals usando dados do mundo real de usuários reais do Chrome através do Chrome User Experience Report (CrUX). Isso significa que seu site precisa ter bom desempenho para usuários reais em dispositivos reais com condições de rede variadas—não apenas no seu ambiente de desenvolvimento.

A Evolução dos Core Web Vitals

Core Web Vitals não são estáticos. O Google originalmente incluiu First Input Delay (FID) como a métrica de interatividade, mas a substituiu por Interaction to Next Paint (INP) em março de 2024. Essa mudança reflete o compromisso do Google em medir o que realmente importa para os usuários, não apenas o que é fácil de medir.

A mudança de FID para INP foi significativa porque FID media apenas a primeira interação, enquanto INP avalia todas as interações ao longo do ciclo de vida da página. Isso fornece uma visão mais abrangente da responsividade e se correlaciona melhor com a frustração do usuário.

Por Que Core Web Vitals Importam para SEO e Negócios

Core Web Vitals fazem parte dos sinais de experiência de página do Google, que também incluem compatibilidade com dispositivos móveis, segurança HTTPS e ausência de intersticiais intrusivos. Embora relevância de conteúdo e autoridade ainda dominem os rankings, CWV atuam como desempate—quando duas páginas são igualmente relevantes, aquela com melhor desempenho vence.

Mas o impacto vai muito além dos rankings de busca. O desempenho afeta diretamente seus resultados financeiros:

Estudos de caso do mundo real demonstram esses impactos. Quando a Vodafone melhorou seu LCP em 31%, eles viram um aumento de 8% nas vendas. Quando o Yahoo Japan reduziu o CLS em 0,2, a duração da sessão aumentou 15%. Esses não são ganhos marginais—são melhorias transformadoras para o negócio.

A Realidade Mobile-First

Com a indexação mobile-first do Google, suas pontuações de Core Web Vitals em dispositivos móveis são o que mais importa. Dispositivos móveis normalmente têm processadores mais lentos, menos memória e condições de rede mais variáveis do que computadores desktop, tornando a otimização mais desafiadora, mas também mais crítica.

Usuários móveis também são menos tolerantes. Um estudo do Google descobriu que 53% dos usuários móveis abandonam sites que levam mais de 3 segundos para carregar. Core Web Vitals ruins contribuem diretamente para essas taxas de abandono.

Largest Contentful Paint (LCP)

Largest Contentful Paint mede quanto tempo leva para o maior elemento de conteúdo visível ser renderizado na viewport. Isso é tipicamente uma imagem hero, miniatura de vídeo, grande bloco de texto ou imagem de fundo. LCP é o Core Web Vital mais intuitivo porque se correlaciona diretamente com a percepção do usuário de "quando essa página carregou?"

Limites de LCP

Quais Elementos Contam como LCP?

Nem todo elemento na sua página é elegível para ser o elemento LCP. Apenas esses tipos de elementos são considerados:

• Elementos <img>
• Elementos <image> dentro de <svg>
• Elementos <video> com imagens poster
• Elementos com imagens de fundo carregadas via CSS url()
• Elementos de nível de bloco contendo nós de texto

O elemento LCP pode mudar conforme a página carrega. Inicialmente, pode ser um título de texto, mas uma vez que sua imagem hero carrega, ela se torna o novo elemento LCP. O LCP final é registrado quando o usuário começa a interagir com a página ou navega para outra.

Problemas Comuns de LCP e Soluções

Problema 1: Tempos de Resposta Lentos do Servidor

Se seu Time to First Byte (TTFB) é lento, todo o resto sofre. O navegador não pode começar a renderizar até receber o documento HTML.

Soluções:

• Use uma Content Delivery Network (CDN) para servir conteúdo de locais mais próximos aos usuários
• Implemente cache do lado do servidor com Redis ou Memcached
• Otimize consultas de banco de dados e adicione índices apropriados
• Use HTTP/2 ou HTTP/3 para multiplexação e compressão de cabeçalhos
• Considere soluções de edge computing como Cloudflare Workers ou Vercel Edge Functions

Problema 2: Recursos que Bloqueiam Renderização

Arquivos CSS e JavaScript no <head> bloqueiam a renderização até serem baixados e processados.

Soluções:

• Incorpore CSS crítico diretamente no HTML para conteúdo acima da dobra
• Adie CSS não crítico usando media="print" onload="this.media='all'"
• Adicione atributos async ou defer às tags de script
• Remova CSS e JavaScript não utilizados com ferramentas como PurgeCSS
• Divida bundles grandes em pedaços menores com code splitting

Problema 3: Arquivos de Imagem Grandes

Imagens não otimizadas são o culpado mais comum do LCP. Uma imagem hero de 5MB vai destruir sua pontuação LCP.

Soluções:

• Comprima imagens usando formatos modernos como WebP ou AVIF (70-90% menores que JPEG)
• Implemente imagens responsivas com atributos srcset e sizes
• Use CDNs de imagem que otimizam e redimensionam imagens automaticamente
• Adicione fetchpriority="high" à sua imagem LCP para priorizar seu download
• Pré-carregue imagens LCP com <link rel="preload" as="image">

Problema 4: Renderização do Lado do Cliente

Se seu elemento LCP é renderizado por JavaScript, os usuários devem esperar o JS baixar, analisar e executar antes de ver o conteúdo.

Soluções:

• Use Server-Side Rendering (SSR) ou Static Site Generation (SSG)
• Implemente streaming SSR com React Server Components ou tecnologias similares
• Use progressive enhancement—renderize uma versão básica no servidor, melhore com JavaScript
• Considere hidratação parcial para reduzir o tempo de execução do JavaScript

Otimização Avançada de LCP

Para sites que já atendem ao limite de 2,5 segundos, essas técnicas avançadas podem empurrá-lo para o nível de desempenho superior:

Resource Hints: Use <link rel="preconnect"> para origens de terceiros críticas para estabelecer conexões cedo. Use <link rel="dns-prefetch"> para origens menos críticas.

Priority Hints: O atributo fetchpriority diz ao navegador quais recursos importam mais. Defina fetchpriority="high" na sua imagem LCP e fetchpriority="low" em imagens abaixo da dobra.

103 Early Hints: Este código de status HTTP permite que servidores enviem dicas de pré-carregamento antes que a resposta principal esteja pronta, dando ao navegador uma vantagem inicial no download de recursos críticos.

Interaction to Next Paint (INP)

Interaction to Next Paint mede a responsividade da sua página às interações do usuário ao longo de todo o ciclo de vida da página. Diferentemente de seu predecessor FID, que media apenas a primeira interação, INP avalia cada clique, toque e pressionamento de tecla para fornecer uma visão abrangente da interatividade.

INP mede o tempo desde quando um usuário inicia uma interação até o navegador pintar o próximo quadro mostrando o resultado visual dessa interação. Isso inclui atraso de entrada, tempo de processamento e atraso de apresentação.

Limites de INP

Entendendo os Componentes do INP

INP consiste em três fases:

1. Atraso de Entrada: Tempo desde a ação do usuário até quando os manipuladores de eventos começam a executar (thread principal deve estar disponível)
2. Tempo de Processamento: Tempo gasto executando manipuladores de eventos e JavaScript relacionado
3. Atraso de Apresentação: Tempo desde a conclusão do manipulador até quando o navegador pinta o próximo quadro

A interação mais lenta durante uma