Técnico

Core Web Vitals: Guia Completo para Melhorar Performance e Conversão

Core Web Vitals afetam diretamente conversão e receita. Aprenda a melhorar LCP, INP e CLS com ações concretas e veja o impacto no seu negócio.

Por Marco Antonio Claro Santos · Fundador e estrategista de SEO B2B da MarkSaint.

Core Web Vitals são um conjunto de métricas definidas pelo Google para medir a qualidade da experiência do usuário em páginas web. Essas métricas avaliam velocidade de carregamento, interatividade e estabilidade visual, e são fatores de rankeamento confirmados desde 2021. Neste guia, você vai aprender o que cada métrica significa, como diagnosticá-las e quais otimizações implementar para melhorar tanto o SEO quanto a taxa de conversão do seu site.

Muitos gestores ainda tratam os Core Web Vitals como "coisas de desenvolvedor". Esse é um erro estratégico. A performance do site impacta diretamente métricas de negócio: taxa de rejeição, tempo na página, conversões e, consequentemente, receita. Estudos do Google mostram que sites que atendem aos limiares de Core Web Vitals têm 24% menos abandono de página.

O Que São Core Web Vitals e Por Que Importam?

Os Core Web Vitals são três métricas específicas que o Google considera essenciais para uma boa experiência do usuário. Diferente de outras métricas de performance, essas três são oficialmente fatores de rankeamento e aparecem no Google Search Console como indicadores de qualidade do seu site.

A importância dessas métricas vai além do SEO. Elas refletem a percepção real do usuário sobre a qualidade do seu site. Um site lento ou instável transmite falta de profissionalismo e reduz a confiança do visitante, especialmente em contextos B2B onde decisões de compra envolvem alto valor.

LCP (Largest Contentful Paint): Velocidade de Carregamento

O LCP mede o tempo que leva para o maior elemento visível da página ser renderizado na tela. Geralmente, esse elemento é uma imagem hero, um vídeo ou um bloco de texto grande. O LCP é a métrica que mais se correlaciona com a percepção do usuário sobre "o site carregou".

Os limiares definidos pelo Google são:

• Bom: Até 2.5 segundos
• Precisa melhorar: Entre 2.5 e 4 segundos
• Ruim: Acima de 4 segundos

Para a maioria dos sites, o LCP é a métrica mais difícil de otimizar porque depende de múltiplos fatores: tempo de resposta do servidor, tamanho dos recursos, ordem de carregamento e capacidade de renderização do navegador.

INP (Interaction to Next Paint): Responsividade

O INP substituiu o FID (First Input Delay) em março de 2024 como métrica oficial de responsividade. Enquanto o FID media apenas a primeira interação, o INP avalia todas as interações do usuário durante toda a sessão, reportando a latência da pior interação (excluindo outliers).

Os limiares do INP são:

• Bom: Até 200 milissegundos
• Precisa melhorar: Entre 200 e 500 milissegundos
• Ruim: Acima de 500 milissegundos

Um INP ruim significa que o usuário clica em um botão e nada acontece por meio segundo ou mais. Essa latência é percebida como "travamento" e aumenta drasticamente a taxa de abandono, especialmente em formulários de contato e processos de checkout.

CLS (Cumulative Layout Shift): Estabilidade Visual

O CLS mede a quantidade de movimento inesperado de elementos na página durante o carregamento. Quando você está prestes a clicar em um botão e ele "pula" porque uma imagem carregou acima, isso é um layout shift. Além de frustrante, pode causar cliques acidentais em elementos errados.

Os limiares do CLS são:

• Bom: Até 0.1
• Precisa melhorar: Entre 0.1 e 0.25
• Ruim: Acima de 0.25

O CLS é geralmente a métrica mais fácil de corrigir, mas também a mais negligenciada. Causas comuns incluem imagens sem dimensões definidas, anúncios que carregam tardiamente e fontes web que causam FOUT (Flash of Unstyled Text).

Como Diagnosticar Problemas de Core Web Vitals

Antes de otimizar, é essencial entender onde estão os problemas. Existem duas categorias de dados: dados de laboratório (sintéticos) e dados de campo (usuários reais). Ambos são importantes, mas o Google usa dados de campo para rankeamento.

Ferramentas de Diagnóstico Essenciais

Para uma análise completa, utilize estas ferramentas em conjunto:

• Google Search Console: Mostra dados de campo agregados e identifica páginas com problemas. É a fonte oficial para entender como o Google vê seu site.
• PageSpeed Insights: Combina dados de campo (CrUX) com análise de laboratório (Lighthouse), oferecendo tanto o diagnóstico quanto recomendações de correção.
• Chrome DevTools: Permite análise detalhada em tempo real, identificando exatamente quais elementos e scripts causam problemas.
• Web Vitals Extension: Extensão do Chrome que mostra as métricas em tempo real enquanto você navega.

A auditoria técnica da MarkSaint inclui análise completa de Core Web Vitals com recomendações priorizadas por impacto.

Estratégias de Otimização para Cada Métrica

Cada métrica exige abordagens específicas de otimização. A seguir, as técnicas mais eficazes para cada uma delas.

Como Melhorar o LCP

O LCP é afetado por quatro fatores principais: tempo de resposta do servidor, bloqueio de renderização por recursos, tempo de carregamento de recursos e renderização no cliente. As otimizações mais eficazes são:

• Otimizar imagens: Converter para WebP/AVIF, definir dimensões explícitas, usar srcset para responsividade e implementar lazy loading para imagens abaixo da dobra.
• Preload de recursos críticos: Usar <link rel="preload"> para fontes, imagens hero e CSS crítico.
• Otimizar TTFB: Implementar cache de servidor, usar CDN e otimizar queries de banco de dados.
• Eliminar render-blocking: Inline CSS crítico, defer JavaScript não essencial e remover CSS/JS não utilizados.

Em nossa experiência, a otimização de imagens sozinha pode melhorar o LCP em 40-60% na maioria dos sites.

Como Melhorar o INP

O INP é principalmente afetado por JavaScript pesado que bloqueia a thread principal. As otimizações mais eficazes são:

• Quebrar long tasks: Dividir tarefas JavaScript longas (>50ms) em chunks menores usando requestIdleCallback ou scheduler.yield().
• Reduzir JavaScript de terceiros: Auditar e remover scripts de analytics, chat e tracking desnecessários ou carregá-los de forma assíncrona.
• Otimizar event handlers: Usar debounce/throttle em handlers de scroll e resize, e evitar manipulação DOM excessiva.
• Code splitting: Carregar apenas o JavaScript necessário para cada página, não o bundle completo da aplicação.

Scripts de terceiros são frequentemente os maiores vilões do INP. Um único widget de chat pode adicionar 300ms de latência em interações.

Como Melhorar o CLS

O CLS é causado por elementos que mudam de posição após o carregamento inicial. As correções mais comuns são:

• Definir dimensões de imagens: Sempre incluir atributos width e height em tags <img> ou usar aspect-ratio em CSS.
• Reservar espaço para anúncios: Definir containers com altura mínima para slots de anúncio antes do carregamento.
• Evitar inserção dinâmica: Não inserir conteúdo acima de conteúdo existente, especialmente banners e notificações.
• Otimizar fontes web: Usar font-display: swap com fallback de fonte similar para evitar FOUT significativo.

A maioria dos problemas de CLS pode ser resolvida em poucas horas de trabalho técnico, com impacto imediato na experiência do usuário.

Impacto dos Core Web Vitals na Receita: Estudo de Caso

Para ilustrar o impacto real dessas otimizações, apresentamos um caso de um e-commerce B2B do setor de peças industriais que atendemos.

Situação Inicial

O site apresentava métricas críticas que impactavam diretamente as conversões:

• LCP: 4.5 segundos (ruim)
• INP: 380ms (ruim)
• CLS: 0.25 (ruim)
• Taxa de rejeição: 68%
• Taxa de conversão (solicitação de orçamento): 1.2%

O site carregava 4.2MB de recursos na homepage, incluindo 12 scripts de terceiros e imagens não otimizadas.

Otimizações Implementadas

Durante 3 semanas, implementamos um conjunto de otimizações técnicas:

• Conversão de todas as imagens para WebP com compressão otimizada
• Implementação de lazy loading para imagens abaixo da dobra
• Remoção de 7 scripts de terceiros desnecessários
• Code splitting do JavaScript principal
• Implementação de CDN com cache agressivo
• CSS crítico inline e defer do restante
• Definição de dimensões explícitas em todas as imagens

O peso total da página foi reduzido de 4.2MB para 890KB.

Resultados Após 30 Dias

Os resultados foram significativos tanto em métricas técnicas quanto em métricas de negócio:

• LCP: 1.2 segundos (melhoria de 73%)
• INP: 95ms (melhoria de 75%)
• CLS: 0.05 (melhoria de 80%)
• Taxa de rejeição: 42% (redução de 26 pontos percentuais)
• Taxa de conversão: 1.49% (aumento de 24%)

Com ticket médio de R$ 15.000 e aproximadamente 200 solicitações de orçamento por mês, o aumento de 24% na taxa de conversão representou um incremento potencial de R$ 720.000 em pipeline anual.

Perguntas Frequentes sobre Core Web Vitals

Core Web Vitals afetam o rankeamento no Google?

Sim, os Core Web Vitals são fatores de rankeamento confirmados pelo Google desde junho de 2021. Porém, eles são um fator entre muitos. Conteúdo relevante e backlinks ainda têm peso maior. A melhor forma de pensar é: Core Web Vitals são um "desempate" entre páginas com conteúdo similar.

Qual a diferença entre dados de campo e dados de laboratório?

Dados de laboratório (Lighthouse, PageSpeed Insights) são coletados em ambiente controlado e são úteis para diagnóstico. Dados de campo (CrUX, Search Console) são coletados de usuários reais e são o que o Google usa para rankeamento. Foque em melhorar os dados de campo.

Quanto tempo leva para o Google reconhecer melhorias?

O Google coleta dados de campo em janelas de 28 dias. Após implementar otimizações, pode levar de 28 a 56 dias para que as melhorias sejam refletidas no Search Console e potencialmente impactem o rankeamento.

Preciso passar em todas as métricas para ter benefício de SEO?

Idealmente sim, mas qualquer melhoria ajuda. O Google avalia as métricas no nível de página e de origem (domínio). Se a maioria das suas páginas passa, você terá benefício mesmo que algumas páginas específicas falhem.

Próximos Passos para Otimizar seu Site

A otimização de Core Web Vitals é um investimento com retorno mensurável. Além do impacto em SEO, sites rápidos e estáveis convertem melhor, retêm usuários por mais tempo e transmitem profissionalismo.

Se seu site apresenta métricas ruins no Google Search Console, ou se você quer entender o impacto potencial de otimizações de performance na sua taxa de conversão, considere realizar uma auditoria técnica. A metodologia da MarkSaint inclui diagnóstico completo de Core Web Vitals com recomendações priorizadas por impacto e facilidade de implementação.