La velocidad como factor de conversión
Los datos son claros: cada segundo adicional de carga reduce las conversiones un 7%. Un sitio que carga en 1 segundo convierte 2.5x más que uno que carga en 5 segundos. Para una tienda que factura USD $100K/mes, pasar de 4s a 2s de carga puede significar USD $20K+ adicionales al mes.
Core Web Vitals: las 3 métricas que importan
LCP (Largest Contentful Paint)
Meta: < 2.5 segundos. Mide cuánto tarda en renderizarse el elemento visual más grande de la página (generalmente la hero image o el banner principal).
- Usar imágenes en formato WebP con dimensiones exactas
- Precargar la hero image con
<link rel="preload"> - Evitar carousels pesados above-the-fold
- Usar CDN para assets estáticos (Shopify lo hace por defecto)
INP (Interaction to Next Paint)
Meta: < 200ms. Mide la responsividad de la página cuando el usuario interactúa (clicks, taps, keypresses).
- Minimizar JavaScript de terceros (apps de Shopify, tracking, chat widgets)
- Usar
deferyasyncen scripts no críticos - Evitar long tasks en el main thread
- Auditar apps instaladas — cada app inyecta JavaScript
CLS (Cumulative Layout Shift)
Meta: < 0.1. Mide la estabilidad visual — cuánto "saltan" los elementos de la página mientras carga.
- Definir
widthyheighten todas las imágenes - Reservar espacio para banners y elementos dinámicos
- Evitar inyectar contenido above-the-fold después del render inicial
- Cargar fuentes con
font-display: swap
Auditoría de velocidad: paso a paso
- Medir: Google PageSpeed Insights + Chrome DevTools Lighthouse
- Identificar: los 3 mayores bottlenecks (generalmente imágenes, JS de terceros, y fuentes)
- Priorizar: atacar primero lo que tiene mayor impacto con menor esfuerzo
- Implementar: aplicar optimizaciones
- Verificar: medir de nuevo y comparar
Las 5 optimizaciones más impactantes para Shopify
| Optimización | Impacto | Esfuerzo |
|---|---|---|
| Comprimir imágenes (WebP + lazy load) | Alto | Bajo |
| Desinstalar apps no usadas | Alto | Bajo |
| Defer scripts de terceros | Alto | Medio |
| Preload critical resources | Medio | Bajo |
| Migrar a tema optimizado (Dawn) | Muy alto | Alto |
Herramientas de medición
- Google PageSpeed Insights: métricas de campo (datos reales de usuarios) + lab
- Chrome DevTools → Lighthouse: auditoría detallada local
- WebPageTest: waterfall detallado para identificar bottlenecks
- Google Search Console → Core Web Vitals: datos agregados de tu sitio
¿Tu tienda carga lento? Hacemos auditorías de performance con optimizaciones concretas que mejoran velocidad y conversiones.
