Muchos comerciantes que migran de WooCommerce a Shopify esperan mejoras inmediatas de velocidad y descubren que su tienda Shopify carga más lentamente que su antiguo sitio de WordPress. El problema es casi siempre demasiadas apps instaladas, cada una inyectando JavaScript. Esta guía explica cómo conseguir un rendimiento rápido en tu tienda Shopify tras la migración.

Entender la ventaja de velocidad de Shopify (y sus límites)

Ventajas de la infraestructura de Shopify frente a WooCommerce autohospedado:

CDN global Fastly: los recursos estáticos (JS, CSS, imágenes) se sirven desde el nodo de borde más cercano
Infraestructura de servidor gestionada: sin alojamiento compartido lento, sin problemas de escalado del servidor
Soporte de HTTP/3 en todas las tiendas
Optimización automática de imágenes: conversión a WebP, variantes de tamaño bajo demanda

Sin embargo, estas ventajas se neutralizan fácilmente por:

Cada app de Shopify instalada inyecta JavaScript en tu tienda (salvo que se excluya)
Muchos comerciantes instalan 15–25 apps — cada una añade 50–200ms de tiempo de ejecución de JavaScript
Archivos de tema grandes con muchas secciones no utilizadas
Imágenes de producto sin optimizar subidas con tamaños de archivo enormes

Speed score de Shopify

Shopify calcula una puntuación de velocidad (0–100) para cada tema en Tienda online → Temas. Se basa en las métricas de rendimiento de Google Lighthouse para una carga simulada en un dispositivo móvil mediano:

Puntuación 80+: Rápido. Verde.
Puntuación 50–79: Necesita mejora. Amarillo.
Puntuación inferior a 50: Lento. Rojo. Es probable que impacte en la tasa de conversión y el SEO.

Nueva tienda Shopify (tema Dawn, sin apps): normalmente puntúa entre 85–95. Tras instalar 10+ apps: a menudo baja a 40–60. Las apps son el principal factor de degradación.

Auditoría de scripts de apps

La acción de optimización de velocidad con mayor ROI: auditar y reducir los scripts de apps instaladas.

Cómo auditar los scripts de apps

Abrir Chrome DevTools → pestaña Red → filtrar por "JS"
Cargar la página de inicio de tu tienda Shopify
Identificar cada archivo JavaScript cargado: ver los nombres de dominio (las apps cargan desde sus propias CDNs como cdn.nombreapp.com)
Relacionar cada script con una app instalada
Google PageSpeed Insights → Diagnóstico → "Eliminar recursos que bloquean el renderizado" — muestra qué scripts retrasan el First Contentful Paint

Apps a auditar por su impacto en la carga de página

Apps de chat (Tidio, Intercom, Gorgias): los widgets de chat en vivo cargan 100–300KB de JS. Cargar de forma diferida o solo en páginas específicas.
Apps de reseñas (Yotpo, Okendo): los widgets de reseñas pueden ser pesados. Asegurarse de que la carga diferida está configurada.
Apps de fidelización/recompensas (Smile, LoyaltyLion): añaden badges y widgets globalmente. Considera limitar a clientes con sesión iniciada.
Apps de lista de deseos: añaden JS a cada página de producto. Evaluar la estrategia de carga.
Apps de upsell (ReConvert, Frequently Bought Together): añaden JS al carrito y páginas de producto.
Apps de popup/marketing: los popups de captación de email cargan JS globalmente. Asegurarse de que se activan después de la carga de la página, no antes.

Exclusiones de apps

La mayoría de las apps de Shopify permiten excluirlas de tipos de página específicos (desactivar en la página de inicio, cargar solo en páginas de producto, etc.)
Comprobar la configuración de cada app buscando opciones de "rendimiento" o "páginas de carga"
Algunas apps se inyectan mediante theme.liquid (carga en todas las páginas) y no se pueden limitar fácilmente — desinstalar si no se necesitan en todas las páginas

Optimización de imágenes

Las imágenes representan típicamente el 60–80% del peso total de la página. Optimizar agresivamente:

Manejo nativo de imágenes en Shopify

Subir archivos originales a resolución completa (la CDN de Shopify genera todas las variantes de tamaño)
Shopify sirve automáticamente WebP a los navegadores que lo admiten (todos los modernos)
Usar el filtro image_url de Liquid con parámetro de ancho: {{ product.featured_image | image_url: width: 800 }}
Usar loading="lazy" en todas las imágenes que estén fuera de la vista inicial (la mayoría de los temas modernos lo hacen automáticamente)

Compresión de imágenes antes de subirlas

Usar TinyPNG o Squoosh para comprimir imágenes antes de subirlas a Shopify
Objetivo: imágenes de producto de menos de 500KB a resolución completa. La mayoría de las fotos pueden ser de 100–300KB a 2000px con una pérdida de calidad visible mínima.
Apps de optimización de imágenes de Shopify (Crush.pics, TinyIMG): comprimen automáticamente imágenes ya en tus Archivos de Shopify

Imágenes hero y de banner

Imágenes hero para escritorio: 2000–2560px de ancho, 80–150KB (WebP/JPEG altamente comprimido)
Proporcionar imágenes hero separadas para móvil: 750px de ancho, menor tamaño de archivo
Imágenes de fondo en CSS: convertir a WebP y especificar mediante etiqueta picture con srcset

Optimización del tema

Elegir un tema rápido

Dawn (gratuito): el tema de referencia de Shopify. Construido para la velocidad. Puntúa consistentemente 90+. Referencia recomendada.
Los temas de pago varían: muchos temas premium incluyen animaciones, efectos parallax y efectos JavaScript que reducen las puntuaciones. Probar la velocidad antes de comprar.
Shopify Theme Store: ordenar por "Velocidad" para ver los temas más rápidos en cada categoría

Optimización del código del tema

Secciones no utilizadas: la mayoría de los temas incluyen secciones que nunca usarás. Estas siguen cargando definiciones de CSS/JS.
Eliminar las secciones no utilizadas del código del tema (o pedirle a un desarrollador Shopify que lo haga)
CSS crítico inline: el CSS para el contenido visible inicialmente debe cargarse primero
Diferir JavaScript no crítico: usar atributos defer o async en scripts no críticos

Objetivos de Core Web Vitals

Métrica	Bueno	Necesita mejora	Deficiente
LCP (Largest Contentful Paint)	< 2,5s	2,5–4,0s	> 4,0s
INP (Interaction to Next Paint)	< 200ms	200–500ms	> 500ms
CLS (Cumulative Layout Shift)	< 0,1	0,1–0,25	> 0,25

Mejora del LCP (el más impactante para Shopify)

El elemento LCP suele ser la imagen hero o la imagen destacada del producto
Añadir fetchpriority="high" y eliminar loading="lazy" de la primera imagen visible sin desplazamiento
Precargar la imagen LCP: <link rel="preload" as="image" href="{{ featured_image }}">
Reducir el tamaño de archivo de la imagen LCP como prioridad sobre todas las demás imágenes

Mejora del CLS

Fuentes comunes de CLS en Shopify: carga de fuentes (FOUT), widgets de apps que modifican el layout, dimensiones de imagen no especificadas
Especificar siempre los atributos de ancho y alto de las imágenes: evita el reflujo del layout cuando se cargan las imágenes
Usar font-display: swap para fuentes personalizadas (en la configuración del tema o en CSS)
Asegurarse de que los widgets de apps (burbujas de chat, badges de fidelización) no desplacen el layout al cargarse

Lista de verificación de velocidad post-migración

Ejecutar el speed score de Shopify de referencia inmediatamente tras instalar el tema, antes de añadir apps
Instalar apps de una en una: volver a ejecutar el speed score tras cada una para identificar las apps lentas
Auditar todos los scripts de apps: usar Chrome DevTools Red → JS para identificar todos los scripts externos que se cargan
Configurar la app de chat para que cargue de forma diferida (activar 3 segundos después de la carga de la página, no en DOMContentLoaded)
Comprimir todas las imágenes de producto antes de subirlas: objetivo inferior a 300KB por imagen
Configurar la carga diferida en todas las imágenes fuera de la vista inicial en el tema
Añadir fetchpriority="high" a la imagen hero en la página de inicio
Activar la carga diferida para el widget de reseñas (normalmente en la configuración de la app de reseñas)
Eliminar o limitar las apps que no aporten un impacto de ingresos medible
Ejecutar Google PageSpeed Insights en la página de inicio, la página de colección y la página de producto
Configurar el seguimiento de CWV: Google Search Console → Informe de Core Web Vitals muestra datos de campo de usuarios reales

La acción de mayor impacto para la mayoría de las tiendas Shopify es desinstalar las apps no utilizadas. Los comerciantes habitualmente instalan una app para probarla y luego se olvidan de desinstalarla cuando no la necesitan — pero el JavaScript de la app sigue cargando en cada página. Dedicar una hora a auditar todas las apps instaladas, desinstalar las no utilizadas y comprobar que las apps necesarias cargan de forma diferida puede mejorar tu speed score de Shopify entre 20 y 30 puntos y mejorar significativamente el LCP. Esto a menudo produce mejores resultados que cualquier cantidad de optimización de imágenes o ajustes del tema.

Optimización de la velocidad de la tienda Shopify tras migrar de WooCommerce (2026)