¿Por qué mi tienda Shopify va lenta?

Una tienda lenta es frustrante para usted y para sus clientes. Las páginas tardan en aparecer, las imágenes cargan a trozos, los botones no responden enseguida o el diseño se mueve mientras la página todavía está cargando.

Como Shopify es una plataforma alojada, usted no gestiona los servidores. Shopify se encarga del alojamiento, de la red de distribución de contenidos y de buena parte de la infraestructura. Eso significa que la causa de una tienda lenta no suele ser "el servidor", sino lo que se carga encima:

• las apps y los scripts que añaden
• las imágenes y los vídeos
• el tema y sus funciones
• las herramientas de seguimiento y marketing
• el código personalizado añadido con el tiempo

La buena noticia es que la mayoría de estos factores están bajo su control. La no tan buena es que la velocidad rara vez se arregla con un único cambio. El primer paso más útil es medir correctamente, para saber qué es realmente lento antes de cambiar nada.

Esta guía explica las causas comunes, cómo medir la velocidad de una forma que refleje la experiencia de los clientes reales, qué mejoras suelen ser rápidas y cuáles requieren un trabajo más profundo.

¿Qué significa realmente "lenta"?

Cada persona se refiere a cosas distintas cuando habla de una tienda lenta, y cada una apunta a una causa diferente.

La página tarda mucho en aparecer

La pantalla se queda en blanco o casi vacía durante un rato. Suele estar relacionado con imágenes grandes en la parte superior de la página, secciones pesadas del tema o scripts que deben cargarse antes que el contenido.

La página aparece, pero no responde

Puede ver la página, pero al tocar el menú, un filtro o el botón de añadir al carrito no pasa nada durante un momento. Suele deberse a un exceso de JavaScript ejecutándose en el navegador, a menudo procedente de apps y herramientas de seguimiento.

El diseño se mueve durante la carga

El texto se desplaza hacia abajo cuando aparece una imagen o un banner, o un botón se mueve justo cuando intenta tocarlo. Suele deberse a imágenes sin dimensiones definidas, banners que cargan tarde, pop-ups o widgets de apps que se insertan en la página.

Solo algunas páginas van lentas

Si solo van lentas las páginas de producto, las colecciones grandes o los resultados de búsqueda, es probable que la causa sea propia de esas plantillas: muchas imágenes de producto, filtros, widgets de reseñas o apps de recomendaciones.

Saber cuál de estas situaciones tiene delante acelera mucho la investigación.

¿Qué son las Core Web Vitals?

Las Core Web Vitals son un conjunto de métricas que Google utiliza para describir la experiencia de carga y uso de una página. Son tres:

• Largest Contentful Paint (LCP) mide la rapidez con la que aparece el contenido principal, a menudo la imagen de cabecera o la imagen principal del producto.
• Interaction to Next Paint (INP) mide la rapidez con la que responde la página cuando alguien toca o hace clic.
• Cumulative Layout Shift (CLS) mide cuánto se mueve el diseño de forma inesperada durante la carga.

Google publica valores objetivo para cada una de ellas y clasifica los resultados como buenos, mejorables o deficientes. Herramientas como PageSpeed Insights le muestran en qué categoría están sus páginas.

Las Core Web Vitals no son lo único que importa en una tienda, pero son un lenguaje común útil. Además, reflejan problemas reales que notan los clientes: esperas, botones que no responden y diseños que se mueven.

¿Cómo mido la velocidad de mi tienda?

Hay dos tipos de datos, y es importante no confundirlos.

Datos de laboratorio: una prueba realizada por una herramienta

Cuando analiza una página con PageSpeed Insights, la herramienta la carga en un entorno simulado y genera una puntuación y una lista de sugerencias. Esto se llama datos de laboratorio.

Los datos de laboratorio son útiles para:

• detectar problemas concretos, como imágenes demasiado grandes o scripts pesados
• comparar el antes y el después de un cambio
• probar páginas que todavía no tienen mucho tráfico

Pero la puntuación puede variar de una prueba a otra y no refleja necesariamente lo que experimentan sus clientes en sus propios dispositivos y conexiones.

Datos de campo: lo que experimentan los visitantes reales

Si su tienda tiene suficiente tráfico, PageSpeed Insights también muestra datos recogidos de usuarios reales de Chrome durante las últimas semanas. Aparecen en la parte superior del informe y muestran las Core Web Vitals de esa página o de todo el sitio.

Shopify también ofrece un informe de rendimiento web en las analíticas del panel de administración, basado en visitas reales a su tienda. Muestra cómo evolucionan sus Core Web Vitals con el tiempo y puede ayudarle a relacionar cambios de velocidad con eventos como instalar una app o cambiar el tema.

Los datos de campo se acercan más a la realidad de la experiencia de sus clientes. Cuando los datos de laboratorio y los de campo no coinciden, dé más peso a los de campo.

Pruebe las páginas adecuadas

No pruebe solo la página de inicio. Los clientes suelen llegar directamente a páginas de producto y de colección desde buscadores o anuncios. Pruebe al menos:

• la página de inicio
• una página de colección popular
• una página de producto popular
• el carrito

Pruebe tanto en móvil como en ordenador. La mayoría de las tiendas reciben una gran parte de su tráfico desde teléfonos, que suelen tener procesadores y conexiones más lentos.

¿Qué suele hacer que una tienda Shopify vaya lenta?

Demasiadas apps y scripts

Cada app que añade algo a la tienda puede cargar su propio JavaScript, sus hojas de estilo, sus fuentes o peticiones a servidores externos. Una sola app rara vez marca una gran diferencia. Diez o veinte juntas sí pueden hacerlo.

Contribuyen con frecuencia:

• los widgets de reseñas
• los pop-ups y formularios de captación de correos
• el chat en directo
• las herramientas de upselling y cross-selling
• los conversores de moneda y las herramientas de traducción
• los widgets de recomendación de productos
• los programas de fidelización y de recomendación

Las apps que ha desinstalado también pueden dejar código en el tema, que quizá siga intentando cargarse. Consulte ¿cómo saber si una app de Shopify está causando un problema? para saber cómo encontrarlo.

Imágenes y vídeos grandes

Shopify sirve automáticamente las imágenes a través de su red de distribución de contenidos y puede entregar versiones redimensionadas, pero solo si el tema solicita tamaños razonables. Los problemas suelen venir de:

• archivos originales muy grandes subidos para banners y presentaciones de diapositivas
• vídeos de cabecera que se reproducen automáticamente
• presentaciones con muchas imágenes a ancho completo
• imágenes insertadas mediante texto enriquecido o constructores de páginas sin control de tamaño
• animaciones GIF usadas donde bastaría un vídeo corto o una imagen fija

La imagen de la parte superior de la página es la que más importa, porque suele ser lo que mide el Largest Contentful Paint.

Un tema pesado o muy personalizado

Algunos temas incluyen muchas funciones: megamenús, animaciones, vista rápida, varios sliders, elementos fijos. Cada función añade código. Las personalizaciones que distintos desarrolladores han ido añadiendo a lo largo de los años también se acumulan, a veces duplicando funciones o cargando bibliotecas que el tema ya incluye.

Un tema antiguo puede no aprovechar los métodos más eficientes disponibles en los temas actuales.

El seguimiento de terceros

Las herramientas de marketing y analítica son valiosas, pero cada una añade trabajo al navegador. Las tiendas suelen tener:

• varias herramientas de analítica que recogen datos similares
• píxeles publicitarios de varias plataformas
• herramientas de mapas de calor y grabación de sesiones
• contenedores de gestores de etiquetas que cargan más etiquetas
• códigos de seguimiento antiguos de campañas ya terminadas

Pueden afectar sobre todo a la capacidad de respuesta, porque ejecutan JavaScript mientras el cliente intenta usar la página.

Fuentes y recursos externos

Las fuentes personalizadas, las bibliotecas de iconos y el contenido incrustado, como feeds de redes sociales o mapas, añaden peticiones. Cargar varias familias y grosores de fuente suma rápidamente.

Colecciones grandes y filtros complejos

Las páginas de colección que muestran muchos productos, cada uno con varias imágenes, muestras de color y distintivos, pueden volverse pesadas. Los filtros, el scroll infinito y la vista rápida añaden todavía más.

¿Cuáles son las mejoras rápidas?

Estos cambios suelen tener poco riesgo y pueden marcar una diferencia visible. Haga un cambio cada vez y vuelva a medir.

• Elimine las apps que ya no use. Compruebe antes si contienen datos que necesite.
• Desactive los app embeds que no necesite en todas las páginas. Algunos se pueden limitar o eliminar del tema.
• Comprima y redimensione las imágenes grandes antes de subirlas, sobre todo los banners y las imágenes de las presentaciones.
• Sustituya los vídeos de cabecera con reproducción automática por una imagen fija, o compruebe que el vídeo sea corto y esté optimizado.
• Reduzca el número de diapositivas en las presentaciones de la página de inicio.
• Revise las herramientas de seguimiento y elimine las duplicadas o los píxeles de campañas antiguas, tras confirmarlo con quien gestione el marketing.
• Limite las familias y grosores de fuente en la configuración del tema.
• Reduzca el número de productos por página en las páginas de colección muy pesadas.

Vale la pena aplicar las mejoras rápidas, pero no resolverán todos los casos. Si la tienda sigue yendo lenta después, normalmente hay que revisar el código con más detalle.

¿Qué requiere un trabajo más profundo?

Algunas mejoras requieren un desarrollador y pruebas cuidadosas:

• eliminar el código que han dejado apps desinstaladas
• optimizar cómo carga el tema los scripts y las hojas de estilo
• aplazar o retrasar los scripts no esenciales
• corregir los desplazamientos del diseño causados por imágenes, banners o widgets de apps
• revisar código Liquid personalizado que hace trabajo innecesario
• unificar funciones que cubren varias apps solapadas
• pasar a un tema más moderno, que es un proyecto en sí mismo
• revisar la configuración del seguimiento para que las etiquetas carguen de forma más eficiente

El trabajo más profundo debe hacerse siempre en un tema duplicado, con mediciones antes y después, y con una prueba completa del carrito y del checkout antes de publicar.

¿Qué debo evitar?

• Obsesionarse con una puntuación perfecta en PageSpeed. La puntuación es una guía, no el objetivo. Importa más una tienda que los clientes perciban como rápida y fácil de usar.
• Instalar una app de velocidad sin entender lo que hace. Algunas cambian la forma de cargar los scripts de un modo que puede romper otras apps o el seguimiento.
• Eliminar el seguimiento sin preguntar. Los informes de marketing y las campañas publicitarias pueden depender de él.
• Cambiar muchas cosas a la vez. No sabrá qué cambio ayudó ni cuál rompió algo.
• Editar el tema publicado. Trabaje siempre primero en un duplicado.
• Juzgar a partir de una sola prueba. Haga las pruebas varias veces y observe los datos de campo a lo largo del tiempo.

¿Cuándo debo pedir ayuda?

Plantéese recurrir a un desarrollador cuando:

• la tienda siga lenta después de eliminar las apps que no usa y corregir las imágenes grandes
• los datos de campo muestren Core Web Vitals deficientes en muchas páginas
• sospeche que hay código sobrante de apps o código personalizado pesado
• los problemas de velocidad hayan aparecido tras una actualización del tema o una app nueva
• el botón de añadir al carrito o los menús tarden en responder
• se esté planteando cambiar de tema principalmente por la velocidad
• las tasas de conversión hayan bajado y la velocidad pueda ser un factor

¿Qué información debo recopilar?

Estos datos son útiles:

• las URL de las páginas que parecen lentas
• los resultados de PageSpeed Insights de esas páginas, idealmente guardados como enlaces o capturas de pantalla
• el informe de rendimiento web de las analíticas de Shopify, si está disponible
• una lista de las apps instaladas y de los cambios recientes
• el nombre y la versión del tema
• qué herramientas de seguimiento se utilizan y quién las gestiona
• cuándo empezó la tienda a parecer más lenta, si lo sabe

Cómo puede ayudarle D4Hub

Mejorar la velocidad consiste en encontrar los verdaderos cuellos de botella y corregirlos sin romper funciones ni el seguimiento del que depende el negocio.

Según la tienda, D4Hub puede ayudarle a:

• medir la velocidad con datos de laboratorio y de usuarios reales
• identificar qué apps, scripts e imágenes tienen más impacto
• eliminar el código sobrante de apps desinstaladas
• optimizar cómo carga el tema las imágenes, los scripts y las fuentes
• corregir los desplazamientos del diseño en las páginas clave
• revisar la configuración del seguimiento y de las etiquetas con su equipo de marketing
• probar los cambios en un tema duplicado antes de publicarlos
• comprobar el carrito y el checkout después de cada cambio
• aconsejarle sobre si merece la pena cambiar de tema

Puede pedir ayuda en cualquier fase, desde una revisión rápida de sus resultados de PageSpeed hasta un proyecto completo de rendimiento.

Preguntas frecuentes

¿Es Shopify en sí lento?

El alojamiento y la red de distribución de contenidos de Shopify los gestiona Shopify y, por lo general, no son el cuello de botella. La mayoría de los problemas de velocidad proceden de las apps, las imágenes, los temas, el seguimiento y el código personalizado añadidos a la tienda.

¿Por qué mi puntuación de PageSpeed es distinta cada vez que hago la prueba?

Las pruebas de laboratorio se ven afectadas por las condiciones de la red, la ubicación de la prueba y el contenido exacto que se carga en ese momento. Es normal que haya pequeñas diferencias entre pruebas. Busque patrones constantes y dé más peso a los datos de campo de usuarios reales cuando estén disponibles.

¿Necesito una puntuación perfecta en PageSpeed?

No. La puntuación es una herramienta de diagnóstico. Lo importante es que los clientes reales puedan ver y usar sus páginas rápidamente, algo que reflejan mejor los datos de campo de las Core Web Vitals y la sensación que da la tienda en un teléfono normal.

¿Una app de optimización de velocidad lo arreglará todo?

No necesariamente. Algunas apps ayudan con problemas concretos, como la compresión de imágenes. Otras cambian la forma de cargar los scripts, lo que puede interferir con otras apps o con el seguimiento. Entienda qué cambia una app antes de instalarla y pruébela primero en un tema duplicado.

¿Debería cambiar de tema para que la tienda sea más rápida?

Un tema moderno puede ayudar, pero cambiar de tema es un proyecto que implica rehacer diseños, volver a instalar bloques de apps y probar cada función. Conviene hacer primero las mediciones y las mejoras rápidas, para saber qué parte de la lentitud procede realmente del tema.

¿La velocidad afecta a las ventas y al posicionamiento en buscadores?

La velocidad es uno de los muchos factores que influyen en la experiencia de los clientes en una tienda, y las Core Web Vitals forman parte de cómo Google evalúa la experiencia en la página. Es difícil predecir el efecto de una mejora concreta, así que lo mejor es medir antes y después y observar sus propios datos de conversión.