Desde maio de 2021, o Google usa os Core Web Vitals como fator de ranqueamento dentro do Page Experience Signal. Para lojas VTEX IO, isso tem implicações diretas: páginas lentas perdem posições para concorrentes que investem em performance — e perdem conversão, já que cada segundo de delay no carregamento reduz a taxa de conversão em até 7%.
As três métricas que compõem os Core Web Vitals em 2025 são LCP, CLS e INP.
LCP (Largest Contentful Paint): a imagem que trava tudo
O LCP mede o tempo até o maior elemento visível ser renderizado. Na maioria das lojas VTEX IO, o gargalo é a imagem principal — o banner hero ou a imagem do produto na PDP. O target do Google é LCP abaixo de 2,5 segundos.
Causas mais comuns de LCP alto no VTEX IO:
- Imagem hero sem preload: o browser só descobre a imagem depois de fazer o parsing do HTML, aumentando o LCP em 1–2 segundos.
- Imagens muito pesadas: PNGs ou JPEGs sem compressão. Use WebP e configure
width/heightpara evitar recálculo de layout. - Render-blocking resources: fonts, CSS de terceiros e scripts síncronos no
<head>que atrasam o first paint.
CLS (Cumulative Layout Shift): o deslocamento que frustra o usuário
O CLS mede quanto o layout se desloca durante o carregamento. Um CLS alto é aquele botão de compra que sobe quando a imagem carrega, fazendo o usuário clicar no lugar errado. O target é abaixo de 0,1.
No VTEX IO, as fontes mais comuns de CLS são banners do CMS carregados de forma assíncrona sem placeholder de altura, imagens sem atributos width/height definidos e componentes de avaliações que inserem conteúdo após o carregamento inicial.
INP (Interaction to Next Paint): responsividade real
O INP substituiu o FID como métrica de interatividade. Mede a latência de resposta a cliques, toques e teclas pressionadas — deve ser abaixo de 200ms. No VTEX IO, os gargalos típicos são JavaScript pesado no thread principal e componentes de search/autocomplete com muito processamento síncrono.
Como medir: ferramentas essenciais
- PageSpeed Insights: avalia com dados reais (CrUX) e dados de lab. Use para uma visão geral e identificar páginas críticas.
- Chrome DevTools → Performance: análise detalhada de onde o tempo é gasto. Indispensável para diagnosticar LCP e INP.
- WebPageTest: testes com diferentes dispositivos, localidades e conexões. Útil para validar melhorias antes e depois.
- Google Search Console → Core Web Vitals: dados reais de campo agregados por URL. Use para identificar quais páginas têm mais usuários afetados.
As otimizações com maior impacto no VTEX IO
- Preload da imagem hero: adicione
<link rel="preload">para a imagem principal. Redução média de 1–2s no LCP. - Lazy loading de imagens abaixo da dobra: use
loading="lazy"em todas as imagens que não aparecem no viewport inicial. - Font subsetting e
font-display: swap: reduza o tamanho das fontes customizadas e evite o Flash of Invisible Text. - Dimensões de imagem no HTML: sempre defina
widtheheightem elementos<img>para o browser reservar espaço e evitar CLS. - Code splitting no VTEX IO: use
React.lazy()para componentes pesados que não são necessários no carregamento inicial.
Implementar essas otimizações em uma loja VTEX IO exige conhecimento da plataforma e do ciclo de renderização do Store Framework. Fale comigo para uma análise gratuita dos Core Web Vitals da sua loja.