De D a A: Cómo hicimos que la tienda Shopify de SuperBra fuera drásticamente más rápida

SuperBra es una tienda neerlandesa de lencería y trajes de baño con una base de clientes leales, tres tiendas físicas y una tienda en Shopify que tiene mucho peso. Cuando analizamos el sitio en octubre de 2026, funcionaba, pero no se sentía rápido. En GTmetrix, la página de inicio tenía una D en rendimiento (60/100) y las páginas de producto estaban peor (62 en general, 47 en rendimiento). En dos sesiones de trabajo enfocadas, una el 15 de octubre y otra el 19 de octubre, llevamos la página de inicio a un 91 (calificación A) y las páginas de producto a 87 (calificación B) en nuestras mejores mediciones.

Aviso previo: las puntuaciones de laboratorio varían de una ejecución a otra, especialmente el Tiempo Total de Bloqueo. A continuación, mostramos el mejor resultado, el rango típico y lo que le diríamos a cualquier cliente sobre esos números.

El punto de partida: una calificación D y una página pesada

La primera auditoría (GTmetrix, Chrome, Ámsterdam) mostró una página que visualmente estaba bien, pero era costosa de ejecutar:

• Página de inicio: puntuación de rendimiento 60 (D), Tiempo Total de Bloqueo 699 ms, 382 solicitudes, 4,2 MB transferidos, completamente cargada en 24 segundos.
• Página de producto: puntuación de GTmetrix 62 (D), rendimiento 47, Tiempo Total de Bloqueo 2.468 ms, LCP 2,5 s, 387 solicitudes, 4,3 MB, completamente cargada en 26,6 segundos.

Las causas raíz no eran exóticas. Eran las sospechosas habituales en una tienda Shopify madura que ha crecido a lo largo de varios años: JavaScript pesado y duplicado, etiquetas de seguimiento y marketing que se cargaban más de una vez, imágenes servidas como fondos CSS que el navegador no podía priorizar y código de tema heredado escrito antes de que existieran las herramientas modernas de imágenes de Shopify.

Paso 1: Corregir cómo se cargan las imágenes

La primera sesión (15 de octubre) se centró por completo en las imágenes, porque ellas deciden cuándo la página parece lista.

• Los fondos CSS se convirtieron en imágenes reales. Las secciones de cabecera y reseñas usaban background-image, lo que oculta la imagen del escáner de precarga del navegador. Las reconstruimos con <img> y <picture>, y la primera imagen de cabecera ahora se carga de forma anticipada con fetchpriority="high".
• Un fragmento de imagen responsiva, bien hecho. El fragmento de imagen del tema se reescribió en torno a srcset, sizes y loading="lazy" nativos, para que el navegador elija el archivo correcto para cada pantalla en lugar de que un cargador diferido de JavaScript decida después.
• URLs de imágenes heredadas reemplazadas. Alrededor de 150 llamadas antiguas de img_url: 'NNNx' en 16 archivos del tema se convirtieron al filtro image_url actual de Shopify, que sirve formatos modernos en las dimensiones correctas.

Resultado: el peso de las imágenes de la primera carga bajó de aproximadamente 985 KB a 361 KB, y la página de inicio saltó de 70 a los bajos 80 el mismo día.

Paso 2: Dejar de enviar JavaScript que nadie necesita

Con las imágenes solucionadas, el problema restante era JavaScript, que es lo que impulsa el Tiempo Total de Bloqueo. Tres cambios marcaron la mayor diferencia:

• jQuery y SweetAlert2 eliminados de la ruta crítica. Ambos se cargaban en cada página para una sola ventana modal de reposición de stock. jQuery desaparece por completo de ese flujo, y SweetAlert2 ahora se carga solo cuando un cliente realmente abre la ventana modal.
• Código duplicado de venta cruzada eliminado. La página de producto estaba ejecutando dos implementaciones de venta cruzada al mismo tiempo, y una de ellas lanzaba un error de crossSellSettings already declared en cada visita. Eliminamos el duplicado, desactivamos la inyección de aplicación redundante y verificamos que la venta cruzada del cajón del carrito siga funcionando.
• Seguimiento consolidado. Google Tag Manager se cargaba desde más de un lugar, y PostHog estaba instalado directamente en el tema. El código a nivel de tema desapareció, las etiquetas ahora se ejecutan a través de los Eventos de Cliente de Shopify, y los cargadores duplicados se desactivaron.

Paso 3: Reconstruir la galería de la página de producto

La galería de productos y la ventana emergente eran una de las partes más pesadas de la página de producto. Reescribimos el marcado y la lógica de la galería, corregimos los problemas de apilamiento de la ventana emergente y del cajón de recogida que aparecieron en el camino, y agregamos una indicación de precarga para la imagen principal del producto para que el elemento de la mayor pintura de contenido comience a descargarse lo antes posible.

También le dimos al bloque de recomendaciones de productos un marcador de posición esquelético con una altura reservada. El contenido llega después, pero el diseño nunca salta: el cambio de diseño acumulativo de la página de producto se mantiene en aproximadamente 0.0001.

Los resultados

Misma herramienta, misma ubicación (GTmetrix, Chrome, Ámsterdam), antes versus nuestra mejor ejecución después de la segunda sesión:

Los números principales: el Tiempo Total de Bloqueo bajó aproximadamente un 87% en la página de inicio y un 87% en la página de producto, el tiempo de carga completa se redujo aproximadamente dos tercios, y se transfirió aproximadamente un tercio menos de datos.

Una nota honesta sobre las puntuaciones de laboratorio

Volvimos a probar ambas páginas al día siguiente de los cambios finales y obtuvimos un 81 (calificación B) en cada una. Eso es normal. Las pruebas de laboratorio se ejecutan en infraestructura compartida, y el Tiempo Total de Bloqueo en particular varía de una ejecución a otra. Solo en la tarde del 19 de octubre, la página de inicio obtuvo 89, 85 y 91 en tres ejecuciones. Lo que importa es la dirección y el rango: el sitio pasó de una D a una B estable con ejecuciones de calificación A, y las mejoras subyacentes (menos JavaScript, imágenes más ligeras, diseño estable) son lo que los visitantes reales sienten, diga lo que diga una sola prueba.

Lo que aún está en la lista

El peso restante es principalmente de terceros: scripts de marketing y analítica y una gran aplicación de búsqueda. Estas son decisiones de negocio tanto como técnicas, por lo que el siguiente paso es una auditoría de aplicaciones con el equipo de SuperBra, decidiendo lo que cada script se gana. También hay unos pocos elementos más pequeños en cola: recortar qué tan temprano se cargan las recomendaciones de productos, y eliminar un bloque de venta cruzada que actualmente carga scripts pero no renderiza nada.

Conclusiones clave

• Comienza con lo que el usuario ve. Corregir la carga de imágenes primero dio la mayor victoria visible con el menor riesgo.
• Audita los scripts antes de agregar código. La mayor parte de la ganancia vino de eliminar JavaScript duplicado o innecesario, no de un código nuevo e ingenioso.
• Trabaja en un tema duplicado y prueba antes de publicar. Cada cambio aquí se verificó en un tema duplicado, manteniendo el tema antiguo como un rollback instantáneo.
• Reporta rangos, no puntuaciones individuales. Un buen caso de estudio muestra el antes, la mejor ejecución y la ejecución típica.

¿Quieres lo mismo para tu tienda? Si tu sitio de Shopify se siente más lento de lo que debería, reserva una llamada y realizaremos una auditoría de rendimiento y te mostraremos dónde están las mayores victorias.