Cómo mejorar la velocidad de tu Shopify y pasar Core Web Vitals

La velocidad de una tienda tiene un problema: el dueño nunca la sufre. Tú entras con la web cacheada, en buena conexión y sabiendo dónde está cada cosa. Tu cliente entra desde el móvil, con datos, a una página que no ha visto nunca. Si tarda, cierra, y esa venta no aparece en ningún informe: simplemente no ocurre.

Además del efecto directo en conversión, Google usa Core Web Vitals como señal de posicionamiento desde 2021. Una tienda lenta compite en desventaja en el buscador y en la ficha de producto a la vez. La buena noticia: en Shopify, pasar los tres umbrales en verde es factible en unas semanas de trabajo ordenado, sin cambiar de tema en la mayoría de casos. Esta guía recorre las métricas y las siete optimizaciones que aplicamos primero.

Qué mide Core Web Vitals exactamente

Core Web Vitals son tres métricas que Google mide sobre usuarios reales (el percentil 75 de las visitas, no tu prueba puntual desde el ordenador de casa). Los umbrales son un estándar público:

LCP: el contenido principal debe pintarse en 2,5 segundos

El LCP (Largest Contentful Paint) mide cuánto tarda en ser visible el elemento más grande de la primera pantalla, que en una tienda suele ser la imagen principal del producto o el banner de la home. El umbral bueno es 2,5 segundos o menos.

Cómo acelerarlo:

• Sirve la imagen principal en WebP o AVIF, con dimensiones explícitas
• Usa fetchpriority="high" y loading="eager" solo en esa imagen; el resto, en diferido
• Reduce las apps que inyectan JavaScript en home y ficha de producto
• Precarga la fuente principal

INP: la web debe responder en menos de 200 ms

El INP (Interaction to Next Paint) mide cuánto tarda la página en reaccionar cuando el usuario toca algo: abrir el carrito, cambiar de variante, desplegar un menú. El umbral bueno es 200 milisegundos.

Cómo mejorarlo:

• Reduce el JavaScript de terceros: apps, píxeles de seguimiento, chats, widgets
• Usa defer o async en los scripts que no sean críticos
• Elimina escuchadores de eventos innecesarios del tema
• Comprueba que abrir el carrito no bloquea el hilo principal

CLS: nada debe moverse mientras carga (menos de 0,1)

El CLS (Cumulative Layout Shift) mide cuánto salta el contenido durante la carga. Es la métrica más frustrante de sufrir: vas a tocar un botón, la página se desplaza y acabas pulsando otra cosa. El umbral bueno es 0,1.

Cómo mejorarlo:

• Define width y height en todas las imágenes
• Reserva espacio fijo para banners y avisos antes de que carguen
• Carga las fuentes con font-display: swap y dimensiones reservadas
• No insertes contenido dinámico por encima de lo que el usuario ya está viendo

Las 7 optimizaciones que aplicamos primero

1. Auditoría de apps: desinstala lo que no vende

Es la causa número uno de lentitud que encontramos en auditorías. Las apps se acumulan con los años, cada una inyecta su propio código en todas las páginas, y muchas siguen cargando aunque ya no las uses.

El proceso: lista todas las apps instaladas y, para cada una, pregúntate si genera ingresos o cumple una función operativa real. Si la respuesta es no, desinstala. Y después revisa el código del tema, porque es habitual que las apps dejen fragmentos residuales que siguen cargando tras la desinstalación.

2. Imágenes: formato y tamaño correctos

Shopify tiene CDN, pero la CDN no arregla una imagen mal subida. Una foto de varios megas donde bastaría una fracción es tiempo de carga regalado, sobre todo en móvil.

• Sube imágenes de producto a un tamaño razonable: 2000 px de ancho como máximo
• Deja que Shopify sirva WebP o AVIF con los filtros de imagen del tema
• Para banners de la home, ajusta el tamaño al hueco real que ocupan

3. Liquid: cuidado con los bucles anidados

Los bloques {% for %} anidados en Liquid se ejecutan en el servidor y encarecen el tiempo de respuesta de la página. Evita bucles dentro de bucles, usa limit donde tenga sentido y no recorras colecciones enteras para pintar cuatro productos.

4. Carga diferida: solo lo que se ve al entrar

Todo lo que queda por debajo de la primera pantalla (reseñas, productos relacionados, secciones secundarias) puede esperar a que el usuario baje.

<!-- Imagen principal: carga inmediata y prioritaria -->
<img src="hero.webp" loading="eager" fetchpriority="high" width="1920" height="800" />

<!-- Resto de imágenes: en diferido -->
<img src="producto.webp" loading="lazy" width="1000" height="1000" />

5. Precarga de lo crítico

Dile al navegador qué necesita primero, añadiendo en el <head> del tema:

<link rel="preload" as="image" href="{{ hero_image | img_url: '1920x' }}" />
<link rel="preload" as="font" href="tu-fuente.woff2" type="font/woff2" crossorigin />

Con la imagen del LCP y la fuente principal precargadas, el resto de optimizaciones rinde mucho más.

6. El tema marca tu techo de velocidad

No todos los temas de Shopify parten del mismo sitio. Dawn, el tema gratuito de referencia, está construido pensando en rendimiento; algunos temas de pago cargan librerías y efectos que penalizan cada página. Si estás eligiendo tema, mide una demo con PageSpeed Insights antes de comprar. Si ya tienes uno lento, exprime las seis optimizaciones anteriores antes de plantearte el cambio, porque migrar de tema es un proyecto en sí mismo.

7. Monitoriza con datos de usuarios reales

Una medición puntual no vale: necesitas la foto continua.

• Google Search Console → informe de Core Web Vitals (datos de campo, los que cuentan para el ranking)
• PageSpeed Insights → diagnóstico página a página
• Admin de Shopify → puntuación de velocidad de la tienda

Revisa el informe de Search Console cada semana durante la optimización y cada mes después. Las regresiones casi siempre llegan con una app nueva o un cambio de tema.

Tabla de referencia rápida

Los umbrales de LCP, INP y CLS son el estándar público de Core Web Vitals; la fila de puntuación de Shopify es el criterio que usamos nosotros como referencia.

La velocidad es la base de todo lo demás

Ninguna campaña de tráfico rinde bien sobre una tienda lenta: pagas el clic igual, pero una parte de las visitas se va antes de ver el producto, y eso encarece cada cliente captado. Es una de las palancas que tocamos primero cuando trabajamos la reducción del CAC, y forma parte del trabajo técnico continuo de nuestro modelo de growth partner: optimizar una vez es fácil, mantener la tienda rápida mientras se le añaden apps y campañas es lo difícil.

¿Tu tienda carga lento y no sabes por qué? Cuéntanos tu caso y te decimos qué está fallando y cómo arreglarlo. Te respondemos en menos de 24 h y, si encaja, te enviamos el plan en 48 h.