Por qué tu tienda Shopify va lenta, y los arreglos que importan

Casi ninguna tienda Shopify lenta lo es por culpa de Shopify. Lo es por lo que se le fue añadiendo con los años: apps, imágenes enormes, vídeo en reproducción automática, fuentes de más y etiquetas de seguimiento que nadie recuerda haber puesto.

La buena noticia: los arreglos suelen ser baratos, y no hace falta un tema nuevo para conseguir casi toda la mejora.

Mide lo correcto

Hay dos tipos de datos de velocidad, y a menudo no coinciden:

• Notas de laboratorio (Lighthouse, la cifra grande de PageSpeed Insights): una prueba, en un móvil simulado, en un momento. Sirven para encontrar problemas, no para juzgar la tienda.
• Datos de campo (Core Web Vitals): lo rápida que fue de verdad la tienda para tus visitantes, con datos de usuarios de Chrome de los últimos 28 días. Es lo que usa Google.

Las tres Core Web Vitals de Google, y el límite de «bueno» de cada una, medidas en el percentil 75 de las visitas:

Métrica	Qué mide	Bueno
LCP, Largest Contentful Paint	Cuándo aparece la imagen o el titular principal	2,5 s o menos
INP, Interaction to Next Paint	Lo rápido que responde la página a un toque o clic	200 ms o menos
CLS, Cumulative Layout Shift	Cuánto se mueven las cosas mientras carga	0,1 o menos

INP sustituyó a la antigua métrica FID en marzo de 2024. Tiendas que antes iban bien ahora suspenden INP, porque los scripts pesados de las apps hacen que cada toque se sienta lento.

En Shopify, empieza por el resumen de rendimiento en Tienda online › Temas y luego abre los informes de rendimiento web en Estadísticas › Informes. Muestran el LCP, INP y CLS reales de tu tienda a lo largo del tiempo, por tipo de página y por URL, con datos de usuarios de Chrome que comparten métricas. Busca la fecha en que empeoraron y mira qué cambió esa semana: una app nueva, una sección nueva, un vídeo nuevo.

Las causas habituales, por orden

1. Apps

Cada app que muestra algo en la tienda puede cargar su propio JavaScript, a menudo en todas las páginas, incluso donde no hace nada. Reseñas, pop-ups, chat, ventas cruzadas, selectores de moneda, listas de deseos y píxeles de seguimiento se suman rápido.

Qué hacer:

• Haz una lista de todas las apps y pregúntate de cada una: ¿ha dado dinero o ahorrado tiempo en los últimos 90 días? Quita las que no.
• Elige apps hechas con extensiones de tema (bloques y embeds de app). Cargan a través de Shopify sin tocar los archivos del tema, y Shopify quita sus bloques del tema cuando las desinstalas.
• Las apps antiguas editaban directamente los archivos del tema, y Shopify avisa de que ese código no siempre se borra al desinstalarlas. Busca en el tema lo que dejaron: snippets, etiquetas script y llamadas {% render %} que siguen cargando.
• Sustituye tres apps por una cuando puedas. Para chat, reseñas y pop-ups hay opciones todo en uno.

2. Imágenes

La imagen de portada suele ser el elemento LCP. Si es una foto de 3.000 píxeles, el contenido principal la espera.

Qué hacer:

• Sube imágenes no más anchas de lo necesario (unos 2.000 px para una portada a todo el ancho es más que suficiente).
• En el código del tema, usa el filtro image_url de Shopify con un width, y srcset para que los móviles reciban un archivo de tamaño móvil. El CDN de Shopify elige solo el mejor formato para cada navegador, incluidos WebP y AVIF.
• No apliques carga diferida a la imagen de portada; sí a todo lo que está por debajo de la primera pantalla.
• Da a cada imagen un ancho y un alto para que el diseño no salte (CLS).

3. Vídeo

Un vídeo de fondo en reproducción automática puede pesar más que el resto de la página junta.

Qué hacer:

• Haz los bucles de portada cortos (5 a 10 segundos), sin sonido y muy comprimidos: unos pocos megas como mucho.
• Prepara un archivo vertical más pequeño para móviles.
• Muestra primero una imagen fija y arranca el vídeo cuando la página ya ha cargado.
• Incrustar reproductores de YouTube o Vimeo arriba de la página carga mucho código extra; usa una imagen con botón de play que cargue el reproductor al tocarla.

4. Fuentes

Cada familia y cada peso es otra descarga antes de que aparezca el texto.

• Usa una o dos familias y solo los pesos que muestras.
• Mejor fuentes de la biblioteca de Shopify o archivos alojados en la tienda, con font-display: swap para que el texto se vea al momento.

5. Etiquetas y seguimiento

La analítica, los píxeles de anuncios y los mapas de calor ejecutan scripts. Quédate con los que de verdad lees. Cárgalos con los eventos de cliente de Shopify (píxeles web) cuando puedas, que funcionan aislados en lugar de en la página principal.

Cuándo merece la pena un tema nuevo

Rehaz cuando el problema es el propio tema: tiene años, lo han editado varios desarrolladores, está hecho con constructores de páginas que generan páginas enormes o no admite bloques de app. Los temas de la Theme Store de Shopify deben sacar de media al menos 60 en rendimiento de Lighthouse en portada, colección y producto, en móvil y escritorio. Los temas gratis de Shopify son un punto de partida ligero.

Haz antes los arreglos baratos de todas formas. Te dicen cuánto del problema era el tema.

Lista para una tarde

• Abre los informes de rendimiento web y apunta LCP, INP y CLS
• Quita las apps que no se ganaron su sitio en los últimos 90 días
• Busca en el tema el código que dejaron las apps quitadas
• Reduce la imagen de portada; comprueba que no tiene carga diferida
• Comprime o cambia el vídeo de portada; añade una versión para móvil
• Deja las fuentes en dos familias y los pesos que usas
• Quita las etiquetas de seguimiento que nadie lee
• Vuelve a mirar los informes tras un mes de tráfico real