Core Web Vitals para loja virtual: LCP, CLS e INP na prática
Core Web Vitals deixaram de ser "tópico de SEO" e viraram critério de conversão. Veja o que cada métrica representa, quais são as faixas aceitáveis em loja virtual e como medir LCP, CLS e INP de forma confiável.
- O que cada Core Web Vital mede em linguagem de quem opera loja, não em docs do Google.
- Por que p75 importa mais do que média e como isso muda sua estratégia de otimização.
- RUM (CrUX) vs Lighthouse: o que cada um te diz e onde mentem.
- As 4 armadilhas mais comuns ao medir performance em e-commerce brasileiro.
Core Web Vitals (CWV) deixaram de ser tópico exclusivo de SEO e viraram critério de conversão. O Google usa esses números no ranking; o usuário os sente direto no bolso — loja lenta vende menos, com ou sem ranking. Este guia explica, em linguagem de quem opera, o que cada métrica significa, qual valor buscar em e-commerce e como medir sem cair em armadilha.
Quais são as Core Web Vitals (versão atual)
Desde março de 2024, o conjunto oficial é composto por três métricas:[1]
- LCP — Largest Contentful Paint: tempo até o maior elemento visível da página aparecer.
- CLS — Cumulative Layout Shift: quanto o layout "pula" enquanto a página carrega.
- INP — Interaction to Next Paint: tempo médio de resposta a interações do usuário (cliques, toques, teclas). Substituiu o FID em março/2024.
FCP (First Contentful Paint), TTFB e Speed Index continuam relevantes para diagnóstico, mas não fazem parte das Core Web Vitals oficiais.
Quais valores buscar em loja virtual
| Métrica | Bom | Precisa melhorar | Ruim |
|---|---|---|---|
| LCP | < 2.5 s | 2.5 – 4 s | > 4 s |
| CLS | < 0.1 | 0.1 – 0.25 | > 0.25 |
| INP | < 200 ms | 200 – 500 ms | > 500 ms |
O Google considera "passa em Core Web Vitals" quando 75% das visitas ficam na faixa "Bom" — não a média. É uma diferença importante: você pode ter média ótima e ainda assim quartil 75 ruim.
LCP em detalhe
O LCP mede quando o maior elemento dentro do viewport — normalmente o hero da home, a foto principal da página de produto, ou o título — termina de renderizar. Em loja virtual, na maior parte dos casos o LCP é uma imagem.
Causas comuns de LCP ruim
- Imagem do hero carregada por JavaScript. Se o navegador só sabe da existência da imagem depois que executou o JS, o LCP dispara. Use
<img src="...">em HTML estático para o hero, sem lazy loading. - Sem preconnect / preload. Imagem servida de outra origem (CDN, S3) sem
<link rel="preconnect">demora para conectar. - Imagem gigante sem WebP/AVIF. Sirva imagens responsivas com
srcsete em formatos modernos. - TTFB lento. O LCP nunca será bom se o byte zero do HTML já demora. Cache de página em borda é o que mais ajuda aqui.
CLS em detalhe
CLS mede o quanto o layout "pula" — quando a página termina de carregar e elementos empurram outros, especialmente acima da dobra. Em loja virtual, os culpados clássicos:
- Banners que aparecem depois — cupom de boas-vindas, aviso de cookies, chat. Quando aparecem, empurram o conteúdo principal para baixo.
- Imagens sem dimensão definida — o navegador reserva 0 pixels até a imagem carregar, e depois empurra tudo.
- Fontes web sem fallback bem dimensionado — quando a fonte custom carrega, o texto muda de tamanho e empurra elementos. Use
font-display: optionalousize-adjust. - Widgets de terceiros — botões de "Pix copia e cola", selo de confiança, badge de avaliação que carregam em JS.
min-height. Se aparecer "do nada" e empurrar conteúdo, CLS vai sentir.INP em detalhe
INP é a métrica mais nova e a mais sensível ao JavaScript. Mede quanto tempo o navegador leva para mostrar uma resposta visual a uma interação do usuário — clicar em "Adicionar ao carrinho", abrir um menu, marcar uma variação de cor.[2]
Causas comuns de INP ruim em loja virtual
- Main thread bloqueada por JavaScript pesado — analytics, A/B testing, recomendação por IA, todos rodando juntos no first interactive.
- Re-renderização cara de framework — Magento 2 PWA Studio, headless em React/Vue mal otimizado, com componentes que re-renderizam o catálogo inteiro a cada filtro.
- Listeners não otimizados — scroll com handler pesado, sem throttle ou requestIdleCallback.
Como medir confiavelmente
Há duas categorias de medição que você precisa usar em conjunto:
1. Medição em campo (RUM)
É a métrica que o Google usa. Vem do navegador real de usuários reais. Origens:
- CrUX (Chrome User Experience Report) — dados públicos coletados do Chrome. Acesso via PageSpeed Insights, Search Console (Core Web Vitals report) e CrUX API. [3]
- Solução própria de RUM — biblioteca
web-vitalsdo Google, enviando para o seu backend. Único caminho para ver dados em tempo real, com segmentação por device, página e geografia.
2. Medição sintética em laboratório
Roda em ambiente controlado, em horários definidos. Útil para CI/CD e regressão.
- Lighthouse via PageSpeed Insights (servidor remoto, não local).
- WebPageTest com múltiplas execuções e perfil de rede 4G real.
- Testes contínuos com Chromium real — é o que a Especialista Loja Virtual faz a cada poucos minutos, comparando contra baseline e alertando quando alguma métrica passa do limite.
Armadilhas mais comuns
- Medir só na home. A home é a página mais otimizada da loja. Meça também categoria, produto e checkout — onde o cliente realmente passa tempo.
- Medir só no desktop. No Brasil, ~70% do tráfego de loja virtual é mobile. [4] Lighthouse mobile é o que importa para SEO.
- Lighthouse local com cache. Sua máquina, sua conexão, seu cache. Não representa o cliente. Use sempre PageSpeed Insights ou WebPageTest com cache frio.
- Confundir TTFB com LCP. TTFB é o byte zero. LCP é o pixel maior. São números distintos com causas distintas.
Próximos passos
- Abra o Search Console e veja o relatório de Core Web Vitals. Identifique as URLs no quartil "ruim".
- Para cada padrão de URL ruim (categoria, produto, etc.), rode o PageSpeed Insights e identifique o LCP element.
- Corrija um problema por vez e meça de novo após 28 dias (janela do CrUX).
- Configure monitoramento contínuo — sem isso, você melhora uma vez e regride sem perceber.
Se opera Magento 2, veja também como saber se o Magento está lento — boa parte dos problemas de LCP em Magento são, na verdade, problemas de TTFB.
Referências
- Google. Web Vitals — essential metrics for a healthy site. web.dev/articles/vitals
- Google. INP — Interaction to Next Paint. web.dev/articles/inp
- Chrome. Chrome User Experience Report (CrUX) API. developer.chrome.com/docs/crux/api
- Comitê Gestor da Internet no Brasil (CGI.br). TIC Domicílios, dados de uso de internet móvel. cetic.br/pesquisa/domicilios
- Google web.dev. Case studies — Vodafone, Renault, Yahoo! JAPAN. web.dev/case-studies
- HTTP Archive. Web Almanac — Performance chapter, 2024. almanac.httparchive.org/en/2024/performance
Perguntas frequentes
- O Google penaliza meu site se o LCP estiver ruim?
- Não diretamente. Core Web Vitals é um sinal entre outros — não rebaixa por si só, mas piora conversão e bounce, e indiretamente afeta ranking. Em e-commerce o impacto financeiro do LCP ruim costuma ser maior que o de SEO.
- CLS importa em página de produto?
- Sim, e muito. Galerias que carregam depois, banners de cupom que empurram o botão "Comprar" e widgets de chat que aparecem atrasados são as causas mais comuns — e tudo isso reduz a conversão antes mesmo de afetar o ranking.
- INP substituiu o FID?
- Sim, desde março de 2024 o INP (Interaction to Next Paint) substituiu o FID nas Core Web Vitals. INP é uma medida mais abrangente da responsividade da página ao longo de toda a sessão, não só a primeira interação.
Continue lendo
Monitore tudo isso automaticamente
A Especialista Loja Virtual roda navegação real no seu site a cada poucos minutos, alerta no Discord, Slack ou e-mail e mostra screenshot do incidente. Comece grátis.