How to optimize Core Web Vitals on VTEX stores
VTEX stores frequently suffer from low Core Web Vitals scores. Heavy JavaScript bundles, poorly optimized third-party apps and images without defined dimensions are the most common culprits. The good news: with targeted technical interventions, it's possible to jump from scores in the 30-50 range to 70-90+.
LCP: what slows down loading
Largest Contentful Paint measures how long the largest visible element takes to load. In VTEX stores, LCP is usually impacted by: banner images without lazy load and without dimensions (width/height), custom fonts without font-display swap, render-blocking CSS from installed apps and slow server response time. Solution: optimize the hero image with preload, set explicit dimensions and audit installed apps.
CLS: layout that jumps
Cumulative Layout Shift measures visual displacements during loading. Common causes in VTEX: banners without defined height, fonts swapping from fallback to custom, third-party iframes (chat, reviews) injecting content and components that load data async and push content down. Solution: set aspect-ratio or min-height on media containers and reserve space for dynamic components.
INP: blocked interactivity
Interaction to Next Paint measures responsiveness to user interactions. In VTEX, high INP usually comes from: excessive JavaScript on the main thread, heavy scroll/click event listeners, heavy React app hydration and third-party scripts (analytics, chat, pixel). Solution: aggressive code splitting, defer non-essential scripts and lazy hydration.
Diagnostic tools
Use PageSpeed Insights for field data (CrUX) and lab. Use Lighthouse in Chrome DevTools for detailed analysis. Use the Web Vitals extension for real-time monitoring. Use the DevTools Performance panel for detailed flamecharts. Compare before and after each change.
The shortcut: headless frontend
If the store has dozens of apps and the bundle is uncontrollable, consider switching the frontend to deco.cx or FastStore. The VTEX backend stays the same, but the lightweight frontend delivers Lighthouse 90+ without needing to optimize app by app. It's the most effective solution when frontend technical debt is too large.