Cómo mejorar la velocidad de tu tienda Shopify en 2026

La velocidad de tu tienda Shopify no es solo una métrica técnica — es un factor directo en tus ingresos. Cada segundo extra de carga reduce tu tasa de conversión entre un 2% y un 4%, según datos de Portent.

Y si tu tienda online no está en Shopify, no cierres todavía: lo que hace lenta a una tienda es lo mismo en todas partes. Demasiados scripts de terceros, imágenes más pesadas de lo que hace falta, fuentes que bloquean el texto, JavaScript que se ejecuta antes de tiempo. Las métricas con las que se mide también son las mismas, porque las pone Google y no la plataforma. Lo único que cambia es dónde metes mano.

Para que sepas qué te sirve: medir el rendimiento, las imágenes, el JavaScript y las fuentes valen para cualquier ecommerce —los ejemplos están escritos en Liquid, pero la decisión de fondo es idéntica en WooCommerce, PrestaShop o un headless a medida—. Lo específico de Shopify es la auditoría de apps y el informe de velocidad del panel, que son las dos secciones donde se nota la plataforma.

Por qué importa la velocidad

Google usa Core Web Vitals como señal desde 2021. Las tres métricas actuales son LCP (cuánto tarda en verse lo principal), CLS (cuánto se mueve la página mientras carga) e INP, que desde marzo de 2024 sustituye a FID y mide cuánto tarda la página en responder cuando tocas algo. Para una tienda hay algo aún más importante que las tres: la paciencia de quien compra.

Google lleva años midiendo lo mismo: cuanto más tarda una página en móvil, más gente se va antes de verla. No hace falta un porcentaje exacto para entender la dirección.

En Shopify, los cuellos de botella más comunes son:

1. Demasiadas apps en el tema
2. Imágenes sin optimizar
3. JavaScript pesado sin control
4. Fuentes personalizadas mal cargadas
5. Animaciones innecesarias

Midiendo el rendimiento actual

Antes de optimizar, necesitás medir. Shopify tiene su propio reporte de velocidad, pero te recomiendo estas herramientas:

# Herramientas principales
- Google PageSpeed Insights  → métricas de campo y laboratorio
- Web PageTest               → waterfall detallado
- Shopify Theme Inspector    → rendimiento de Liquid
- Chrome DevTools            → coverage y bundles

Shopify Speed Report

Dentro de tu admin de Shopify, andá a Online Store > Themes > View Speed Report. Ahí ves cómo se compara tu tienda contra otras similares.

Estrategia de optimización

1. Auditoría de apps

Cada app que instalás agrega JavaScript, CSS y a veces consultas al servidor. Revisá:

• ¿La app sigue siendo útil?
• ¿Se puede reemplazar con código Liquid nativo?
• ¿Está cargando scripts en páginas donde no se necesita?

{%- comment -%} Cargar script solo en página de producto {%- endcomment -%}
{%- if template.name == 'product' -%}
  <script src="{{ 'mi-app.js' | asset_url }}" defer></script>
{%- endif -%}

2. Optimización de imágenes

Shopify ya optimiza imágenes automáticamente con su CDN, pero hay prácticas que ayudan:

• Usar loading="lazy" en imágenes below the fold
• Definir width y height explícitos para evitar CLS
• Pedir cada imagen al tamaño que realmente se va a mostrar con el filtro image_url. Si ves img_url en tu tema, está obsoleto: Shopify lo reemplazó por image_url

<img
  src="{{ product.featured_image | image_url: width: 600 }}"
  srcset="{{ product.featured_image | image_url: width: 300 }} 300w,
          {{ product.featured_image | image_url: width: 600 }} 600w,
          {{ product.featured_image | image_url: width: 900 }} 900w"
  sizes="(max-width: 768px) 100vw, 50vw"
  loading="lazy"
  width="600"
  height="750"
  alt="{{ product.featured_image.alt | escape }}"
>

3. Carga diferida de JavaScript

Usá los atributos defer y async para evitar que los scripts bloqueen el renderizado:

Atributo	Comportamiento
defer	Descarga en paralelo, ejecuta al final en orden
async	Descarga en paralelo, ejecuta apenas termina
Sin attr	Bloquea el renderizado hasta descargar y ejecutar

{{ 'theme.js' | asset_url | script_tag | replace: '>', ' defer>' }}

4. Fuentes optimizadas

Cargar fuentes de Google Fonts puede agregar 200-400ms. Estrategias:

• Usar font-display: swap para evitar FOIT (Flash of Invisible Text)
• Auto-hospedar las fuentes en lugar de usar CDN de Google
• Subsetear los caracteres que realmente necesitás

@font-face {
  font-family: 'Inter';
  src: url('Inter-variable.woff2') format('woff2');
  font-display: swap;
  font-weight: 400 700;
}

Métricas objetivo para 2026

Métrica	Bueno	Regular	Malo
LCP	< 2.0s	2.0s - 3.5s	> 3.5s
INP	< 150ms	150ms - 350ms	> 350ms
CLS	< 0.05	0.05 - 0.15	> 0.15
TTFB	< 600ms	600ms - 1000ms	> 1000ms

Conclusión

Optimizar velocidad no es un proyecto de una semana. Es un proceso continuo. Poné un día al mes para revisar métricas, auditar apps nuevas y ajustar lo que sea necesario. Empezá por lo que más impacto tenga y trabajá hacia abajo.

---

La velocidad casi nunca se arregla instalando otra app: se arregla en el tema. Cómo trabajo esa parte está en desarrollo Shopify a medida, y si el problema de tu tienda va más allá del rendimiento, conviene empezar por una auditoría antes de decidir por dónde meter mano.