Core Web Vitals: o que é, como funciona e boas práticas com ferramentas

# Core Web Vitals: o que é, como funciona e boas práticas com [ferramentas](https://clubmartech.com.br/blog/ferramentas-heatmap-converter-receita/)[Performance](https://clubmartech.com.br/blog/performance-otimizacao-times-estrategico/) deixou de ser assunto exclusivo de dev e virou variável direta de aquisição e [conversão](https://clubmartech.com.br/blog/conversao-clientes-extrair-trafego/). Quando uma landing page demora a exibir o [conteúdo](https://clubmartech.com.br/blog/conteudo-longo-prazo-anos/) principal, responde lento ao clique ou desloca elementos na tela, você perde cliques pagos, reduz [taxa de conversão](https://clubmartech.com.br/significado/taxa-conversao/) e piora sinais de [experiência](https://clubmartech.com.br/blog/experiencia-funcionario-vantagem-cliente/) para o Google. **

** são as três métricas padronizadas pelo Google para medir essa experiência real: LCP (carregamento), INP (interatividade) e CLS (estabilidade visual). Cada uma tem um limite claro, avaliado no percentil 75 das visitas reais, separado por mobile e desktop.## O que são Core Web VitalsCore Web Vitals são um subconjunto das Web Vitals que foca em três dimensões críticas da [experiência do usuário](https://clubmartech.com.br/significado/experiencia-usuario/), medidas preferencialmente com dados de campo (uso real). A recomendação padrão é avaliar se a página atinge os limites no **percentil 75 (p75)**, segmentando por mobile e desktop.O Google utiliza Core Web Vitals como sinal de ranqueamento, mas deixa claro que eles não substituem relevância e qualidade de conteúdo. Na prática: melhorar Core Web Vitals aumenta suas chances quando a disputa é acirrada, mas não compensa conteúdo fraco.### Quais são as métricas e os limites que importam

• **LCP (Largest Contentful Paint)**: mede quando o maior elemento de conteúdo visível — geralmente a hero image ou bloco principal — é renderizado. Meta: ≤ 2,5 s no p75.
• **INP (Interaction to Next Paint)**: mede a responsividade ao longo da sessão, observando a latência das interações e reportando um valor representativo com foco na pior interação. Meta: ≤ 200 ms no p75.
• **CLS (Cumulative Layout Shift)**: mede estabilidade visual somando mudanças inesperadas de layout. Meta: ≤ 0,1 no p75.

### Para que servem no contexto de SEO e MartechNo contexto de SEO, Growth e Martech, Core Web Vitals servem para três objetivos operacionais:

• Priorizar dívida técnica com critério de impacto real na experiência percebida, não só tempo total de carregamento.
• Padronizar comunicação entre Marketing e Engenharia com métricas comparáveis e rastreáveis.
• Monitorar qualidade de releases em páginas de aquisição: home, landing pages de mídia paga, checkout e signup.

### O que Core Web Vitals não é

• **Não é a nota do PageSpeed ou Lighthouse.** A pontuação é um agregado de auditorias e pode variar; o que determina o status em Core Web Vitals é a métrica real (LCP, INP, CLS) em dados de campo.
• **Não é só velocidade de servidor.** LCP e INP geralmente são limitados por front-end, imagens, JavaScript e scripts de terceiros.
• **Não é garantia de ranqueamento melhor.** O Google reforça que há muito mais na experiência e no ranking do que essas três métricas.

### Onde se encaixa no stack modernoNa prática, Core Web Vitals vira um KPI de qualidade da experiência que conecta:

• SEO Técnico (indexação, arquitetura, performance).
• CRO e Performance Marketing (taxa de conversão por dispositivo, campanhas e templates).
• Tag management e analytics (GTM, pixels, scripts de chat, testes A/B), que impactam principalmente INP.
• Data e BI (dashboards e alertas com CrUX, Search Console e RUM).

## Como Core Web Vitals funcionaPara operacionalizar Core Web Vitals, você precisa entender de onde vêm os dados e como transformar isso em um ciclo contínuo de melhoria.### Dados de campo vs. dados de laboratório**Dados de campo** vêm de usuários reais e refletem dispositivos, redes e comportamentos reais. São a base do relatório de Core Web Vitals no Search Console, que agrupa URLs por similaridade e classifica como "Ruim", "Melhorias necessárias" e "Bom".**Dados de laboratório** vêm de testes controlados (simulação) e são ideais para diagnóstico e reprodução. Ferramentas como o Lighthouse no Chrome DevTools rodam auditorias e sugerem oportunidades de melhoria.A regra prática: use campo para priorizar e laboratório para debugar.### O modelo de avaliação: p75 e segmentaçãoO padrão recomendado é mirar no percentil 75 das visitas, segmentando por mobile e desktop. Isso evita otimizar para a média enquanto uma fatia grande de usuários ainda sofre.No Search Console, os dados são agrupados por grupos de URLs semelhantes e o status do grupo é determinado pela pior métrica. Não adianta ter LCP bom se o grupo está "Ruim" por CLS.### Um fluxo operacional que funcionaA forma mais eficiente de aplicar Core Web Vitals é tratar como um processo contínuo, não como um projeto pontual:

1. **Descobrir**: identifique templates com pior status (ex.: /lp/, /produto/, /checkout/) no Search Console.
2. **Quantificar impacto**: cruze com sessões, receita, leads e CAC por página via GA4, CRM ou BI.
3. **Diagnosticar**: reproduza o problema em laboratório com Lighthouse e DevTools.
4. **Corrigir**: implemente mudanças focadas na métrica problemática (LCP, INP ou CLS).
5. **Validar**: re-teste em laboratório e monitore a evolução em campo (pode levar dias ou semanas para refletir).
6. **Evitar regressão**: coloque portões de performance no CI/CD.

### O que costuma causar problema em cada métrica**LCP piora por:**

• Imagem hero pesada sem otimização de formato ou dimensões.
• CSS e JS bloqueando renderização.
• TTFB alto ou cache mal configurado.

**INP piora por:**

• Tarefas longas de JavaScript ocupando a main thread.
• Scripts de terceiros adicionando listeners e processamento (tag manager, heatmaps, chat).
• Re-renderizações pesadas em frameworks.

**CLS piora por:**

• Imagens e iframes sem dimensões definidas.
• Anúncios e embeds injetados sem reservar espaço.
• Fontes carregando e trocando o layout antes de estabilizar.

### Como times de marketing medem Core Web Vitals sem depender 100% de devDuas alavancas práticas:

• **Instrumentação RUM** com a biblioteca web-vitals para medir usuários reais e enviar para seu stack de analytics. Isso permite segmentar Core Web Vitals por campanha, dispositivo, país e variações de teste A/B.
• **Dados agregados do CrUX** via API ou BigQuery para benchmark e tendências, com janelas de agregação e atualização periódica.

Se você já opera um dashboard semanal, a lógica é direta: Core Web Vitals entra como um Quality Gate de aquisição, ao lado de CTR, CVR e CPA.## Boas práticas para Core Web Vitals### Defina metas por tipo de página, não uma meta única para o siteCrie uma matriz de prioridade:

• **Landing pages de mídia paga**: prioridade máxima — impacto direto em CAC e conversão.
• **Páginas de produto e categoria**: prioridade alta — SEO e receita.
• **Blog**: prioridade média — alto tráfego, menor criticidade transacional.

Se a página representa alto volume de sessões e tem Core Web Vitals "Ruim", ela entra no próximo sprint, mesmo que a nota do Lighthouse pareça aceitável.### Priorize por impacto x esforço com dados de campoTrês critérios para priorizar:

• **Impacto**: sessões, conversões, receita, leads qualificados e páginas de entrada.
• **Severidade**: quão longe do limite a métrica está (LCP de 4,5 s é pior que 2,8 s).
• **Efeito em cadeia**: templates compartilhados como header, hero e componentes globais.

O Search Console agrupa URLs e ajuda a atacar problemas repetidos em lote, o que multiplica o retorno de cada correção.### Controle scripts de terceiros com rigor (especialmente para INP)Em martech, o vilão recorrente é "só mais uma tag". INP piora quando a main thread fica ocupada com tarefas longas disparadas por scripts externos.Boas práticas concretas:

• Inventarie tudo que roda via GTM: analytics, pixels, chat, heatmap, testes A/B, CDP.
• Elimine duplicidades — dois pixels fazendo a mesma coisa é desperdício e degradação.
• Carregue por gatilhos reais (ex.: carregar chat somente após intenção de contato).
• Crie um SLA interno: nenhuma tag entra sem dono, objetivo e critério de remoção.

### Separe medição para decisão de medição para debug**Para decisão (campo):**

• Relatório de Core Web Vitals no Search Console para status e tendência por grupos de URLs.
• CrUX API para automações, alertas e dashboards de BI.

**Para debug (laboratório):**

• Lighthouse no DevTools para reproduzir e listar oportunidades, com atenção para variações entre execuções.
• DevTools Performance com métricas ao vivo e comparação com dados de campo.

### Coloque portões de performance no CI/CD para evitar regressõesO maior erro operacional é otimizar hoje e regredir amanhã com um novo deploy.

• **Lighthouse CI**: rode auditorias a cada PR e falhe o pipeline quando métricas regressarem além do limite definido.
• Orçamentos simples: limite de KB para imagens críticas, limite de JS total por rota e limites mínimos de score em cenários-chave.

### Checklist de correções por métrica**Para LCP:**

• Otimize e sirva imagens no formato adequado (WebP, AVIF) com dimensões corretas.
• Priorize o recurso LCP com preload quando fizer sentido.
• Reduza bloqueios de render com CSS crítico inline e remoção de CSS não utilizado.

**Para INP:**

• Divida tarefas longas de JS em partes menores para liberar a main thread.
• Reduza listeners e trabalho síncrono em eventos de input.
• Audite componentes e scripts de terceiros que executam durante a interação.

**Para CLS:**

• Sempre defina largura e altura de imagens, iframes e embeds.
• Reserve espaço para banners, anúncios e componentes injetados dinamicamente.
• Gerencie fontes para evitar trocas de layout perceptíveis (font-display: optional ou swap com fallback ajustado).

### Crie indicadores de maturidade para gestão e RevOpsUm modelo simples de maturidade em quatro níveis:

• **Nível 1 — Reativo**: roda PageSpeed manualmente quando “fica lento”.
• **Nível 2 — Monitorado**: acompanha Search Console e corrige por grupos de URLs.
• **Nível 3 — Gerenciado**: tem metas por template, dashboards e rotinas semanais.
• **Nível 4 — Automatizado**: CI com budgets, instrumentação RUM e alertas proativos.

Para reporting de liderança, foque em: percentual de URLs com status "Bom", tendência de p75 por template e impacto estimado em conversão.## Ferramentas para Core Web VitalsA escolha errada de ferramenta cria ruído e decisões ruins. Aqui está o mapa de quando usar cada uma.### Monitoramento (dados de campo)

• **Relatório de Core Web Vitals no Search Console**: melhor para priorização por grupos de URLs e acompanhamento de tendência.
• **CrUX API**: melhor para automações e integrações com BI e dashboards customizados.
• **CrUX no BigQuery**: melhor para análises históricas, benchmark competitivo e recortes por dimensões disponíveis.

### Diagnóstico (laboratório)

• **Lighthouse (DevTools e CLI)**: auditoria e oportunidades, útil para reproduzir e medir antes e depois de uma correção.
• **DevTools Performance com métricas ao vivo**: útil para capturar INP e CLS enquanto você interage e navega na página.

### Automação e governança

• **Lighthouse CI**: essencial para impedir regressões e criar disciplina no ciclo de deploy.

### Testes avançados e comparação

• **WebPageTest**: útil para testes detalhados, incluindo comparação com dados de campo quando disponível e filmstrips de carregamento.

### Instrumentação RUM

• **Biblioteca web-vitals**: mede Web Vitals em usuários reais e facilita o envio para analytics e tag management, com suporte a segmentação por campanha e dispositivo.

**Regra prática de seleção**: se a pergunta é "onde priorizar?", use Search Console e CrUX. Se a pergunta é "por que está ruim?", use DevTools, Lighthouse e WebPageTest.## Próximos passosCore Web Vitals funcionam melhor quando tratados como um painel de controle — LCP, INP e CLS — conectado ao que o negócio já acompanha: aquisição, conversão e qualidade da experiência. Em vez de perseguir uma nota perfeita, foque em melhorar o p75 em páginas críticas, controlar scripts de terceiros e evitar regressões com automação.O próximo passo mais produtivo é direto: escolha um template de alto impacto (landing pages de campanha são o ponto de partida natural), identifique a métrica que está determinando o status "Ruim" no Search Console e execute um ciclo completo de diagnóstico em laboratório, correção e validação em campo. Com um processo semanal e um gate de CI, Core Web Vitals deixa de ser firefighting e vira vantagem operacional.