Cómo optimizar la velocidad de tu Shopify: guía técnica 2026
Tu tienda Shopify es lenta. Y te está costando dinero.
No es una opinión: Google lo mide. Desde 2021, los Core Web Vitals son factor de ranking. Si tu tienda carga lenta, pierdes posiciones en Google y pierdes ventas. Un retraso de 1 segundo en la carga reduce las conversiones un 7%. En ecommerce, eso son miles de euros al mes.
En Pango Studio llevamos años optimizando tiendas Shopify. Este artículo es la guía que le damos a nuestros clientes cuando quieren entender qué pasa con su velocidad y cómo solucionarlo.
Core Web Vitals: qué mide Google exactamente
Google evalúa tres métricas principales:
- LCP (Largest Contentful Paint): Tiempo que tarda en renderizarse el elemento más grande visible. Objetivo: menos de 2,5 segundos.
- INP (Interaction to Next Paint): Mide la capacidad de respuesta de la página cuando el usuario interactúa. Objetivo: menos de 200 milisegundos.
- CLS (Cumulative Layout Shift): Cuánto se mueven los elementos mientras carga la página. Objetivo: menos de 0,1.
Si fallas en alguna de estas tres, Google lo sabe. Y tus clientes también: la frustración de esperar a que cargue una página de producto es la razón número uno de abandono.
Los culpables reales de la lentitud en Shopify
Después de auditar cientos de tiendas, estos son los problemas que vemos una y otra vez:
Demasiadas apps instaladas
Cada app que instalas inyecta JavaScript y CSS en tu tienda. Hemos visto tiendas con 25-30 apps donde más de la mitad estaban desactivadas pero seguían cargando sus scripts. Cada script adicional es una petición HTTP más, un bloqueo de renderizado más.
Scripts que bloquean el renderizado
JavaScript y CSS que se cargan en el <head> sin atributos defer o async bloquean toda la página. El navegador no puede pintar nada hasta que termine de descargar y ejecutar esos archivos.
Imágenes sin optimizar
Fotos de producto subidas directamente desde la cámara, a 4000×3000 píxeles y 5 MB cada una. Multiplicado por 20 productos en una colección, estás pidiendo al navegador que descargue 100 MB de imágenes.
Themes pesados y sobrecaracterizados
Themes «multipropósito» con docenas de secciones, sliders, animaciones y efectos que nunca usas pero que siempre cargan. El código muerto pesa igual que el código activo.
Cómo auditar la velocidad de tu Shopify
Antes de arreglar nada, necesitas datos. Estas son las herramientas que usamos en Pango Studio:
- Google PageSpeed Insights: La referencia oficial. Te da puntuación de Core Web Vitals con datos reales de usuarios (CrUX) y datos de laboratorio. pagespeed.web.dev
- Lighthouse (Chrome DevTools): Auditoría completa integrada en Chrome. Abre DevTools → pestaña Lighthouse → genera informe. Te dice exactamente qué está fallando y por qué.
- Chrome DevTools — Network tab: Para ver cada recurso que carga tu tienda, cuánto pesa y cuánto tarda. Ordena por tamaño para encontrar los peores culpables.
- WebPageTest: Test desde diferentes ubicaciones y dispositivos. Ideal para ver cómo carga tu tienda desde México si tu servidor está optimizado para España, o viceversa.
10 quick wins para acelerar tu Shopify hoy
Estas son las optimizaciones que más impacto tienen con menor esfuerzo. Empieza por las primeras y ve bajando:
1. Elimina apps que no uses
No basta con desactivarlas. Desinstálalas. Después, revisa tu theme en busca de código residual que hayan dejado (snippets, assets). Hemos visto apps que dejan 200 KB de JavaScript huérfano después de desinstalarlas.
2. Carga scripts con defer o async
Todo JavaScript de terceros que no sea crítico para el primer renderizado debe llevar el atributo defer. Esto incluye scripts de analytics, chat en vivo, pop-ups y reviews.
3. Convierte imágenes a WebP
Shopify genera automáticamente versiones WebP si usas el filtro de Liquid correcto: | image_url: width: 800 | image_tag. Asegúrate de que tu theme lo implementa. WebP pesa entre un 25% y un 35% menos que JPEG a la misma calidad.
4. Implementa lazy loading en imágenes
Las imágenes que no están en el viewport inicial no necesitan cargarse inmediatamente. Usa loading="lazy" en todas las imágenes excepto la hero y el LCP. Shopify lo soporta nativamente en los themes más recientes.
5. Reduce las fuentes tipográficas
Cada peso de fuente es una petición adicional. ¿Necesitas realmente Regular, Medium, SemiBold, Bold y ExtraBold? Probablemente con Regular y Bold es suficiente. Y usa font-display: swap para que el texto se muestre inmediatamente con una fuente del sistema mientras carga la definitiva.
6. Preconnect a dominios de terceros
Si cargas recursos de CDNs externos (fuentes de Google, scripts de analytics, widgets), añade <link rel="preconnect"> en el <head> para que el navegador establezca la conexión antes de necesitar el recurso.
7. Optimiza los loops de Liquid
En Shopify, Liquid se renderiza en el servidor. Un loop que recorre todos los productos de una colección de 500 items para filtrar 10 es un desperdicio. Usa limit, paginación y evita cálculos innecesarios dentro de los for loops.
8. Minimiza el JavaScript inline
El JS inline en las secciones de Shopify no se puede cachear. Si tienes bloques <script> repetidos en cada sección, extráelos a un archivo .js externo que el navegador pueda cachear.
9. Usa la CDN de Shopify correctamente
Shopify tiene una CDN global potente (Cloudflare). Asegúrate de que todos los assets se sirven desde cdn.shopify.com y no desde dominios propios sin CDN. No subas assets a servidores externos si Shopify ya los puede servir.
10. Elimina sliders y carruseles innecesarios
Los sliders son uno de los mayores enemigos del rendimiento. Cargan múltiples imágenes de gran tamaño, necesitan JavaScript para funcionar y causan CLS. Sustitúyelos por una imagen hero estática con un CTA claro. Convierte más y carga más rápido.
Optimizaciones avanzadas
Si ya has aplicado los quick wins y quieres ir más allá:
Critical CSS
Extrae el CSS necesario para renderizar el contenido above-the-fold e insértalo inline en el <head>. El resto del CSS se carga de forma asíncrona. Esto elimina el CSS como recurso bloqueante.
Headless / Hydrogen
Para tiendas con requisitos extremos de rendimiento, Shopify Hydrogen permite un frontend totalmente personalizado con React y Remix, conectado a Shopify vía Storefront API. El rendimiento es espectacular, pero el coste de desarrollo es significativamente mayor.
Optimización de la CDN
Configura correctamente los headers de caché, habilita Brotli compression y asegúrate de que los recursos estáticos tienen un cache-control con max-age largo. Shopify gestiona gran parte de esto, pero los themes personalizados a veces rompen los defaults.
Impacto directo en SEO y conversión
Los números no mienten:
- Google confirma que Core Web Vitals son factor de ranking desde 2021.
- Un retraso de 1 segundo en el tiempo de carga reduce las conversiones un 7% (fuente: Akamai).
- El 53% de los usuarios móviles abandonan si la página tarda más de 3 segundos en cargar (fuente: Google).
- Las tiendas con LCP por debajo de 2,5s tienen un 24% más de tasa de conversión que las que superan los 4s.
Optimizar la velocidad no es un lujo técnico. Es una inversión directa en ingresos.
¿Tu tienda Shopify necesita una puesta a punto?
En Pango Studio hacemos auditorías de rendimiento completas: analizamos tu tienda, identificamos los cuellos de botella y los solucionamos. No vendemos humo; te enseñamos los datos antes y después.
Si tu tienda carga lento y quieres saber exactamente por qué, consulta nuestro servicio de SEO para Shopify o contacta con nosotros directamente.