Cómo optimizar Core Web Vitals en tiendas VTEX
Tiendas VTEX frecuentemente sufren con scores bajos de Core Web Vitals. El bundle JavaScript pesado, apps de terceros mal optimizadas e imágenes sin dimensiones son los problemas más comunes. Con intervenciones técnicas puntuales, es posible saltar de 30-50 a 70-90+.
LCP: qué traba la carga
El Largest Contentful Paint mide cuánto tarda el mayor elemento visible en cargar. En VTEX, el LCP es impactado por: imágenes de banner sin lazy load ni dimensiones, fuentes custom sin font-display swap, CSS render-blocking de apps y server response time lento.
CLS: layout que salta
El Cumulative Layout Shift mide desplazamientos visuales durante la carga. Causas comunes: banners sin altura definida, fuentes que cambian de fallback a custom, iframes de terceros y componentes que cargan datos async y empujan contenido.
INP: interactividad trabada
El Interaction to Next Paint mide la responsividad. En VTEX, INP alto viene de: JavaScript excesivo en el main thread, event listeners pesados, hydration pesada de apps React y scripts de terceros.
El atajo: frontend headless
Si la tienda tiene decenas de apps y el bundle es incontrolable, considera cambiar el frontend por deco.cx o FastStore. El backend VTEX sigue igual, pero el frontend liviano entrega Lighthouse 90+ sin optimizar app por app.