Core Web Vitals: LCP e CLS na loja virtual (como corrigir)

LCP, CLS, INP: o que são, como medir e como corrigir os 3 indicadores que o Google usa para ranking de e-commerce.

O que são Core Web Vitals e por que afetam ranking?

Core Web Vitals é um conjunto de 3 métricas que o Google usa para medir a experiência real do usuário em um site. Desde 2021, elas são fator oficial de ranking. São elas: LCP (Largest Contentful Paint) — quão rápido o maior elemento visual carrega; CLS (Cumulative Layout Shift) — quanto o conteúdo 'pula' durante o carregamento; INP (Interaction to Next Paint) — quão rápido o site responde a cliques. Lojas com Core Web Vitals ruim rankeiam pior e convertem menos.

LCP: o inimigo silencioso do e-commerce

LCP ideal: abaixo de 2,5 segundos. Ruim: acima de 4 segundos. O LCP é geralmente a imagem de destaque da página (hero banner, foto do produto). Em lojas, esse carregamento é crítico — se demora mais de 3s, 40% dos usuários já saíram. Como corrigir: (1) use imagens WebP ou AVIF (até 70% menores que JPG); (2) adicione preload no hero image; (3) use CDN; (4) lazy-load nas imagens abaixo da dobra; (5) remova scripts externos bloqueantes (chatwidget, GTM sem defer).

CLS: o layout shift que mata conversão

CLS ideal: abaixo de 0,1. Ruim: acima de 0,25. Layout shift é aquele momento em que o usuário vai clicar em 'Adicionar ao carrinho' e, 100ms antes, o botão pula para baixo porque uma imagem carregou. O cliente clica em outra coisa por engano (normalmente um anúncio ou outro produto). Causas principais: (1) imagens sem width e height definidos; (2) fontes customizadas sem font-display: swap; (3) anúncios/pop-ups que aparecem no meio da rolagem; (4) iframes sem altura reservada.

INP: substituiu o FID em 2024

INP ideal: abaixo de 200ms. Mede quanto tempo leva desde um clique/toque até o próximo visual do usuário. Lojas pesadas em JavaScript (React, Vue mal otimizado) sofrem com INP. Como corrigir: (1) code splitting por rota; (2) debounce em handlers; (3) Web Workers para tarefas pesadas; (4) reduza o bundle principal para menos de 200KB gzipped.

Como medir — 3 ferramentas essenciais

(1) PageSpeed Insights (pagespeed.web.dev): a ferramenta mais usada, combina dados de lab (Lighthouse) e de campo (CrUX — usuários reais); (2) Chrome DevTools > Performance: mostra flamegraph do que carregou em cada ms; (3) Search Console > Core Web Vitals: dados reais dos usuários Chrome da sua loja, por URL — o mais valioso porque mostra se o problema é da sua loja ou só em certos templates.

Lighthouse 90+: vale o esforço?

Lighthouse acima de 90 em mobile é o padrão de loja profissional. Lojas com Lighthouse acima de 90 têm em média: taxa de bounce 40% menor, tempo médio na página 30% maior, taxa de conversão 25% maior. Isso sem contar o ganho de ranking no Google, que amplifica todo o resto. O investimento em Core Web Vitals é um dos que mais pagam em e-commerce.

Os 7 fixes que mais movem o ponteiro

(1) WebP/AVIF + srcset + lazy-load = LCP cai 30-60%; (2) Fonte local com font-display: swap = CLS cai 0,1; (3) Width/Height explícitos em imagens = CLS cai 0,05; (4) Defer de scripts de analytics/chat = INP melhora 40%; (5) CDN na frente da origem = LCP cai 25%; (6) Cache agressivo de assets = TTFB cai 50%; (7) Remove widgets que você não usa.

Soluções CodexShop relacionadas

Se você quer acelerar e ter um especialista fazendo por você, a CodexShop tem soluções completas:

Conclusão

Aplicar o que foi explicado aqui vai te colocar à frente de 90% dos concorrentes. O conhecimento está disponível — a execução é o que separa quem vende de quem não vende. Se quiser acelerar, fale com a gente: entre em contato sobre Core Web Vitals — Otimização para 90+.