13 de May de 2026
Velocidad Shopify: Cómo Pasar Core Web Vitals en 2026
La velocidad de carga es el factor técnico con mayor impacto en SEO y ventas de tu tienda Shopify. Google usa Core Web Vitals como señal de ranking desde 2021, y una tienda lenta pierde posiciones, tráfico y ventas simultáneamente. Esta guía explica exactamente qué medir, qué corregir y en qué orden para maximizar el impacto en tu tienda Shopify.
¿Qué son los Core Web Vitals?
Los Core Web Vitals son tres métricas de velocidad y experiencia de usuario que Google usa para rankear páginas:
- LCP (Largest Contentful Paint) — Tiempo hasta que el elemento más grande de la página (imagen o bloque de texto) es visible. Objetivo: menos de 2.5 segundos. En Shopify suele ser la imagen hero o el banner principal.
- INP (Interaction to Next Paint) — Mide la respuesta del sitio a las interacciones del usuario (clics, toques). Reemplazó a FID en 2024. Objetivo: menos de 200ms.
- CLS (Cumulative Layout Shift) — Mide cuánto se mueve el contenido mientras carga. Objetivo: menos de 0.1. En Shopify ocurre cuando las apps insertan elementos que desplazan el contenido.
Diagnóstico: cómo medir la velocidad de tu Shopify
Antes de optimizar, mide. Herramientas:
- Google PageSpeed Insights (pagespeed.web.dev) — Análisis de tu URL con puntuación y diagnóstico detallado. Prueba tanto móvil como desktop.
- Google Search Console → Core Web Vitals — Datos reales de usuarios (CrUX) agrupados por "Buena", "Necesita mejorar" y "Mala" experiencia.
- Shopify Theme Inspector (extensión Chrome) — Muestra el tiempo de render de cada sección Liquid en tu tema. Útil para identificar secciones lentas.
- WebPageTest.org — Análisis avanzado con cascada de carga, útil para identificar recursos bloqueantes.
Las 10 causas más comunes de un Shopify lento
1. Demasiadas apps instaladas
Cada app de Shopify añade JavaScript al frontend. 10 apps activas pueden añadir 500KB-2MB de JS extra. Audita tus apps: ve a Online Store → Themes → Edit code → layout/theme.liquid y busca los scripts. Desinstala apps que no uses activamente — eliminarlas del Admin no borra el código si no las desinstalaste completamente.
2. Imágenes sin comprimir
Las imágenes de producto son la causa número 1 de LCP lento en Shopify. Solución: usa TinyIMG app (comprime automáticamente nuevas imágenes) y Bulk Image Edit para las existentes. Formato óptimo: WebP (30-50% más ligero que JPEG). Shopify convierte automáticamente a WebP cuando el navegador lo soporta, pero necesitas que las imágenes originales estén bien comprimidas.
3. Fuentes web excesivas
Cargar 4-5 pesos de fuente Google Fonts bloquea el render. Solución: usa máximo 2 fuentes, preconéctalas en el <head> con <link rel="preconnect">, y considera usar fuentes del sistema para texto de cuerpo.
4. JavaScript render-blocking
Scripts de terceros (chat, analytics, pixels) cargados de forma síncrona bloquean el primer render. Solución: añade defer o async a los scripts que no son críticos para el render inicial. En Shopify, esto se gestiona en layout/theme.liquid.
5. Sección hero con imagen grande sin lazy load
La imagen hero es el LCP en la mayoría de tiendas Shopify. Debe estar en el HTML como <img> con atributo fetchpriority="high", no cargada via JavaScript. Evita los sliders de imágenes en el hero — son lentos y convierten peor que una imagen estática.
6. Metafields de apps no eliminados
Las apps desinstaladas pueden dejar metafields que el tema intenta cargar. Limpiar metafields huérfanos via API mejora el tiempo de render del servidor.
7. Shopify Scripts complejos (solo Plus)
En Shopify Plus, los Scripts de checkout pueden aumentar el tiempo de respuesta del servidor. Optimiza la lógica o migra a Shopify Functions que son más rápidas.
8. Tema no optimizado
Los temas del App Store no siempre están optimizados para velocidad. Impulse, Turbo y algunos temas premium cargan librerías JavaScript pesadas. Compara la velocidad de tu tema actual vs. Dawn en las mismas URLs.
9. CLS por imágenes sin dimensiones
Las imágenes de producto sin atributos width y height en el HTML causan CLS — el contenido salta cuando la imagen carga. Shopify Liquid debería incluir siempre: {{ image | image_url: width: 600 | image_tag: width: 600, height: 600 }}
10. CDN no optimizado para LATAM
Shopify usa Fastly CDN con buena cobertura en LATAM. Sin embargo, si tu mayoría de clientes son de México, Colombia o Argentina, verifica que los recursos estáticos (imágenes, CSS) se sirvan desde el edge más cercano usando herramientas como Pingdom con ubicaciones en São Paulo o Ciudad de México.
Plan de optimización: orden de prioridades
- 🔴 Comprimir imágenes existentes — Mayor impacto, menor esfuerzo técnico
- 🔴 Auditar y desinstalar apps sin usar — Reducción inmediata de JS
- 🟡 Añadir fetchpriority="high" a imagen hero — Mejora LCP directamente
- 🟡 Preconectar fuentes externas — Reduce tiempo de bloqueo
- 🟡 Diferir scripts no críticos — Mejora INP
- 🟢 Implementar lazy loading en imágenes debajo del fold — Shopify lo hace por defecto en temas modernos
- 🟢 Revisar CLS en páginas de producto — Añadir dimensiones a imágenes
¿Cuánto mejora el SEO con buenos Core Web Vitals?
Google ha confirmado que los Core Web Vitals son una señal de ranking, pero no la más importante. Pasarás de "Mala" a "Buena" experiencia, lo que elimina una penalización implícita. El impacto más directo es en la tasa de conversión: tiendas que mejoran LCP de 5s a 2s ven aumentos del 15-30% en conversión. Más que un factor SEO, Core Web Vitals es una inversión en experiencia de usuario con retorno directo en ventas.