Las tiendas WooCommerce a menudo sufren problemas de velocidad causados por la sobrecarga de plugins, las limitaciones del alojamiento compartido y los temas de WordPress sin optimizar. Una migración a Shopify es una oportunidad para empezar de cero — la infraestructura de Shopify es significativamente más eficiente que el alojamiento compartido típico de WooCommerce. Sin embargo, una tienda Shopify mal configurada puede seguir siendo lenta: el exceso de aplicaciones, las imágenes sin optimizar y los temas mal programados harán que incluso Shopify rinda mal. Esta guía cubre la optimización de velocidad post-migración para tiendas Shopify.

Por qué las tiendas WooCommerce son a menudo lentas

Alojamiento compartido: la mayoría de las tiendas WooCommerce pequeñas funcionan en alojamiento compartido cPanel con CPU y RAM limitadas
Sobrecarga de plugins: tener 20–40 plugins es habitual. Cada plugin carga código PHP, consultas a la base de datos y a menudo un archivo JavaScript/CSS en cada carga de página
Base de datos de WordPress: las consultas de WooCommerce sin caché pueden ser lentas, especialmente en las páginas de categorías de productos con muchos filtros
Temas sobrecargados: los temas premium de maquetador de páginas (Divi, Avada) cargan 300–500 KB de CSS y JS incluso antes de su código personalizado
Imágenes sin optimizar: WordPress no convierte automáticamente a WebP ni sirve imágenes responsive óptimamente sin plugins

Ventajas de velocidad integradas de Shopify

CDN global: Shopify usa la CDN de Fastly — cada página y activo se sirve desde nodos perimetrales cercanos al visitante
Optimización automática de imágenes: Shopify convierte automáticamente las imágenes cargadas al formato WebP y sirve el tamaño apropiado según el dispositivo
HTTP/3 y TLS 1.3: las tiendas Shopify usan una pila de protocolos moderna por defecto — no se requiere configuración de alojamiento
Renderizado en el servidor: las páginas de Shopify Liquid se renderizan en el servidor con caché — las páginas de producto se sirven típicamente desde caché, no se vuelven a renderizar por solicitud
Sin sobrecarga de base de datos en las visitas a páginas: a diferencia de WordPress que consulta la base de datos en cada solicitud, Shopify almacena en caché el HTML renderizado y lo sirve desde la CDN

Core Web Vitals en Shopify

Largest Contentful Paint (LCP)

Objetivo: menos de 2,5 segundos. El LCP suele ser la imagen principal de la página de inicio o la imagen principal del producto en las páginas de producto.
Optimización de la imagen principal: las imágenes principales deben servirse al tamaño correcto para la ventana gráfica. Evite usar una imagen de 3000 px para un banner de 1440 px. En el tema, use el filtro image_url de Shopify con el parámetro de ancho: {{ image | image_url: width: 1500 }}.
Precarga de la imagen LCP: añada <link rel="preload" as="image" href="..."> en el encabezado del tema para la imagen principal. Muchos temas lo hacen automáticamente.
Evite la carga diferida de la imagen LCP: NO añada loading="lazy" a la imagen principal/LCP. La carga diferida retrasa el elemento LCP.

Cumulative Layout Shift (CLS)

Objetivo: menos de 0,1. El CLS lo causan los elementos que se mueven después del renderizado inicial — generalmente imágenes sin dimensiones declaradas, fuentes web que se cargan y desplazan el texto, o contenido inyectado dinámicamente (banners, avisos de cookies).
Dimensiones de las imágenes: declare siempre el ancho y el alto en las etiquetas <img>. El image_url de Shopify incluye las dimensiones naturales — úselas.
Carga de fuentes: las fuentes web causan desplazamiento del diseño si se cambia de la fuente alternativa a la fuente web a mitad del renderizado. Use font-display: optional o font-display: swap con métricas de respaldo similares.
Contenido inyectado por aplicaciones: las aplicaciones que inyectan banners, widgets de chat o insignias de reseñas a menudo causan CLS. Compruebe qué aplicaciones contribuyen al desplazamiento del diseño usando Regiones de desplazamiento de diseño en Chrome DevTools.

Interaction to Next Paint (INP)

Objetivo: menos de 200 ms. El INP mide la capacidad de respuesta a las interacciones del usuario (clics, toques). Un INP deficiente se debe generalmente a una ejecución pesada de JavaScript que bloquea el hilo principal.
Scripts de aplicaciones: las aplicaciones de reseñas (Yotpo, Judge.me), las aplicaciones de fidelización y el chat en directo son causas habituales de INP deficiente. Audite qué scripts se ejecutan en las páginas de producto.
Scripts del tema de Shopify: algunas funciones del tema (añadir rápidamente al carrito, JavaScript de muestras de variante) pueden ser pesadas. Analice con el panel de Rendimiento de Chrome.

Optimización de imágenes más allá de los valores predeterminados de Shopify

Cargue a la resolución correcta: cargue las imágenes al doble del tamaño de visualización previsto (para pantallas retina), no al décuplo. Una imagen de producto que se muestra a 600 px de ancho debe cargarse a 1200 px, no a 3000 px.
JPEG vs. PNG: las fotos de producto deben ser JPEG (menor tamaño de archivo). Los logotipos y gráficos con transparencia deben ser PNG. Shopify convierte automáticamente a WebP para los navegadores compatibles.
Texto alternativo: cada imagen de producto debe tener texto alternativo descriptivo. En Shopify, configure el texto alternativo en cada imagen en el editor de producto.
Imágenes responsive: use el patrón srcset de Shopify en las plantillas del tema: {{ image | image_url: width: 800 }} 800w, {{ image | image_url: width: 1200 }} 1200w
Vídeo: los vídeos de producto deben alojarse en Shopify (preferido) o incrustarse desde YouTube/Vimeo (no archivos de vídeo auto-alojados). Los vídeos auto-alojados aumentan drásticamente el peso de la página.

Auditoría de aplicaciones: la palanca de velocidad más efectiva

Cada aplicación de Shopify que carga JavaScript en la tienda añade tiempo de carga a su página. Una tienda con exceso de aplicaciones tiene 10–20 aplicaciones inyectando scripts:

Paso 1 de la auditoría: instale la extensión de Chrome Theme Inspector de Shopify — muestra qué scripts carga cada aplicación
Paso 2 de la auditoría: pase su tienda por PageSpeed Insights y GTmetrix — compruebe las recomendaciones «Reducir JavaScript no utilizado» y «Reducir CSS no utilizado»
Culpables habituales: chat en directo (Tidio, Gorgias), aplicaciones de reseñas (Yotpo — especialmente pesada), aplicaciones de fidelización (Smile, LoyaltyLion), aplicaciones de popup (Privy, Klaviyo popups), temporizadores de cuenta atrás
Desinstale las aplicaciones no utilizadas: si instaló una aplicación para probarla y no la desinstalé, puede que siga cargando código. Desinstale completamente (no solo desactive)
Carga diferida de aplicaciones no críticas: configure las aplicaciones de reseñas y los widgets de fidelización para que se carguen después de que se renderice el contenido principal. La mayoría de las aplicaciones tienen un ajuste para la carga diferida o la inyección de scripts asíncrona.
Sustituya aplicaciones pesadas: si una aplicación de reseñas puntúa mal en rendimiento, considere una alternativa más ligera. Judge.me es significativamente más ligera que Yotpo en su impacto en la carga de páginas.

Rendimiento del tema

Use un tema ligero: Dawn (el tema gratuito de Shopify) está muy optimizado. Los temas premium varían significativamente. Compruebe la puntuación de PageSpeed del tema antes de comprarlo — muchos desarrolladores de temas publican ahora referencias de velocidad.
Secciones no utilizadas: si su tema incluye secciones que nunca usa (preguntas frecuentes, carrusel de testimonios, temporizador de cuenta atrás), desactívelas o elimínelas. Las secciones no utilizadas pueden seguir cargando su JavaScript.
Minificación: Shopify minifica automáticamente el JavaScript y el CSS del tema en producción. No añada minificación duplicada en el código del tema.
Fuentes personalizadas: cargar fuentes web desde Google Fonts u otros hosts externos añade tiempo de búsqueda de DNS + descarga. Aloje las fuentes en su tema para un mejor rendimiento, o use fuentes del sistema para los elementos no críticos para la marca.
Bloqueo del renderizado: evite las etiquetas <script> síncronas en el <head>. Todos los scripts del tema deben usar los atributos defer o async.

Rendimiento de las páginas de colección

Las páginas de colección con muchos productos pueden ser lentas de renderizar: use paginación (Shopify por defecto: 20–50 productos por página) en lugar de desplazamiento infinito para colecciones grandes
Aplicaciones de filtrado: las aplicaciones de filtrado (Boost Commerce, Searchanise) añaden JavaScript significativo. Pruebe la velocidad antes y después de la instalación.
Imágenes de tarjetas de producto: las miniaturas en las cuadrículas de colección suelen ser el activo más pesado. Use la carga diferida en todas las imágenes de tarjeta de producto excepto la primera fila visible: loading="lazy" en todas las tarjetas excepto la primera fila.
Muestras: los scripts de muestras de color pueden ser pesados. Analice el impacto del rendimiento de la funcionalidad de muestras antes de implementarla.

Herramientas de prueba de velocidad

Puntuación de velocidad de Shopify: Tienda Online → Temas → su tema — muestra la puntuación de velocidad de Shopify (basada en Google Lighthouse). Objetivo: 50+, ideal: 70+.
PageSpeed Insights: pagespeed.web.dev — pruebe móvil y escritorio por separado. Céntrese en el móvil (puntuaciones más bajas, más representativas de la experiencia del usuario real).
GTmetrix: gtmetrix.com — cascada detallada de cada recurso cargado. Identifique qué aplicaciones añaden más peso.
WebPageTest: webpagetest.org — la prueba de rendimiento más detallada. Elija un servidor en la ubicación que coincida con su mercado objetivo.
Shopify Analyzer: ecommerceanalytics.io/shopify-speed-test — análisis de velocidad específico de Shopify.

Lista de verificación de optimización de velocidad

Ejecute PageSpeed Insights en la página de inicio, una página de colección y una página de producto — registre las puntuaciones de referencia
Audite todas las aplicaciones instaladas — desinstale las que no se usen activamente
Compruebe qué aplicaciones cargan scripts en las páginas de la tienda — desactive la inyección de scripts para las aplicaciones que no lo necesitan
Revise la resolución de la imagen principal — asegúrese de que no es excesivamente grande
Añada la precarga de la imagen LCP en el encabezado del tema
Verifique que no hay carga diferida en las imágenes principales/LCP
Compruebe que las dimensiones de las imágenes están declaradas en el HTML — corrija los atributos de ancho/alto faltantes
Audite la carga de fuentes web — cambie a font-display: swap con métricas de respaldo similares
Active la carga diferida en las imágenes de tarjetas de producto (excepto la primera fila)
Compruebe la puntuación de velocidad de Shopify en el panel del tema — objetivo: 50+
Ejecute la cascada de GTmetrix — identifique los 3 recursos más pesados y aborde cada uno
Vuelva a ejecutar PageSpeed tras los cambios — documente la mejora

La migración de WooCommerce a Shopify es uno de los pocos momentos en los que se tiene una pizarra en blanco en cuanto al rendimiento. Las tiendas WooCommerce acumulan deuda de rendimiento gradualmente — plugins añadidos a lo largo de años, un tema reemplazado pero con hojas de estilo antiguas conservadas, tablas de base de datos de plugins desactivados. En la migración, esa pizarra se limpia. El error que cometen la mayoría de las tiendas es recrear inmediatamente todas sus aplicaciones de WooCommerce en Shopify — añadiendo 15 aplicaciones en la primera semana. En su lugar, funcione con el conjunto mínimo de aplicaciones viables durante 30 días, mida sus puntuaciones de velocidad y añada aplicaciones de una en una, probando el impacto en la velocidad después de cada una. Este enfoque le da una tienda que sigue siendo rápida en lugar de degradarse gradualmente — y la disciplina para eliminar una aplicación que no aporta suficiente valor para justificar su coste en rendimiento.

Optimización de la velocidad de la tienda Shopify después de WooCommerce (2026)