Core Web Vitals para E-commerce:
Guia Técnico Completo 2026
Como otimizar LCP, INP e CLS para ranquear no Google, reduzir rejeição e aumentar conversões na sua loja virtual
Em 2026, os Core Web Vitals não são mais apenas fator de ranqueamento — são o termômetro da experiência do seu cliente. Lojas lentas perdem tráfego orgânico, têm taxas de rejeição maiores e convertem menos. A boa notícia: com as otimizações certas, é possível ganhar posições no Google e aumentar vendas simultaneamente.
- O que são LCP, INP e CLS e por que impactam suas vendas
- Benchmarks de Core Web Vitals para e-commerce no Brasil
- Como medir sua performance hoje (ferramentas gratuitas)
- Checklist de otimizações por prioridade de impacto
- Erros que e-commerces cometem e como evitar
O que são Core Web Vitals e por que eles importam para e-commerce
Core Web Vitals são três métricas definidas pelo Google para medir a experiência do usuário em uma página web. Desde 2021 elas fazem parte do algoritmo de ranqueamento e, em 2024, o Google substituiu FID por INP — uma métrica mais abrangente de interatividade.
Largest Contentful Paint
(carregamento do maior elemento)
Interaction to Next Paint
(resposta a interações)
Cumulative Layout Shift
(estabilidade visual)
em lojas que passam de
“Precisa melhorar” para “Bom”
Benchmarks de Core Web Vitals para e-commerce no Brasil (2026)
A maioria dos e-commerces brasileiros ainda está distante dos limites ideais, especialmente no mobile. Veja onde o mercado está hoje:
| Métrica | Bom | Precisa melhorar | Ruim | Média Brasil (mobile) |
|---|---|---|---|---|
| LCP | <2,5s | 2,5s – 4s | >4s | ~3,8s |
| INP | <200ms | 200ms – 500ms | >500ms | ~320ms |
| CLS | <0,1 | 0,1 – 0,25 | >0,25 | ~0,14 |
| TTFB | <800ms | 800ms – 1,8s | >1,8s | ~1,1s |
Fonte: CrUX (Chrome User Experience Report) + análises de e-commerces BR, Q1 2026
LCP: Como otimizar o maior elemento da página
O LCP mede quanto tempo leva para o maior elemento visível (geralmente a imagem hero ou banner principal) aparecer na tela. É a métrica que mais impacta a percepção de velocidade pelo usuário.
Principais causas de LCP lento em e-commerce
Imagens sem otimização são o problema número 1. Banners de home page enviados em PNG de 3MB, imagens de produto sem lazy loading e sem formato moderno (WebP/AVIF) são os vilões mais comuns. Além disso, recursos de terceiros bloqueantes (chat widgets, scripts de analytics carregando antes do conteúdo) e hospedagem lenta contribuem significativamente.
Reduza imagens em 60–80% sem perda perceptível de qualidade. No WooCommerce, use Imagify ou ShortPixel. No Shopify, a conversão é automática.
Instrua o navegador a carregar primeiro a imagem principal:
<img fetchpriority="high" ...>. Isso reduz LCP em 20–40%.Cloudflare (gratuito), BunnyCDN ou Fastly distribuem seus ativos de servidores próximos ao usuário. Reduz TTFB e consequentemente o LCP.
Adicione no <head>:
<link rel="preconnect" href="https://fonts.googleapis.com"> para fontes e outros recursos externos essenciais.INP: Como melhorar a interatividade da loja
O INP (Interaction to Next Paint) mede o tempo entre uma interação do usuário (clicar em “Comprar”, filtrar produtos, adicionar ao carrinho) e a resposta visual da página. É especialmente crítico em páginas de categoria e produto com muitos filtros e scripts.
Causas comuns de INP ruim em e-commerce
JavaScript excessivo rodando na thread principal é o maior culpado. Scripts de chat, popups de saída, integrações de review, pixels de rastreamento — cada um deles compete por tempo de CPU. Quando o usuário clica em “Adicionar ao carrinho” e demora 600ms para ver alguma resposta, as chances de abandono aumentam drasticamente.
| Problema | Impacto no INP | Solução |
|---|---|---|
| Scripts de terceiros síncronos | +200–400ms | Carregar com defer/async ou via Partytown |
| Event listeners pesados | +100–300ms | Debounce e throttle em interações |
| Renderização de lista longa sem virtualização | +300–600ms | Infinite scroll com windowing (React-Window) |
| Bundle JS não dividido (no code splitting) | +500ms–2s | Lazy load de componentes não críticos |
| Fontes web bloqueantes | +50–150ms | font-display: swap + subset de caracteres |
CLS: Como eliminar saltos de layout que irritam clientes
O CLS mede quanto os elementos da página se movem inesperadamente enquanto carregam. Um banner que empurra o botão “Comprar” para baixo no momento em que o usuário vai clicar — esse é o cenário clássico de CLS alto. Além de péssima experiência, causa cliques errados e frustração.
Checklist anti-CLS para e-commerce
Defina dimensões explícitas em todas as imagens (width e height no HTML). Reserve espaço para banners de anúncio e popups com CSS antes de carregarem. Evite inserir conteúdo acima do fold após carregamento da página (notificações de estoque, banners de frete grátis dinâmicos). Use font-display: swap com preload da fonte para evitar FOUT que desloca texto.
Como medir seus Core Web Vitals hoje (ferramentas gratuitas)
| Ferramenta | Tipo de dado | Melhor para | Link |
|---|---|---|---|
| PageSpeed Insights | Lab + Field (CrUX) | Diagnóstico rápido por URL | pagespeed.web.dev |
| Search Console (CWV) | Field (real users) | Visão geral do site | search.google.com/search-console |
| CrUX Dashboard | Field histórico | Acompanhar evolução | lookerstudio.google.com |
| WebPageTest | Lab detalhado | Diagnóstico técnico profundo | webpagetest.org |
| Lighthouse CI | Lab automatizado | Integrar no deploy (CI/CD) | github.com/GoogleChrome |
Plano de otimização por prioridade: 30 dias para aprovação no Google
Meça LCP, INP e CLS com PageSpeed Insights nas 10 páginas mais importantes (home, categorias principais, produto mais vendido). Identifique imagens sem WebP e converta. Ative cache do servidor (WP Rocket, W3 Total Cache ou cache nativo da plataforma).
Implemente lazy loading em todas as imagens abaixo do fold. Adicione fetchpriority=”high” na imagem LCP. Substitua fontes Google importadas no CSS por versões self-hosted com font-display: swap. Configure CDN para ativos estáticos.
Audite scripts de terceiros com a aba Performance do Chrome DevTools. Mova pixels de rastreamento (Meta, Google Tag Manager) para carregar após interação do usuário quando possível. Divida bundles JavaScript com code splitting.
Defina width/height em todas as imagens do HTML. Reserve espaço para banners dinâmicos com min-height. Re-meça tudo com PageSpeed Insights e Search Console. Submeta sitemap atualizado ao Google após melhorias.
Sua loja está lenta e perdendo posições no Google?
A Maximizy audita os Core Web Vitals do seu e-commerce e implementa as otimizações que convertem performance técnica em mais vendas.
Falar com um especialista