Como otimizar Core Web Vitals em lojas VTEX
Lojas VTEX frequentemente sofrem com scores baixos de Core Web Vitals. O bundle JavaScript pesado, apps de terceiros mal otimizadas e imagens sem dimensões definidas são os vilões mais comuns. A boa notícia: com intervenções técnicas pontuais, é possível saltar de scores na faixa de 30-50 para 70-90+.
LCP: o que trava o carregamento
O Largest Contentful Paint mede quanto tempo leva para o maior elemento visível carregar. Em lojas VTEX, o LCP geralmente é impactado por: imagens de banner sem lazy load e sem dimensões (width/height), fontes customizadas sem font-display swap, CSS render-blocking de apps instaladas e server response time lento. Solução: otimize a imagem hero com preload, defina dimensões explícitas e audite as apps instaladas.
CLS: layout que pula
O Cumulative Layout Shift mede deslocamentos visuais durante o carregamento. Causas comuns na VTEX: banners sem altura definida, fontes que trocam de fallback para custom, iframes de terceiros (chat, reviews) que injetam conteúdo e componentes que carregam dados async e empurram o conteúdo. Solução: defina aspect-ratio ou min-height em containers de mídia e reserve espaço para componentes dinâmicos.
INP: interatividade travada
O Interaction to Next Paint mede a responsividade a interações do usuário. Na VTEX, INP alto geralmente vem de: JavaScript excessivo no main thread, event listeners pesados em scroll/click, hydration pesada de apps React e third-party scripts (analytics, chat, pixel). Solução: code split agressivo, defer de scripts não essenciais e lazy hydration.
Ferramentas de diagnóstico
Use PageSpeed Insights para dados de campo (CrUX) e lab. Use Lighthouse no Chrome DevTools para análise detalhada. Use Web Vitals extension para monitorar em tempo real. Use o Performance panel do DevTools para flamecharts detalhados. Compare antes e depois de cada mudança.
O atalho: frontend headless
Se a loja tem dezenas de apps e o bundle está incontrolável, considere trocar o frontend por deco.cx ou FastStore. O backend VTEX continua o mesmo, mas o frontend leve entrega Lighthouse 90+ sem precisar otimizar app por app. É a solução mais eficaz quando a dívida técnica do frontend é grande demais.